<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. Oracle游标--cursor_01-简单不带参数实现功能

    对于游标这个概念,可以理解为类似我们以前学习的jdbc的结果集对象, 我们可以使用游标对结果集从上到下进行遍历,获取每一行内容 首先我们要分析一下游标的分类 带参数的 书写函数的整体架构 定义游标 开 ...

  2. CentOS 7 安装php开发环境

    安装服务 : yum install httpd httpd-devel  service httpd start 启动     安装mariadb : yum -y install mariadb* ...

  3. Jquery / js 判断数据类型方法（限制文本框类型输入）

    当想要判断文本框中的值是否为自己想要的类型时,可以通过一些方法作出判断,这里对于光标离开文本框时判断文本框中输入的是否是数值类型,如果不是,做出提示 $("#WORKYEARS") ...

  4. 数据库一些常用的SQL语句

    1.多表连接查询: 假设现在有三个表,One,Two,Three: One表字段:Code(主键),Name Two表字段:Birthday,T_code(One表Code的外键) Three表字段: ...

  5. 史航416第11次作业&总结

    作业1:冒泡排序 #include <stdio.h> ],int n); int main() { ],n,i; printf("输入一个整数n:"); scanf( ...

  6. android 设置状态栏与标题背景颜色一致

    必须在Android4.4以上版本才能设置状态栏颜色: 一.在单个Activity里面,设置状态栏的背景: 效果: 1.在Activity的布局根文件中添加属性: android:fitsSystem ...

  7. MySQL root密码找回

    以MySQL多实例为例,演示找回MySQL root的密码 1.关闭mysql服务 [root@mysql ~]# mysqladmin -uroot -poldboy123 -S /data/330 ...

  8. SWT布局管理器

    一.充满式布局管理器(FillLayout类) FillLayout类是最简单的布局类,它把组件摆放成一行或者一列,并强制组件大小一致.一般,组件的高度与最高的组件一致,宽度与最宽的组件相同.,它里面 ...

  9. 定义/修改列时 NULL

    mysql的文档说明: column_definition:     col_name type [NOT NULL | NULL] [DEFAULT default_value]         [ ...

  10. 转载 --ios 模型-setValuesForKeysWithDictionary

    应用场景:app请求后端数据,返回的数据是JSON形式,如: { "is_favor" = 0; "is_follow" = 0; "is_prais ...