css3 风车旋转

    <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(1),.box div:nth-of-type(4){border-radius:0px 100px;}
     .box div:nth-of-type(2),.box div:nth-of-type(3){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;可以设置播放的速度
时间: 2024-10-26 08:31:00

css3 风车旋转的相关文章

css3制作旋转立方体相册

css3制作旋转立方体相册 首先让我们来看一下最终效果图: 当鼠标放在图片上是介个样子滴: 是不是觉得很好看?那接下来就一起制作吧! 我个人觉得编程,首先是思路,然后是代码,一起分析一下这个效果的思路. 1.背景颜色,它属于一种渐变的背景色(当然这不是重点,可以根据自己的爱好进行设置): 2.我们可以观察一下他是有两个旋转的立方体,大立方体套小立方体: 3.点击图片的时候,外部大立方体向外延伸. 有了这个大体的思路我们就可以开始敲代码了. 1.新建文件夹 将各个不同类型的代码进行归类是很有必要的

css3立体旋转菜单

css3立体旋转菜单,css3,3D,立体旋转,立体菜单,菜单导航,css3立体旋转菜单是一款纯css3实现的三维立体旋转导航菜单. 源码下载页:http://www.huiyi8.com/sc/7127.html css3立体旋转菜单,布布扣,bubuko.com

CSS3放大旋转

CSS3放大旋转实例: <!DOCTYPE html> <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>CSS3放大旋转</title> <style> .a{ transition:All 0.4s ease-in-out; -webkit-tra

CSS3绘制旋转的太极图案

1.效果布局主要用了用了3个DIV,配合:before.:after利用css3中的圆角(border-radius).阴影(box-shadow)完成. 2.动画效果CSS3中的@keyframes.animation <!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS3绘制旋转的太极图案</title> <style> bo

CSS3实现旋转的太极图(二):只用1个DIV

效果预览: PS: 1.昨天用3个DIV实现了太极图(点击查看),,今天试着用1个Div来做. 2.公司刚忙过双10周年庆,最近空闲下来,闲着也是闲着,总得写点东西吧. 3.高手莫喷,小弟仅仅是没事折腾一下,做个的记录. 4.有网友反应旋转的时候会卡. 5.IE浏览器,出门左拐.走好不送 ~~~ 实现步骤: HTML: <div class="box-taiji"></div> 步骤一: .box-taiji {width:0;height:400px;posi

css3 3d旋转图片立方体特效代码

一.什么是css3 3d旋转 ? 形成一个3D空间: transform-style:preserve-3d    ( 让父元素形成3D,让其子元素在3D空间进行变化 ). 3d场景,在垂直于屏幕的方法,相对于3d多出个z轴,Z轴:靠近屏幕的方向是正向,远离屏幕的方向是反向,2d场景,在屏幕上水平和垂直的交叉线x轴和y轴. 二.关于css 3d旋转的相关属性及使用方法 变形属性:transform 3D功能函数 ----3D的位移:transform:translate3d(x,y,z);   

css3+javascript旋转的3d盒子

今天写点css3,3d属性写的3d盒子,结合javascript让盒子随鼠标旋转起来 今天带了css3新属性3d <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #a{ width: 200px; height: 200px; margin: 20

css3立体旋转动画

demo地址 效果图 在别人网站上看到一个立体旋转的例子,然后突然想到自己前几天学习的css3旋转,就试着做了一个例子,看起来有一些粗糙. html结构很简单: <div> <ul class="ani"> <li class="r1">1</li> <li class="r2">2</li> <li class="r3">3</li&g

CSS3——3D旋转图(跑马灯效果图)

CSS3新增了很多新的属性,可以用很少的代码实现炫酷的动画效果,但由于兼容性各浏览器的能力存在不足,有特别需求的网站就呵呵啦.H5C3已是大势所趋了,之前看过一个新闻,Chrome将在年底全面转向H5,抛弃了Flash.. 本案例主要使用了CSS3中的变换transform和动画animation属性,实现了跑马灯效果,详细的解释在代码中的注释中. 做好布局之后的效果图 添加了animation样式,实现自动旋转,并且鼠标移入,停止动画.(鼠标移入,绕Z轴旋转90度) 代码: 1 <!DOCTY