css3动画如何使圆形旋转

今天小编给大家分享一下css3动画如何使圆形旋转的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

css3动画使圆形旋转的方法:1、新建一个HTML示例文件,并定义div为“<div class="demo"></div>”;2、通过动画属性设置不同效果的边框,进行旋转,代码为“animation: circle 2s infinite linear; @keyframes circle {0% {transform: rotate(0deg);}”。

CSS3 圆环旋转效果

一、CSS3圆环旋转效果 1

原理:设置不同效果的边框,进行旋转

<div class="demo"></div><style>
   .demo {
       width: 250px;
       height: 250px;
       border: 50px solid red;
       border-left-color: blue;
       border-right-color: yellow;
       border-top-color: #04f105;
       margin: 100px;
       border-radius: 50%;
       animation: circle 2s infinite linear;
   }
   @keyframes circle {
       0% {
           transform: rotate(0deg);
       }

       100% {
           transform: rotate(-360deg);
       }
   }</style>

css3动画如何使圆形旋转  css3 第1张

二、Css 3圆环效果2

原理:使用多层边框下沟哦,执行旋转

<div class="demoout">
   <div class="demo"></div></div><style>
   body {
       background: black;
   }

   .demo {
       width: 250px;
       height: 250px;
       border: 3px solid white;
       border-left-color: blue;
       border-right-color: yellow;
       margin: 25px;
       border-radius: 50%;
       animation: circle 4s infinite ease;
       background: white;
   }

   .demoout {
       width: 300px;
       height: 300px;
       border: 3px solid white;
       border-top-color: green;
       border-bottom-color: red;
       margin: 100px;
       border-radius: 50%;
       animation: circle 4s infinite linear;
       background: white;
   }

   @-webkit-keyframes circle {
       0% {
           transform: rotate(0deg);
       }

       100% {
           transform: rotate(-360deg);
       }
   }</style>

效果如下:

css3动画如何使圆形旋转  css3 第2张

以上就是“css3动画如何使圆形旋转”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注蜗牛博客行业资讯频道。

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:niceseo99@gmail.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

评论

有免费节点资源,我们会通知你!加入纸飞机订阅群

×
天气预报查看日历分享网页手机扫码留言评论电报频道链接