python实现圆的旋转动画_如何使用css3制作圆形旋转动画（附完整代码）

最新推荐文章于 2023-06-04 23:22:07 发布
最新推荐文章于 2023-06-04 23:22:07 发布
阅读量336 收藏
点赞数
文章标签： python实现圆的旋转动画

随着css3的广泛应用，人们浏览的web网页越来越多元化，而前端开发者也越来越注重人机交互和用户体验。从一开始的文字到后来的图片，以至于现在的动画特效，人们对于网页的要求也越来越挑剔，那么今天给大家展示一下如何使用css3制作旋转动画。本文在介绍如何使用css3制作旋转动画的基础上，重点探讨了其具体步骤，本文内容紧凑，希望大家可以有所收获。

实例如图所示

使用css3制作旋转动画的思路

首先我们需要使用div画出这8个图标，我们通过观察可以发现，8个图标可以分成4组div，并且可以将圆形等分为8份，这样可以方便我们随后的操作。我是每两个垂直对应的圆就放在同一个div中，令其旋转起来需要使用css3中的旋转属性：第一个div先保持不动，第二个div旋转45°，以此类推，下一个div都要比上一个div多旋转45°就可以实现布局。

使用css3制作旋转动画的步骤

步骤一：画出8个图标设置成4个div

产品中心

官方网站

代理查询

后台登录

公司资质

质检报告

代理登录

代理授权

步骤二：使用css3布局.out_circle{

width:440px;

height:440px;

border:1px solid;

border-radius:50%;

margin:30px auto 0 auto;

position: relative;

}

.nav_circle{

width:110px;

height:440px;

float:left;

position:absolute;

top:0;

left:169px;

text-align:center;

}

.img_top{

top:-27px;

-webkit-transform: rotate(0deg);

}

.img_bottom{

top:316px;

-webkit-transform: rotate(0deg);

}

.img_top img,.img_bottom img{

width:77px;

height: 77px;

}

.img_top,.img_bottom{

position: relative;

z-index:1;

}

.nav_circle .img a{

position: absolute;

top:10px;

left:94px;

width: 52px;

}

