<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. C# 串口操作系列(3) -- 协议篇，二进制协议数据解析

    原文地址:http://blog.csdn.net/wuyazhe/article/details/5627253 我们的串口程序,除了通用的,进行串口监听收发的简单工具,大多都和下位机有关,这就需要 ...

  2. 在gitlab上setup CI

    安装gitlab runner docker pull gitlab/gitlab-runner 启动gitlab runner docker run -d --name gitlab-runner ...

  3. spring mvc学习笔记二：@RequestMapping

    @RequestMapping RequestMapping是一个用来处理请求地址映射的注解,可用于类或方法上.用于类上,表示类中的所有响应请求的方法都是以该地址作为父路径. @RequestMapp ...

  4. urllib.urlretrieve的用法

    urllib.urlretrieve(url, local, cbk) urllib.urlretrieve(p,'photo/%s.jpg'%p.split('/')[-4]) url要下载的网站 ...

  5. docker 数据卷 权限

    1,在运行容器的时候,给容器加特权: 示例:docker run -i -t --privileged=true -v /home/docs:/src waterchestnut/nodejs:0.1 ...

  6. jquery实现淡入淡出

    fade方法包括四个: (1)fadeIn(speed,callback):淡入的方法,speed代表淡入的速度,可以是slow,fast,毫秒,不填等 例如: $(document).ready(f ...

  7. Observer（观察者）-对象行为型模式

    1.意图 定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新. 2.别名 依赖(Depenents),发布-订阅(Publish-subscribe ...

  8. Struts框架——（三）动态ActionForm

    一.DynaActionForm的引入意义 使用ActionForm把表单数据单独封装起来,而且提供了自动的数据验证,简化了代码的编写,给我们带来了极大的方便. 但是,ActionForm也存在一些明 ...

  9. NPOI简单应用

    打开或创建文件 fs = new FileStream(fileName, FileMode.OpenOrCreate, FileAccess.ReadWrite); 不同版本的workbook if ...

  10. 什么时候用Model，什么时候用Entity？[转载知乎-备忘]

    在建立一个实体类的时候,究竟是用Model还是用Entity?比如MVC中,Model存了数据实体,但是他被称为Model,而在EF中,Entity也是存放数据实体,却被称作Entity,这两者有何区 ...