css3仿天气风车旋转

风车翅膀是会转动的

代码如下

<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo</title></head><body><style>body {background: #a5cad6;}.windmill {display: block;position: relative;margin: 50px auto;width: 100px;height: 120px;}.windmill:after {background: transparent url(assets/windmill.png) no-repeat -100px 0;width: 100px;height: 120px;bottom: 0;left: 0;position: absolute;content: '';}.windmill .spinning-wing {background: transparent url(assets/windmill.png) no-repeat 0px 0;width: 100px;height: 100px;margin: 0;top: 0;left: 0;position: absolute;z-index: 88;-webkit-transition-property: -webkit-transform;-webkit-transition-duration: 1s;-moz-transition-property: -moz-transform;-moz-transition-duration: 1s;-webkit-animation: rotate 4s linear infinite;-moz-animation: rotate 4s linear infinite;-o-animation: rotate 4s linear infinite;animation: rotate 4s linear infinite;}.windmill .spinning-wing:hover {-webkit-animation: rotate2 .3s linear infinite;-moz-animation: rotate2 .3s linear infinite;-o-animation: rotate2 .3s linear infinite;animation: rotate2 .3s linear infinite;}@-webkit-keyframes rotate {from {-webkit-transform: rotate(0deg)}to {-webkit-transform: rotate(360deg)}}@-moz-keyframes rotate {from {-moz-transform: rotate(0deg)}to {-moz-transform: rotate(359deg)}}@-o-keyframes rotate {from {-o-transform: rotate(0deg)}to {-o-transform: rotate(359deg)}}@keyframes rotate {from {transform: rotate(0deg)}to {transform: rotate(359deg)}}@-webkit-keyframes rotate2 {from {-webkit-transform: rotate(0deg)}to {-webkit-transform: rotate(360deg)}}@-moz-keyframes rotate2 {from {-moz-transform: rotate(0deg)}to {-moz-transform: rotate(359deg)}}@-o-keyframes rotate2 {from {-o-transform: rotate(0deg)}to {-o-transform: rotate(359deg)}}@keyframes rotate2 {from {transform: rotate(0deg)}to {transform: rotate(359deg)}}.windmill2 {display: block;position: relative;margin: 50px auto;width: 100px;height: 120px;}.windmill2 .pillar {position: absolute;top: 8px;left: 44px;display: block;height: 0;width: 4px;border-width: 0 4px 80px 4px;border-style: none solid solid;border-color: transparent transparent white;}.windmill2 .axis {position: absolute;top: 0px;left: 46px;width: 4px;height: 4px;border: 3px #fff solid;background: #a5cad6;border-radius: 5px;z-index: 88;-webkit-transition-property: -webkit-transform;-webkit-transition-duration: 1s;-moz-transition-property: -moz-transform;-moz-transition-duration: 1s;-webkit-animation: rotate 4s linear infinite;-moz-animation: rotate 4s linear infinite;-o-animation: rotate 4s linear infinite;animation: rotate 4s linear infinite;}.windmill2 .swing {position: absolute;top: 1px;left: -2px;display: block;height: 0;width: 2px;border-width: 50px 2px 0px 2px;border-style: solid solid none;border-color: white transparent transparent;box-shadow: 1px 1px 1px rgba(105, 97, 97, 0.1);-webkit-transform-origin: 0px 0px;-webkit-transform: rotate(60deg);-moz-transform-origin: 0px 0px;-moz-transform: rotate(60deg);-ms-transform-origin: 0px 0px;-ms-transform: rotate(60deg);-o-transform-origin: 0px 0px;-o-transform: rotate(60deg);transform-origin: 0px 0px;transform: rotate(60deg);}.windmill2 .swing2 {position: absolute;top: 0px;left: 4.5px;display: block;height: 0;width: 2px;border-width: 50px 2px 0px 2px;border-style: solid solid none;border-color: white transparent transparent;-webkit-transform-origin: 0px 0px;-webkit-transform: rotate(180deg);-moz-transform-origin: 0px 0px;-moz-transform: rotate(180deg);-ms-transform-origin: 0px 0px;-ms-transform: rotate(180deg);-o-transform-origin: 0px 0px;-o-transform: rotate(180deg);transform-origin: 0px 0px;transform: rotate(180deg);}.windmill2 .swing3 {position: absolute;top: 6px;left: 3px;display: block;height: 0;width: 2px;border-width: 50px 2px 0px 2px;border-style: solid solid none;border-color: white transparent transparent;-webkit-transform-origin: 0px 0px;-webkit-transform: rotate(300deg);-moz-transform-origin: 0px 0px;-moz-transform: rotate(300deg);-ms-transform-origin: 0px 0px;-ms-transform: rotate(300deg);-o-transform-origin: 0px 0px;-o-transform: rotate(300deg);transform-origin: 0px 0px;transform: rotate(300deg);}/* .windmill2 .axis:hover {-webkit-animation: rotate2 .3s linear infinite;-moz-animation: rotate2 .3s linear infinite;-o-animation: rotate2 .3s linear infinite;animation: rotate2 .3s linear infinite;} */</style><h1>css3+图片实现的风车效果</h1><span class="windmill"><span class="spinning-wing"></span></span><h1>纯css3实现的风车效果</h1><span class="windmill2"><span class="pillar"></span><span class="axis"><span class="swing"></span><span class="swing2"></span><span class="swing3"></span></span></span></body>
</html>

素材

css3仿天气风车旋转相关推荐

  1. CSS3 animation动画，风车旋转、loading、人物走路动画案例

    CSS3 animation动画 1.@keyframes 定义关键帧动画 2.animation-name 动画名称 3.animation-duration 动画时间 4.animation-ti ...

  2. android旋转不重绘,Android自定义view仿微信刷新旋转小风车

    本文实例为大家分享了Android仿微信刷新旋转小风车 具体代码,供大家参考,具体内容如下 不太会录像,没办法,智能截图了 不多说了,直接上代码 package com.shipneg.demoysp ...

  3. CSS3动画制作的旋转风车，大家五一节日快乐

    ✅作者简介: 大家好五一快乐,我是痴心阿文,你们的学友哥,今天给大家分享一个CSS3动画制作的旋转风车!

  4. 用CSS3制作一个风车

    开发工具与关键技术:用CSS3制作一个风车 作者:李波 首先我的风车html如下: Css部分:需要给四个叶子的设置其对应的样式:首先是第一页的叶子如下图(这里展示第一个叶子的样式),为了突出效果我将 ...

  5. [css] 使用css3做一个魔方旋转的效果

    [css] 使用css3做一个魔方旋转的效果 总的来说,用了一些 3D 效果的样式,如 translate3d,rotate3d,perspective,transform-style: preser ...

  6. CSS3动画 - 地球 - 指南针旋转

    CSS3动画 - 地球 - 指南针旋转 工作之余,休息那一下,闲来无事,用CSS3属性animation做了两个插件: 指南针-地球 体质指数速查卡 1. 效果图 2. 部分代码如下: <!DO ...

  7. android仿优酷菜单,Android编程实现仿优酷旋转菜单效果(附demo源码)

    本文实例讲述了Android编程实现仿优酷旋转菜单效果.分享给大家供大家参考,具体如下: 首先,看下效果: 不好意思,不会制作动态图片,只好上传静态的了,如果谁会,请教教我吧. 首先,看下xml文件: ...

  8. 利用CSS3实现天气图标

    本文利用CSS3实现天气的图标,包括晴天,多云,雨天,下雪,打雷,采用了CSS3中的box-shadow,动画特效采用animation.其中主要采用box-shaow属性,感觉这个属性功能还挺强,详 ...

  9. logo自动旋转 html,CSS3创作有意思的旋转LOGO

    CSS3创作有意思的旋转LOGO Sponsor 在网页设计个哪里都能发挥创意,包括LOGO也是哦,前几天看到个tumblr的博客(staff.tumblr.com/)设计,觉得这个博客的logo挺有 ...

最新文章

  1. java随机产生字母排序_Java生成含字母和数字的6位随机字符串
  2. lacp可以在access接口吗_【基础】防火墙接口类型全介绍
  3. spring boot实现导出数据到excel
  4. C / C++ 软件项目的目录结构
  5. SAP Spartacus baseSite 出现在 OCC 请求 url 中
  6. python解压到指定文件夹_在Python中压缩和解压文件
  7. ubuntu 虚拟机上的 django 服务，在外部Windows系统上无法访问
  8. C++中关于指针入门的最好的文章
  9. 分布式文件系统（FastDFS+Tengine+fastdfs-nginx-module）
  10. Unity-Chan Toon Shader 2 介绍
  11. 黔程似锦——2021国庆游攻略
  12. python批量处理图片属性_python PIL 批量处理处理图片
  13. CPU保护模式 分页表 描述符 段选择子
  14. 外盘国际期货是否合法吗？为啥还有人做期货主账户？
  15. OA系统如何实现实时项目成本核算
  16. dlink交换机(DLINK交换机灯)
  17. 谷歌语言设置_如何设置您的Google主页以使用两种语言
  18. java 发送短信 多通道_一种Java卡多通道临时对象管理方法与流程
  19. Proxifier 代理方式上网
  20. 点击网页中正常链接结果跳转到天猫淘宝的页面

热门文章

  1. UI实用素材模板|app底部导航栏的图标可临摹素材，教你分析！
  2. java程序设计_Java程序设计--final（笔记）
  3. Go语言学习Day01
  4. linux内存布局和地址空间布局随机化（ASLR）下的可分配地址空间
  5. cgroups（7）— Linux中文手册页
  6. Abbreviated biography of Jon Claerbout
  7. .ps文件怎么打开_ps界面的认识及文件的打开
  8. flowjo软件使用方法_流式技术讲座流式分选技术、配色原则以及分析软件Flowjo的使用...
  9. python小课离线版_断网环境下利用pip安装Python离线安装包
  10. Hadoop（一）基础概念