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

css 实现旋转-风车

2021-12-15 160
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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创新改进大师
目录
相关文章
疯狂的猿
|
6月前
CSS3自动旋转正方体3D特效
CSS3自动旋转正方体3D特效
疯狂的猿
54 3
CSS3自动旋转正方体3D特效
邹荣乐
|
1月前
|
前端开发
运用CSS伪类与属性，巧妙实现背景图片旋转效果
运用CSS伪类与属性，巧妙实现背景图片旋转效果
邹荣乐
33 0
diygwcom
|
1月前
|
前端开发 容器
CSS实现旋转圆角叠加样式，你学会了吗？
CSS实现旋转圆角叠加样式，你学会了吗？
diygwcom
36 0
yqcoder
|
4月前
|
前端开发
前端 CSS 经典：旋转边框效果
前端 CSS 经典：旋转边框效果
yqcoder
39 0
daisy`
|
6月前
|
前端开发
css实现风车样式
css实现风车样式
daisy`
39 0
王同学睡醒了
|
11月前
HTML+CSS制作3D旋转相册
HTML+CSS制作3D旋转相册
王同学睡醒了
142 0
王同学睡醒了
|
11月前
|
前端开发
HTML+CSS制作旋转的loading效果
HTML+CSS制作旋转的loading效果
王同学睡醒了
113 0
syst1_m
|
前端开发
CSS 绘制小风车
CSS 绘制小风车
syst1_m
55 0
仙鹤童子```
|
前端开发
CSS transform实现按钮边框旋转效果
CSS transform实现按钮边框旋转效果
仙鹤童子```
131 1
兜里只有三分钱~
|
前端开发
css三角号旋转90度，上下移动动画效果demo效果（整理）
css三角号旋转90度，上下移动动画效果demo效果（整理）
兜里只有三分钱~
107 0

热门文章

最新文章

  • 1
    CSS 居中方法总结
  • 2
    纯CSS3实现宽屏二级下拉菜单
  • 3
    CSS3实现多样的边框效果
  • 4
    CSS3-实现单选框radio的小动画
  • 5
    使用 CSS3 实现 3D 图片滑块效果【附源码下载】
  • 6
    CSS3实现时间轴效果
  • 7
    【HTML+CSS+JS】前端三剑客实现3D旋转照片墙
  • 8
    05.javascript访问CSS
  • 9
    CSS3中的选择器
  • 10
    Css:背景色透明，内容不透明之终极方法！兼容所有浏览器
  • 1
    使用CSS中的cursor属性值，常用的可设置参数，以及其他16中参数值的使用场景和示例代码
    72
  • 2
    技术心得：xpath、CSS定位方法
    46
  • 3
    【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
    165
  • 4
    CSS【详解】对齐 （含文本垂直对齐，文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐，图片和文本对齐等）
    76
  • 5
    CSS【详解】布局 display （ 含 flex 布局，grid 布局，table 布局，float 布局，响应式布局 等）
    142
  • 6
    CSS【详解】定位 position （静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky）
    51
  • 7
    CSS【详解】长度单位 （ px，%，em，rem，vw，vh，vmin，vmax，ex，ch ）
    75
  • 8
    CSS 【详解】样式选择器（含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器）
    159
  • 9
    使用HTML和CSS创建响应式表格
    169
  • 10
    常见的css优化方案都有那些
    51

    • 相关课程

    更多
  • CSS 快速掌握
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 低代码开发师（初级）实战教程
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • CSS基础教程
    • 下一篇
    无影云桌面