css3动画如何使圆形旋转

发布时间:2023-02-02 16:14:15 作者:iii
来源:亿速云 阅读:304

今天小编给大家分享一下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动画如何使圆形旋转

二、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动画如何使圆形旋转”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。

推荐阅读:
  1. 怎么使用HTML5和CSS3实现生日快乐动画网页
  2. CSS3的transition与transform属性怎么使用

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

css3

上一篇:物联网的四个关键技术是什么

下一篇:虚拟机的ip地址和主机相同吗

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》