css3制作愤怒的小鸟-求代码更优化方式

最新推荐文章于 2024-08-28 16:29:19 发布

AATAamg

最新推荐文章于 2024-08-28 16:29:19 发布

阅读量926

点赞数

文章标签：前端css3

本文链接：https://blog.csdn.net/AATAamg/article/details/84635367

版权

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <style media="screen">
           * {
                   margin: 0;
                   padding: 0;
           }

           body {
                   background: #27283b;
           }

           div {
                   /*border: 1px solid blue;*/
           }

           .bird {
                   /*border: 1px solid red;*/
                   /*设置小鸟的位置*/
                   position: absolute;
                   width: 200px;
                   height: 200px;
                   top: 50%;
                   left: 50%;
                   /*设置鼠标进的样式*/
                   cursor: pointer;
           }

           .big {
                   /*border: 1px solid #fff;*/
                   /*位置的计算是根据外层的div 也就是class=bird*/
                   position: absolute;
                   top: 0;
                   left: 0;
                   /*width: 100px;
   height: 100px;
   background: red;*/
                   border-width: 100px;
                   border-radius: 50%;
                   /*同学们仔细看了老师要变魔术了*/
                   /*最好是再给一个填充的属性*/
                   border-style: solid;
                   /*设置颜色展示的是边框*/
                   border-color: transparent transparent #d72928 #db3e3d;
                   /*旋转角度调节*/
                   transform: rotate(45deg);
                   -webkit-transform: rotate(45deg);

                   -webkit-transition: 0.5s;
                   -o-transition: 0.5s;
                   transition: 0.5s;
           }
           .middle {
                   /*border: 3px solid green;*/
                   position: absolute;
                   top: 10%;
                   left: 10%;
                   border-width: 80px;
                   border-style: solid;
                   border-radius: 50%;
                   border-color: #f8d245 transparent #f2f2f2 #fff;
                   /*旋转角度*/
                   transform: rotate(45deg);
                   -webkit-transform: rotate(45deg);

                   -webkit-transition: 0.5s;
                   -o-transition: 0.5s;
                   transition: 0.5s;
           }

           .small {
                   /*border: 3px solid blue;*/
                   position: absolute;
                   top: 30%;
                   left: 30%;
                   border-width: 40px;
                   border-style: solid;
                   border-radius: 50%;
                   border-color: transparent #f7a703 transparent transparent;

transform: rotate(45deg);
-webkit-transform: rotate(45deg);

                   -webkit-transition: 0.5s;
                   -o-transition: 0.5s;
                   transition: 0.5s;
           }

           .small:before{
                   border: 2px solid blue;
                   content: "";
                   background: #000;
                   width: 20px;
                   height: 20px;
                   border-radius: 50%;
                   position: absolute;
                   top: -10px;
                   right: 20px;
           }

           .bird:hover .big{
                   -webkit-transform: rotate(225deg);
                   -ms-transform: rotate(225deg);
                   transform: rotate(225deg);

                   border-color: transparent transparent #1fe8b6 #16d7a7;
           }
           .bird:hover .middle{
                   -webkit-transform: rotate(-135deg);
                   -ms-transform: rotate(-135deg);
                   transform: rotate(-135deg);

                   border-color: transparent #f8d245 #fff #f2f2f2;
           }
           .bird:hover .small{
                   -webkit-transform: rotate(135deg);
                   -ms-transform: rotate(135deg);
                   transform: rotate(135deg);

                   border-color: transparent #f7a703 transparent transparent;
           }
       </style>
   </head>

</html>