摘要:
下文讲述使用css代码绘制一个”跳动着的红心”的方法分享,如下所示:
下午将通过示例的方式讲述其方法,如下所示:
实现思路: 1.绘制两个叠加圆,组合为一个心 2.通过动画修改“心”的缩放比率,达到闪动效果
例:
css 实现闪动着”小心”的示例分析
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.maomao365.com/" /> <title>猫猫小屋</title> <style> .box { width: 180px; height: 160px; margin: 200px auto; position: relative; animation: shan .6s infinite alternate; text-align: center; -webkit-animation: shan .6s infinite alternate; } @-webkit-keyframes shan { 0% { opacity: 0.5; -webkit-transform: scale(0.8,0.8); transform: scale(0.8,0.8); } } .box span { display: inline-block; background: #f06a73; position: absolute; } .box_lt, .box_rt { width: 100px; height: 100px; border-radius: 50%; } .box_lt { left: 0; top: 0; } .box_rt { left: 80px; top: 0; } .box_ft { width: 100px; height: 100px; -webkit-transform: rotate(135deg); left: 40px; top: 40px; } </style> </head> <body> <div class="box"> <span class="box_lt"></span> <span class="box_rt"></span> <span class="box_ft"></span> </div> </body> </html>