备案控制台
开发者社区 开发与运维 文章 正文

css 实现旋转-风车

2021-12-15 137
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： css 实现旋转-风车

 

1. 放置风车图片

<img src="imgs/fengche.jpg" alt="小风车">• 1

2. css

@keyframes rotating {
       from{
           transform: rotate(0);
       }
       to{
           transform: rotate(360deg);
       }
 }
 img{
       animation: rotating 1.2s linear infinite
 }

linear：匀速

infinite表示无限次循环动画

效果 （录制jif，原效果平滑）

1.gif


文章标签：
前端开发
关键词：
CSS旋转
CSS风车
CSS实现
YOLO创新改进大师
目录
相关文章
疯狂的猿
|
22天前
CSS3自动旋转正方体3D特效
CSS3自动旋转正方体3D特效
疯狂的猿
27 3
CSS3自动旋转正方体3D特效
w7hwgrboggm6g
|
前端开发 容器
面试官：请使用 CSS 实现自适应正方形
面试官：请使用 CSS 实现自适应正方形
w7hwgrboggm6g
427 0
面试官：请使用 CSS 实现自适应正方形
daisy`
|
22天前
|
前端开发
css实现风车样式
css实现风车样式
daisy`
17 0
王同学睡醒了
|
6月前
HTML+CSS制作3D旋转相册
HTML+CSS制作3D旋转相册
王同学睡醒了
86 0
王同学睡醒了
|
6月前
|
前端开发
HTML+CSS制作旋转的loading效果
HTML+CSS制作旋转的loading效果
王同学睡醒了
61 0
syst1_m
|
7月前
|
前端开发
CSS 绘制小风车
CSS 绘制小风车
syst1_m
26 0
兜里只有三分钱~
|
9月前
|
前端开发
css三角号旋转90度，上下移动动画效果demo效果（整理）
css三角号旋转90度，上下移动动画效果demo效果（整理）
兜里只有三分钱~
53 0
兜里只有三分钱~
|
9月前
CSS3鼠标悬停360度旋转效果
CSS3鼠标悬停360度旋转效果
兜里只有三分钱~
34 0
Clover&lsquo;sBlog
|
10月前
|
前端开发
【CSS动画02--卡片旋转3D】
【CSS动画02--卡片旋转3D】
Clover&lsquo;sBlog
142 0
前端迷
|
10月前
|
前端开发
css制作旋转的太极
css制作旋转的太极
前端迷
46 0