css大屏转动效果

D6元素

已于 2022-08-04 11:04:41 修改

阅读量725

点赞数 1

分类专栏： css3 文章标签： css html

于 2022-08-04 11:03:32 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/jiangquan1982/article/details/126155621

版权

css3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

直接上代码：

<style>
       body{
           background-color: #000;
       }
       #circle_bg{
           padding: 10px 0;
                   background: url("img/cricle_bg.png") no-repeat;
                   height: 327px;
                   width: 955px;
       }
       #cricle2{
           margin: 0 auto;
           background: url("img/cricle2.png");
           width: 300px;
           height: 300px;
           animation: myfirst 10s linear infinite;
           /* animation: myfirst 10s infinite; */
           -webkit-animation: myfirst 10s linear infinite; /* Safari 与 Chrome */
       }
       #chiLun{
           background: url("img/cricle.png");
           width: 174px;
           height: 174px;
           animation: budder1 5s infinite;
           -webkit-animation: budder1 5s infinite; /* Safari 与 Chrome */
       }
       @keyframes myfirst {
       from {transform:rotate(0deg);}
       to {transform:rotate(360deg);}
       }
       @keyframes budder1{
       0%{
       transform:rotate(0deg);
       -ms-transform:rotate(0deg); /* IE 9 */
       -webkit-transform:rotate(0deg); /* Safari and Chrome */
       }
       10%{
       transform:rotate(36deg);
       -ms-transform:rotate(36deg); /* IE 9 */
       -webkit-transform:rotate(36deg); /* Safari and Chrome */
       }
       20%{
       transform:rotate(72deg);
       -ms-transform:rotate(72deg); /* IE 9 */
       -webkit-transform:rotate(72deg); /* Safari and Chrome */
       }
       30%{
       transform:rotate(98deg);
       -ms-transform:rotate(98deg); /* IE 9 */
       -webkit-transform:rotate(98deg); /* Safari and Chrome */
       }
       40%{
       transform:rotate(144deg);
       -ms-transform:rotate(144deg); /* IE 9 */
       -webkit-transform:rotate(144deg); /* Safari and Chrome */
       }
       50%{
       transform:rotate(180deg);
       -ms-transform:rotate(180deg); /* IE 9 */
       -webkit-transform:rotate(180deg); /* Safari and Chrome */
       }
       60%{
       transform:rotate(216deg);
       -ms-transform:rotate(216deg); /* IE 9 */
       -webkit-transform:rotate(216deg); /* Safari and Chrome */
       }
       70%{
       transform:rotate(252deg);
       -ms-transform:rotate(252deg); /* IE 9 */
       -webkit-transform:rotate(252deg); /* Safari and Chrome */
       }
       80%{
       transform:rotate(288deg);
       -ms-transform:rotate(288deg); /* IE 9 */
       -webkit-transform:rotate(288deg); /* Safari and Chrome */
       }
       90%{
       transform:rotate(324deg);
       -ms-transform:rotate(324deg); /* IE 9 */
       -webkit-transform:rotate(324deg); /* Safari and Chrome */
       }
       100%{
       transform:rotate(360deg);
       -ms-transform:rotate(360deg); /* IE 9 */
       -webkit-transform:rotate(360deg); /* Safari and Chrome */
       }

       }
   </style>
   <body>
       <div id="chiLun"></div>
       <div id="circle_bg">
           <div id="cricle2"></div>
       </div>
   </body>

效果如图：

图片素材：cricle.png：cricle_bg.png：

cricle2.png：

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
css大屏转动效果

css3大屏转动效果
复制链接

扫一扫

专栏目录

评论 1

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。