使用transform属性和animation属性制作跳动的心

transform属性允许我们对元素进行旋转、缩放、移动和倾斜；

animation属性允许我们对元素实现一些动画效果；

跳动的心源码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>跳动的心</title>

     <style>

         *{

             margin: 0;

             padding: 0;

         }

         .contain{

             width: 100%;

             height: 100%;

             position: fixed; /*固定定位相对于浏览器窗口*/

             background-color: white;

             animation-name: contain;

             animation-duration: 1s;

             animation-iteration-count: infinite; /*动画次数*/

         }

         .heart{

             width: 50px;

             height: 50px;

             background-color:pink;

             position: absolute;

             margin: auto;

             top: 0;

             bottom: 0;

             left: 0;

             right: 0;

             transform: rotate(-45deg);

             animation-name: beat;

             animation-duration: 1s;

             animation-iteration-count: infinite;

         }

         .heart:before{

             background-color: pink;

             content: "";

             border-radius: 50%;

             width: 50px;

             height: 50px;

             position: absolute;

             top:-25px;

             left: 0;

         }

         .heart:after{

             background-color: pink;

             content: "";

             border-radius: 50%;

             width:50px;

             height: 50px;

             position: absolute;

             top: 0 ;

             left: 25px;

         }

         @keyframes contain {

             50%{

                 background-color: #ffe6f2;

             }

         }

         @keyframes beat{

             0%{

                 transform: scale(1) rotate(-45deg);

             }

             50%{

                 transform: scale(0.6) rotate(-45deg);

             }

         }

     </style>

 </head>

 <body>

   <div class="contain">

       <div class="heart">

       </div>

   </div>

 </body>

 </html>

以上代码使用了两个动画：背景图的颜色变化、桃心的大小变化；

关于.heart的伪类：

1.top和left值的变化（该数值与原heart的大小的联系）

巴特西

使用transform属性和animation属性制作跳动的心

最新文章

热门文章