运用CSS的动画（animation）让爱心动起来！！！

最新推荐文章于 2024-07-11 16:15:52 发布

Harrychuan

最新推荐文章于 2024-07-11 16:15:52 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/Harrychuan/article/details/106453167

版权

1，首先我们先画画一个正方形，再利用伪元素：：before 和：：after 画两个圆。代码如下：

<body>   
 <article>       
  <div class="heart">       
   </div>
    </article>

</body>

body{  background-color: pink;}

  .heart { width:50px;   
           height:50px;    
           position: absolute;   
           margin: auto;   
           top: 0;   
           right:0;   
           bottom:0;    
           left: 0;    
           background-color: red;   
           transform: rotate(45deg) ;
         } 
         
  .heart::after{ content: "";    
                 width: 50px;    
                 height: 50px;    
                 position: absolute;    
                 border-radius: 50%;    
                 background-color: red;    
                 top: 0px;   
                 left: -25px;
               }
.heart::before {content: "";
                width: 50px;
                height: 50px;
                position: absolute;
                background-color: red;
                border-radius: 50%;
                top: -25px;
                left: 0;
              }

注意： 设置绝对定位，并且top，right，bottom，left都为0代表生成了一个和父元素同等大小的边框。因此，在上下左右这四个方向，都存在了可以被分配的空间，所以margin：auto在这个时候就起了作用。（一定要记得给子元素设置宽高，不然在top,right,bottom,left等于0的影响下，子元素会铺满整个父div）。

2，接下来就是让爱心动起来！
运用css的动画（animation）：
(1) 自定义名称：aixin
(2)在.heart选择器中添加 animation:aixin linear 2.5s infinite ;
(3) 设动画平速运动 `
@keyframes aixin{
0%{ transform:rotate(45deg) scale(1) ; }
10%{ transform: rotate(45deg) scale(2) ; }
35%{ transform: rotate(45deg) scale(4) ; }
55%{ transform: rotate(45deg) scale(6) ; }
75%{ transform: rotate(45deg) scale(4);}
90%{ transform: rotate(45deg) scale(2); }
100%{ transform: rotate(45deg) scale(1); }
}

效果图截图：
在这里插入图片描述

Harrychuan

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
运用CSS的动画（animation）让爱心动起来！！！

1，首先我们先画画一个正方形，再利用伪元素：：before 和：：after 画两个圆。代码如下：body{ background-color: pink;} .heart { width:50px; height:50px; position: absolute; margin: auto; top: 0; right:0; b
复制链接

扫一扫