.r1{

transform:rotate(0deg) skew(0deg) scale(1);

-ms-transform:rotate(0deg) skew(0deg) scale(1); /* IE 9 */

-moz-transform:rotate(0deg) skew(0deg) scale(1); /* Firefox */

-webkit-transform:rotate(0deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */

-o-transform:rotate(0deg) skew(0deg) scale(1);

animation: rotate 10s linear infinite;

-webkit-animation:rotate 10s linear infinite;

-moz-animation:rotate 10s linear infinite;

-o-animation:rotate 10s linear infinite;

}

.r1 .img{

transform:rotate(0deg) skew(0deg) scale(1);

-ms-transform:rotate(0deg) skew(0deg) scale(1); /* IE 9 */

-moz-transform:rotate(0deg) skew(0deg) scale(1); /* Firefox */

-webkit-transform:rotate(0deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */

-o-transform:rotate(0deg) skew(0deg) scale(1);

animation:rotate_c1 10s linear infinite;

-webkit-animation:rotate_c1 10s linear infinite;

}

.r2{

transform:rotate(45deg) skew(0deg) scale(1);

-ms-transform:rotate(45deg) skew(0deg) scale(1); /* IE 9 */

-moz-transform:rotate(45deg) skew(0deg) scale(1); /* Firefox */

-webkit-transform:rotate(45deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */

-o-transform:rotate(45deg) skew(0deg) scale(1);

animation: rotatef 10s linear infinite;

-webkit-animation:rotatef 10s linear infinite;

-moz-animation:rotatef 10s linear infinite;

-o-animation:rotatef 10s linear infinite;

}

.r2 .img {

transform:rotate(-45deg) skew(0deg) scale(1);

-ms-transform:rotate(-45deg) skew(0deg) scale(1); /* IE 9 */

-moz-transform:rotate(-45deg) skew(0deg) scale(1); /* Firefox */

-webkit-transform:rotate(-45deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */

-o-transform:rotate(-45deg) skew(0deg) scale(1);

animation:rotate_c2 10s linear infinite;

-webkit-animation:rotate_c2 10s linear infinite;

}

.r3 {

transform:rotate(90deg) skew(0deg) scale(1);

-ms-transform:rotate(90deg) skew(0deg) scale(1); /* IE 9 */

-moz-transform:rotate(90deg) skew(0deg) scale(1); /* Firefox */

-webkit-transform:rotate(90deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */

-o-transform:rotate(90deg) skew(0deg) scale(1);

animation: rotates 10s linear infinite;

-webkit-animation:rotates 10s linear infinite;

-moz-animation:rotates 10s linear infinite;

-o-animation:rotates 10s linear infinite;

}

.r3 .img{

transform:rotate(-90deg) skew(0deg) scale(1);

-ms-transform:rotate(-90deg) skew(0deg) scale(1); /* IE 9 */

-moz-transform:rotate(-90deg) skew(0deg) scale(1); /* Firefox */

-webkit-transform:rotate(-90deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */

-o-transform:rotate(-90deg) skew(0deg) scale(1);

animation:rotate_c3 10s linear infinite;

-webkit-animation:rotate_c3 10s linear infinite;

}

.r4{

transform:rotate(135deg) skew(0deg) scale(1);

-ms-transform:rotate(135deg) skew(0deg) scale(1); /* IE 9 */

-moz-transform:rotate(135deg) skew(0deg) scale(1); /* Firefox */

-webkit-transform:rotate(135deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */

-o-transform:rotate(135deg) skew(0deg) scale(1);

animation: rotatet 20s linear infinite;

-webkit-animation:rotatet 10s linear infinite;

-moz-animation:rotatet 10s linear infinite;

-o-animation:rotatet 10s linear infinite;

}

.r4 .img{

transform:rotate(-135deg) skew(0deg) scale(1);

-ms-transform:rotate(-135deg) skew(0deg) scale(1); /* IE 9 */

-moz-transform:rotate(-135deg) skew(0deg) scale(1); /* Firefox */

-webkit-transform:rotate(-135deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */

-o-transform:rotate(-135deg) skew(0deg) scale(1);

animation:rotate_c4 10s linear infinite;

-webkit-animation:rotate_c4 10s linear infinite;

}

步骤三：为每个div创建动画

第一个div@keyframes rotate{

0%{

transform:rotate(0deg) skew(0deg) scale(1);

-ms-transform:rotate(0deg) skew(0deg) scale(1); /* IE 9 */

-moz-transform:rotate(0deg) skew(0deg) scale(1); /* Firefox */

-webkit-transform:rotate(0deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */

-o-transform:rotate(0deg) skew(0deg) scale(1);

}

100%{

transform:rotate(360deg) skew(0deg) scale(1);

-ms-transform:rotate(360deg) skew(0deg) scale(1); /* IE 9 */

-moz-transform:rotate(360deg) skew(0deg) scale(1); /* Firefox */

-webkit-transform:rotate(360deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */

-o-transform:rotate(360deg) skew(0deg) scale(1);

}

}

第二个div@keyframes rotatef{

0%{

transform:rotate(45deg) skew(0deg) scale(1);

-ms-transform:rotate(45deg) skew(0deg) scale(1); /* IE 9 */

-moz-transform:rotate(45deg) skew(0deg) scale(1); /* Firefox */

-webkit-transform:rotate(45deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */

-o-transform:rotate(45deg) skew(0deg) scale(1);

}

100%{

transform:rotate(405deg) skew(0deg) scale(1);

-ms-transform:rotate(405deg) skew(0deg) scale(1); /* IE 9 */

-moz-transform:rotate(405deg) skew(0deg) scale(1); /* Firefox */

-webkit-transform:rotate(405deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */

-o-transform:rotate(405deg) skew(0deg) scale(1);

}

}

第三个div@keyframes rotates{

0%{

transform:rotate(90deg) skew(0deg) scale(1);

-ms-transform:rotate(90deg) skew(0deg) scale(1); /* IE 9 */

-moz-transform:rotate(90deg) skew(0deg) scale(1); /* Firefox */

-webkit-transform:rotate(90deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */

-o-transform:rotate(90deg) skew(0deg) scale(1);

}

100%{

transform:rotate(450deg) skew(0deg) scale(1);

-ms-transform:rotate(450deg) skew(0deg) scale(1); /* IE 9 */

-moz-transform:rotate(450deg) skew(0deg) scale(1); /* Firefox */

-webkit-transform:rotate(450deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */

-o-transform:rotate(450deg) skew(0deg) scale(1);

}

}

第四个div@keyframes rotatet{

0%{

transform:rotate(135deg) skew(0deg) scale(1);

-ms-transform:rotate(135deg) skew(0deg) scale(1); /* IE 9 */

-moz-transform:rotate(135deg) skew(0deg) scale(1); /* Firefox */

-webkit-transform:rotate(135deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */

-o-transform:rotate(135deg) skew(0deg) scale(1);

}

100%{

transform:rotate(495deg) skew(0deg) scale(1);

-ms-transform:rotate(495deg) skew(0deg) scale(1); /* IE 9 */

-moz-transform:rotate(495deg) skew(0deg) scale(1); /* Firefox */

-webkit-transform:rotate(495deg) skew(0deg) scale(1); /* Safari ºÍ Chrome */

-o-transform:rotate(495deg) skew(0deg) scale(1);

}

}

注意

因为css3的旋转属性并不是所有浏览器都可以兼容的，所以在创建完之后要给相应的类添加动画名。

weixin_39790738
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
web前端入门到实战：css3 绘制画圆、扇形
软件开发-前端开发-IT
08-16 4018
css已经越来越强大了 ，可以使用它来绘制各种简单的形状，用于代替图片显示，这次的分享主要用到画圆，扇形 实现圆形 <div class="circle"></div> <style> .circle { border-radius: 50%; width: 80px; height: 80px; background: #666; } <...
html怎么制作一个圆形,css3如何绘制一个圆圆的loading转圈动画
weixin_42513870的博客
06-24 874
如何绘制一个圆圆的loading圈小程序里需要一个像下面的loading，原生的没有，引入别的组件库又太大，所有决定自己写个。1.基本原理动态的实现原理是给8个小圆圈设置透明度由大变小的动画，每个圆圈设置不同的动画启动时间。布局的实现原理是父元素设置为position: relative, 每个圆圈设置样式为position: absolute; left: xx; top: xx; right:...
小圆圈样式轮播图
m0_74880102的博客
12-27 309
小圆圈样式轮播图
python前端的CSS的效果动画，CSS实现风车转动
qq_40739261的博客
10-12 408
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>animation动画效果</title> <style type="text/css"> /* 定义动画 */ ...
CSS 神器：用纯 CSS 实现可爱精致的扇形动画
canshanyin的博客
06-04 1491
CSS 是前端开发中不可或缺的重要工具，它可以让网页变得美丽而生动。今天我们将介绍如何使用纯 CSS 实现一个有趣的扇形动画。本文将从以下几个方面来讲解这个示例代码的实现过程：设计思路、HTML 结构、CSS 样式。
html旋转圆圈动画效果,html – 使用css动画旋转圆(百分比)
weixin_39548438的博客
05-31 566
您可以阅读这篇文章并查看一个工作示例,甚至了解它是如何工作的css-pie-timerUPDATE我不喜欢那个解决方案,所以我试着用自己的方式实现它并提供一点帮助(我在这里问了几个问题)我设法做得非常优雅.主要思想是了解如何绘制圆形扇区,然后开始绘制程度为0的部分,直到达到所需的程度.我也让它变得可逆,只是为了好玩:).HTML0%活动边框将替换为当前百分比.在此示例中,预跨度将包含文本百分比以及...
css3动画实现3d旋转效果
weixin_57156748的博客
12-07 2167
主要用了css3中的animation和transition
【JavaScript源代码】js实现圆形菜单选择器.docx
12-29
- **动画效果**：为了提升用户体验，可以使用 CSS3 的 `transition` 或 `animation` 属性来创建平滑的过渡效果，如菜单项选中时的放大或旋转等。 总结来说，实现一个JavaScript圆形菜单选择器主要涉及CSS的布局与...
【JavaScript源代码】js实现简单圆盘时钟.docx
12-29
这段CSS代码创建了一个圆形的时钟盘面，设置了边框、圆角和背景色。`axis` 类定义了中心点，而`.hourHand`, `.minuteHand`, 和 `.secondHand` 分别代表小时、分钟和秒针，它们的长度和宽度已根据实际比例设定。`....
【JavaScript源代码】vue手写加载动画项目.docx
12-29
总的来说，这个 Vue.js 加载动画项目展示了如何结合 CSS3 动画和 Vue.js 组件实现一个简单的但视觉效果良好的加载指示器。这种技术不仅适用于 Vue，也可以应用于其他支持 CSS 动画的前端框架，如 React 或 Angular。...
用python10秒钟学带你学会最近爆火的爱心代码！
12-02
不过，Python可以通过`BeautifulSoup`库解析HTML，`cssutils`库处理CSS，甚至可以使用`subprocess`调用浏览器显示网页，实现自动化生成和预览爱心代码。 通过学习和理解这些基本概念，你不仅可以创建出美丽的爱心...
加载时旋转进度
03-25
在前端开发中，CSS3提供了丰富的动画属性，可以创建出旋转效果，配合JavaScript进行控制，实现动态加载动画。例如，可以使用`@keyframes`规则定义动画过程，然后通过`animation`属性应用到元素上。对于更复杂的动画...
css实现炫酷的圆环相交转动动画
苏苏就是小苏苏的博客
08-24 1990
css实现炫酷的圆环相交转动动画
python前端CSS实现登录动画loading
qq_40739261的博客
10-12 263
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS实现loading动画</title> <style> /* 定义动画 */ @keyframes l...
python利用turtle库绘制正方形绕海龟原点旋转
学习笔记的博客
03-08 3348
正方形绕海龟做环形阵列 程序如下 import turtle as t t.setup(600,600)#定义窗口尺寸 t.pensize(2.5) for i in range(36):#定义正方形循环36次 t.pencolor("red")#定义颜色 t.penup() t.fd(60) t.pendown() t.left(90)#定义角度 ...
46 行 Python 代码，做一个会旋转的三维甜甜圈！
CSDN资讯
01-12 1152
摘要：在三维渲染技术中，符号距离函数很难理解，而本文作者仅用 46 行 Python 代码就展示了这项技术。链接：https://vgel.me/posts/donut/声明：本文为 CSDN 翻译，未经允许禁止转载。作者 | Theia Vogel译者 | 弯月 责编 | 郑丽媛出品 | CSDN（ID：CSDNnews）符号距离函数（Signed Distance Function，简称...
Python控制台加载中转圈动画
星云
12-27 1910
Python控制台加载中动画 import _thread import time def loading(lock): chars = ['⣾', '⣷', '⣯', '⣟', '⡿', '⢿', '⣻', '⣽'] i = 0 print('') while lock[0]: i = (i+1) % len(chars) print('\033[A%s %s' % (chars[i], lock[1] or.
python画旋转圆_python+matplotlib绘制旋转椭圆实例代码
weixin_27011811的博客
02-21 678
旋转椭圆实例代码：import matplotlib.pyplot as pltimport numpy as npfrom matplotlib.patches import Ellipsedelta = 45.0 # degreesangles = np.arange(0, 360 + delta, delta)ells = [Ellipse((1, 1), 4, 2, a) for a in...
100款古风PPT (80).pptx
最新发布
07-13
【ppt素材】工作总结、商业计划书、述职报告、读书分享、家长会、主题班会、端午节、期末、夏至、中国风、卡通、小清新、岗位竞聘、公司介绍、读书分享、安全教育、文明礼仪、儿童故事、绘本、防溺水、夏季安全、科技风、商务、炫酷、企业培训、自我介绍、产品介绍、师德师风、班主任培训、神话故事、巴黎奥运会、世界献血者日、防范非法集资、3D快闪、毛玻璃、人工智能等等各种样式的ppt素材风格。 设计模板、图片素材、PPT模板、视频素材、办公文档、小报模板、表格模板、音效配乐、字体库。 广告设计：海报，易拉宝，展板，宣传单，宣传栏，画册，邀请函，优惠券，贺卡，文化墙，标语，制度，名片，舞台背景，广告牌，证书，明信片，菜单，折页，封面，节目单，门头，美陈，拱门，展架等。 电商设计：主图，直通车，详情页，PC端首页，移动端首页，钻展，优惠券，促销标签，店招，店铺公告等。 图片素材：PNG素材，背景素材，矢量素材，插画，元素，艺术字，UI设计等。 视频素材：AE模板，会声会影，PR模板，视频背景，实拍短片，音效配乐。 办公文档：工作汇报，毕业答辩，企业介绍，总结计划，教学课件，求职简历等PPT/WORD模板。
python画旋转六边形_超简单-C3实现旋转六边形
06-08
好的，以下是使用C3.js库实现旋转六边形的Python代码： ```python from IPython.display import HTML import json # 定义数据 data = { "size": { "width": 600, "height": 600 }, "data": { "sequence": [ ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值