1.     <style>
  2.     .box{width:400px;height:400px;margin:100px auto;transition:1s;}
  3.      .box div{width:180px;height:180px;margin:10px;border:1px solid red;
  4.          background:deeppink;box-sizing:border-box;float:left;text-align:center;
  5.          line-height:180px;}
  6.      .box div:nth-of-type(),.box div:nth-of-type(){border-radius:0px 100px;}
  7.      .box div:nth-of-type(),.box div:nth-of-type(){border-radius:100px 0px;}
  8.      .box:hover{-webkit-transform:rotate(800deg);}
  9.     </style>
  10. </head>
  11. <body>
  12.     <div class="box">
  13.         <div>我</div>
  14.         <div>要</div>
  15.         <div>努</div>
  16.         <div>力</div>
  17.     </div>
  18. </body>
  1. 通过transition:1s;可以设置播放的速度

css3 风车旋转的更多相关文章

  1. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

  2. 纯css3实现旋转的太极图

    效果图: 代码如下: <!DOCTYPE html> <html> <head lang="zh"> <meta charset=&quo ...

  3. CSS3实现旋转的太极图（二）：只用1个DIV

    效果预览:   PS: 1.昨天用3个DIV实现了太极图(点击查看),,今天试着用1个Div来做. 2.公司刚忙过双10周年庆,最近空闲下来,闲着也是闲着,总得写点东西吧. 3.高手莫喷,小弟仅仅是没 ...

  4. CSS3绘制旋转的太极图案（一）

        实现步骤: 基础HTML: <div class="box-taiji"> <div class="circle-01">< ...

  5. 用css3制作旋转加载动画的几种方法

    以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...

  6. 【Demo】CSS3元素旋转、缩放、移动或倾斜

    CSS3元素旋转.缩放.移动或倾斜 代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  7. CSS3制作旋转导航

    慕课网学习CSS3时,遇到个习题,觉得有必要总结学习下:CSS3制作旋转导航 慕课网习题地址:http://www.imooc.com/code/1883 示例及源码地址:http://codepen ...

  8. css3立体旋转菜单

    css3立体旋转菜单,css3,3D,立体旋转,立体菜单,菜单导航,css3立体旋转菜单是一款纯css3实现的三维立体旋转导航菜单. 源码下载页:http://www.huiyi8.com/sc/71 ...

  9. 【微信支付】分享一个失败的案例 跨域405(Method Not Allowed)问题 关于IM的一些思考与实践 基于WebSocketSharp 的IM 简单实现 【css3】旋转倒计时 【Html5】-- 塔台管制 H5情景意识 --飞机 谈谈转行

    [微信支付]分享一个失败的案例 2018-06-04 08:24 by stoneniqiu, 2744 阅读, 29 评论, 收藏, 编辑 这个项目是去年做的,开始客户还在推广,几个月后发现服务器已 ...

随机推荐

  1. WinForm添加快捷键

    1.    WinForm下给窗体和按钮添加快捷键 设置Enter键要执行的动作:设置FORM的 AcceptButton属性为指定的button按钮. 设置ESC键要执行的动作:设置FORM的Cac ...

  2. javascript篇-----函数apply()和call()

    转自:http://www.jb51.net/article/28013.htm 如果没接触过动态语言,以编译型语言的思维方式去理解javaScript将会有种神奇而怪异的感觉,因为意识上往往不可能的 ...

  3. CSS预编译器配置-------LESS Sass Stylus webstorm

    预编译器配置说明 开头语,发挥CSS预处器的作用是一种很有挑战性的事情.CSS预处器有不同的语言,就有不同的语法和功能. 语法 在使用CSS预处器之前最重要的是对语法的理解,幸运的是,这三种CSS预处 ...

  4. Java 字符串拼接 五种方法的性能比较分析 从执行100次到90万次

    [请尊重原创版权,如需引用,请注明来源及地址] > 字符串拼接一般使用“+”,但是“+”不能满足大批量数据的处理,Java中有以下五种方法处理字符串拼接,各有优缺点,程序开发应选择合适的方法实现 ...

  5. C#实现JSON序列化与反序列化

    1.使用 JavaScriptSerializer类实现序列化 namespace: System.Web.Script.Serialization eg: // 序列化 private string ...

  6. C3属性的轮播图（持续更新）

    天气好冷,都不想写代码.就先写个没有焦点的轮播图,过两天在补全. 用的是CSS3的属性 过渡transition 和 转换 transfrom:translateX() 只做了轮播和 鼠标进入停止轮播 ...

  7. jquery取框架当前的url

    前提,当前frame无名或动态生成的: var url = eval($("#ifr1").attr("name")+".location.href; ...

  8. with try catch 作用域的问题

    with({}){}和try{}catch(e){}会临时改变代码执行的作用域, var foo="abc"; with({foo:"d"}){ functio ...

  9. HTTP 协议缓存

    http 缓存分为客户端缓存和服务端缓存 1. 客户端缓存 客户端缓存指的是浏览器缓存, 浏览器缓存是最快的缓存, 因为它直接从本地获取(但有可能需要发送一个请求), 它的优势是可以减少网络流量, 加 ...

  10. MVC5+EF6 简易版CMS（非接口） 第四章：使用业务层方法，以及关联表解决方案

    目录 简易版CMS后台管理系统开发流程 MVC5+EF6 简易版CMS(非接口) 第一章:新建项目 MVC5+EF6 简易版CMS(非接口) 第二章:建数据模型 MVC5+EF6 简易版CMS(非接口 ...