<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. hdu5834

    题目让求得是从任意一点出发可以不回来得到的最大的价值 这应该不算特别水的树形dp了,它不止要从上往下dfs,后来海要重新dfs,根据父亲节点更新儿子节点,算是正常的树形dp中比较简单的吧. 思路: 先 ...

  2. MFC窗口乱弹问题

    操作过程将子窗口放到主窗口的OnInitDialog函数和OnPaint函数中调用,在本机没有异常,放到其他机器上发现子窗口莫名其妙的被调用,跟踪发现主窗口这两个函数不止调用一次,中间会因为其他如按钮 ...

  3. Odoo Web Service API

    来自 Odoo Web服务暴露出相关的服务,路由分别是 /xmlrpc/ /xmlrpc/2/ /jsonrpc 根据 services 调用 后端对应服务的 方法method [定义 openerp ...

  4. Direct2D相关

    1,如何绘制文本 2,文本格式设置和布局

  5. PowerDesigner 16.5 反向PostgreSQL9.01 中 Unable to list the columns. SQLSTATE = 22003不良的类型值 short : t 解决方法

    Database➙Edit Current DBMS… General tab➙PostgreSQL 9.x➙Script➙Objects➙Column➙SqlListQuery or Tools➙R ...

  6. LDAP客户端

    LDAP客户端通过与服务端关联起来,就可以使用服务端的系统账号登录系统,通过useradd 添加用户是在ldap里是没有显示的,ldap添加用户,在/etc/passwd里也是没有显示的,ldap添加 ...

  7. 升级到macos sierra xcode8 requires additional components to support runing and debugging choose Install to add required components

    升级到macos sierra xcode8 报提示:requires additional components to support runing and debugging choose Ins ...

  8. C#中常用的几种读取XML文件的方法

    1.C#中常用的几种读取XML文件的方法:http://blog.csdn.net/tiemufeng1122/article/details/6723764/

  9. form表单里如果只存在一个文本框，enter键提交

    在这里说一说浏览器里form表单的默认行为 我们都知道浏览器是存在很多默认行为的,可能是出于常用行为考虑又或者是历史原因.但有时候我们不需要这些默认行为.以下: 1).当form表单里只存在一个inp ...

  10. android studio serialversionuid设置