<style>

    .box{width:400px;height:400px;margin:100px auto;transition:1s;}

     .box div{width:180px;height:180px;margin:10px;border:1px solid red;

         background:deeppink;box-sizing:border-box;float:left;text-align:center;

         line-height:180px;}

     .box div:nth-of-type(),.box div:nth-of-type(){border-radius:0px 100px;}

     .box div:nth-of-type(),.box div:nth-of-type(){border-radius:100px 0px;}

     .box:hover{-webkit-transform:rotate(800deg);}

    </style>

</head>

<body>

    <div class="box">

        <div>我</div>

        <div>要</div>

        <div>努</div>

        <div>力</div>

    </div>

</body>
通过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. maven 的使用

    下载Maven:http://maven.apache.org/ 解压 将解压目录的bin 子目录配置到 PATH中 4) 在命令行下运行 mvn -version  或者 mvn -v  来测试是否 ...

  2. 关于jQuery中环境配置中的问题

    一开始无法显示出效果,配置和代码如 这代码本没有错 但是就是无法显示 原因是我下载了2.x版本的jQuery,jQuery2.x版本是不支持IE6/7/8的,也有很多主流的浏览器无法显示出效果,于是在 ...

  3. ubuntu Unity Tweak Tool

    Unity Tweak Tool first install main program if do not run,so,second run : sudo apt-get install unity ...

  4. bootstrap datetimerange

    天用的了bootstrap日期插件感觉搜索的资料不是很多在此写下一些使用的心得: 插件开源地址:daterangepicker日期控件, 插件使用只要按照开源中的文档信息来就好先包括以下引用: < ...

  5. Oracle 命令行导出表

    exp userid=帐号/密码 tables=(TOWN,YIZHI,一带一路企业) file=C:\Users\casm\Desktop\3tabs.dmp

  6. StaticPagedList

    估计是因为水平原因,之前看别人写的用pagedList分页,老是云里雾里的.下面把自己写的整理一下放在上面.这里的List为对应页面展示的内容.不用查询所有. Action: public Actio ...

  7. Ubuntu如何更新源

    Ubuntu的源其实就是更新各种软件包需要用到镜像网站, 当大家在虚拟机上安装Linux镜像的时候肯定会遇到各种Linux软件没有安装,当你用apt-get安装的时候它会提示无效的网址,这个时候你就需 ...

  8. SQL语句中=null和is null

    平时经常会遇到这两种写法:IS NOT NULL与!=NULL.也经常会遇到数据库有符合条件!=NULL的数据,但是返回为空集合.实际上,是由于对二者使用区别理解不透彻. 默认情况下,推荐使用 IS ...

  9. 微信公众账号第三方平台全网发布源码（java）- 实战测试通过

    第一部分:微信第三方平台配置

  10. hdu 1026（Ignatius and the Princess I）BFS

    Ignatius and the Princess I Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (J ...