废话不多说了,直接给大家贴代码了,具体代码如下所示:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>模拟心的跳动</title> </head> <style type="text/css"> * { margin: 0; padding: 0; } body { background-color: #D4CECE; } .big { width: 200px; height: 200px; margin: 0 auto; position: relative; animation: heartAnimation 0.7s linear 0s infinite; } .big #heart { margin: 5px 0; width: 100%; height: 100%; background-color: #FF0606; position: absolute; } .left,.right { border-radius: 100px 100px 0 0; /*左上 右上 右下 左下*/ box-shadow: 0px 0px 20px #FD0707; } .bottom { box-shadow: 0px 0px 20px #FD0707; } .left { transform: translate(-50px,150px) rotate(-45deg); /*translate()位移 rotate() 旋转角度*/ } .right { transform: translate(50px,150px) rotate(45deg); } .bottom { transform: translate(0,214px) rotate(45deg) scale(.9,.9) /*scale:定义 2D 缩放转换。*/ } /*动画效果*/ @keyframes heartAnimation{ form { transform: scale(0.9,0.9); } to { transform: scale(1.1,1.1); } } </style> <body> <div class="big"> <div id="heart" class="left"></div> <div id="heart" class="right"></div> <div id="heart" class="bottom"></div> </div> </body> </html>
总结
以上所述是小编给大家介绍的HTML+CSS3模拟心的跳动实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
标签:
html,css3,心跳动
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“HTML+CSS3模拟心的跳动实例代码”评论...
更新动态
2024年11月13日
2024年11月13日
- 群星《唱给女人的歌》24K德国HD金碟[WAV+CUE]
- 孙燕姿.2011-是时候【美妙音乐】【WAV+CUE】
- 苏芮.2003-回首·时代全经典2CD【华纳】【WAV+CUE】
- 梁咏琪.1996-爱自己【EEI】【WAV+CUE】
- IGN经典逆天骚操作名著——《墙头草修炼手册》
- 突然爆火的“网红游戏”,真的有那么多人玩吗?
- 何老师客串《浪人崛起》了?盘点与明星撞脸的角色!
- 【原神】关于星鹫赤羽对珐芙琴班配队下珐露珊主C的适配度分析
- 【原神】V5.1攻略 | 迪西雅角色简评
- 【原神】大日御舆顶端怎么上去
- 胥拉齐《感谢有你》DTS-WAV
- 罗海英《金牌歌后》【WAV+CUE】
- 林叶《林叶·夜》【WAV/分轨】
- 群星《国语经典名曲01》音乐磁场系列[WAV+CUE][1G]
- 齐豫《滚石24K》24K金碟珍藏版系列[低速原抓WAV+分轨][1G]