html制作跳动的心注释比较全

最新推荐文章于 2023-02-07 04:00:00 发布

OTF893

最新推荐文章于 2023-02-07 04:00:00 发布

阅读量430

点赞数

文章标签： python html chrome

本文链接：https://blog.csdn.net/weixin_62484294/article/details/121442126

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
       /*设置body的背景颜色*/
       body{
           background-color: #ffa5a5;
       }
           .cen{
               width: 200px;
               height: 200px;
               background-color: #d5093c;

               /*加阴影，阴影四个值*/
               /*水平偏移0 垂直偏移0 模糊度70，值越大越模糊阴影颜色*/
               /*向方框添加阴影*/
               box-shadow: 0px 0px 70px #d5093c;
               /*执行动画百分百为1秒，无限循环*/
               animation: 1s aj infinite;
           }
           .lef{
               /*倒圆角指令*/
               /*radius半径范围*/
               border-radius: 100px;
               /*上右下左顺时针*/
               /*border-radius: 10px 20px 30px 40px;*/
               /*左上右下10像素，坐下右上20像素*/
               /*border-radius: 10px 20px;*/

               /*定位*/
               position: absolute;
               top: 200px;
               left: 200px;
           }
           .rig{
               border-radius:100px;
               position: absolute;
               top: 200px;
               left: 341px;
           }
           .c{
               /*旋转角度 45度*/
               /*transform转换变换*/
               /*rotate旋转*/
               transform: rotate(45deg);
               position: absolute;
               top: 269px;
               left: 271px;
           }
           /*div:hover{
               /*放大倍数*/
               /*transform: scale(1.3);*/
               /*X：水平位移 Y：垂直位移负数向上*/
               /*transform: translate(0px,-5px);*/
               /*2D角度的旋转 X Y可单指定X*/
               /*transform: skew(40deg,45deg);*/
           /*}*/

           /*动画的设置将一秒切成三部分，0.5秒放大一下*/
           @keyframes aj{
               0%{transform: scale(1)rotate(45deg);}
               50%{transform: scale(1.1)rotate(45deg);}
               100%{transform: scale(1)rotate(45deg);}
           }
       </style>
   </head>
   <body>
       <div class="cen lef"></div>
       <div class="cen c"></div>
       <div class="cen rig"></div>
   </body>
</html>