<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. 小白如何进入IOS，答案就在这里

    ***对于进来看过我博客的博友们,请看一下最后面的几道题,觉得可以的可以自己私下做一下,有不懂的我们可以相互交流*** 现在我来说一下我们IOS需要的基础,现在用的比较多的就是swift语言. 首先, ...

  2. 循序渐进Python3（十二） --2--  web框架之django简单实现oracle数据库操作

    在 Django 中构建 Oracle 数据库支持的 Web 应用程序 了解如何配置 Django 以便与 Oracle 数据库交互,并使用 ORM 进行数据库连接.             产能在软 ...

  3. centos 6.5 msyql5.6安装

    MySQL 安装 安装mysql前需要查询系统中含有的有关mysql的软件. rpm -qa | grep -i mysql   如下 代表有mysql ,则先进行卸载 mysql-libs-5.1. ...

  4. spring mvc 4.3.2 + mybatis 3.4.1 + mysql 5.7.14 +shiro 幼儿园收费系统 之 登录

    如标题,用spring mvc 4.3.2+mybatis 3.4.1 + mysql 5.7.14 +shiro 开发了一个用于幼儿园的管理系统. 功能模块 包括 账号,角色,权限管理. 幼儿档案管 ...

  5. linux在home目录下使用ls命令卡死

    linux在home目录下使用ls命令卡死,原因可能是mount的某个服务器挂掉或出啥问题了,这个时候umount掉就正常了,如果umount提示device is busy,这时可以使用强制卸载   ...

  6. 【css3】浏览器内核及其兼容性

    浏览器内核分类如下: 1.Webkit内核: 使用此引擎内核的浏览器有:Safari(包括移动版和桌面版).Chrome.其私有属性的前缀是-webkit-. 2.Gecko内核: 使用此引擎内核的浏 ...

  7. mysql分表和表分区详解

    为什么要分表和分区? 日常开发中我们经常会遇到大表的情况,所谓的大表是指存储了百万级乃至千万级条记录的表.这样的表过于庞大,导致数据库在查询和插入的时候耗时太长,性能低下,如果涉及联合查询的情况,性能 ...

  8. VLC嵌入网页，终于要成功了！

    <OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" width="640" heig ...

  9. 各大浏览器 CSS3 和 HTML5 兼容速查表

    不知不觉中,支持 CSS3 和 HTML5 的浏览器变得越来越多,甚至包括最新版的 IE,当然,所谓支持仅仅是部分支持,因为 CSS3 和 HTML5 的W3C 规范都尚未形成.如果你现在就希望使用 ...

  10. centos 常见软件安装

    centos虚拟机扩展硬盘空间 http://www.cnblogs.com/sixiweb/p/3360008.html http://blog.csdn.net/remote_roamer/art ...