html css齿轮滚动特效,CSS_纯CSS3实现滚动的齿轮动画效果，纯CSS写的齿轮效果。支持chrome

齿轮

html,body{margin:0;padding:0;width:100%;}

#wrap{margin:0;padding:150px;}

.post{width:100px;height:100px;background:#0099ff;border-radius:200px;display:block;position:relative;}

.post span{width:126px;height:16px;display:inline-block;background:#0099ff;position:absolute;top:42px;left:-13px;border-radius:5px;}

.s1{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);}

.s2{-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);}

.s3{-webkit-transform:rotate(60deg);-moz-transform:rotate(60deg);}

.s4{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);}

.s5{-webkit-transform:rotate(120deg);-moz-transform:rotate(120deg);}

.s6{-webkit-transform:rotate(150deg);-moz-transform:rotate(150deg);}

.y1{width:60px;height:60px;left:80px;top:0px;}

.y1 span{width:88px;height:8px;display:inline-block;background:#0099ff;position:absolute;top:26px;left:-14px;border-radius:8px;}

.y0{-webkit-animation-name:slide1;-webkit-animation-duration:10s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-moz-animation-name:slide1;-moz-animation-duration:10s;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear;}

@-webkit-keyframes slide1{

0%{-webkit-transform:rotate(0deg);}

50%{-webkit-transform:rotate(180deg);}

100%{-webkit-transform:rotate(360deg);}

}

@-moz-keyframes slide1{

0%{-moz-transform:rotate(0deg);}

50%{-moz-transform:rotate(180deg);}

100%{-moz-transform:rotate(360deg);}

}

.y1{-webkit-animation-name:slide2;-webkit-animation-duration:10s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-moz-animation-name:slide2;-moz-animation-duration:10s;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear;}

@-webkit-keyframes slide2{

0%{-webkit-transform:rotate(0deg);}

50%{-webkit-transform:rotate(-180deg);}

100%{-webkit-transform:rotate(-360deg);}

}

@-moz-keyframes slide2{

0%{-moz-transform:rotate(0deg);}

50%{-moz-transform:rotate(-180deg);}

100%{-moz-transform:rotate(-360deg);}

}

提示：您可以先修改部分代码再运行

html css齿轮滚动特效,CSS_纯CSS3实现滚动的齿轮动画效果，纯CSS写的齿轮效果。支持chrome - phpStudy...相关推荐

html舞动特效,7款纯CSS3实现的炫酷动画应用
原标题:7款纯CSS3实现的炫酷动画应用 HTML5确实非常强大,我们之前也分享过很多基于HTML5 Canvas的动画特效.但是你是否知道我们可以利用纯CSS制作一些很酷的动画效果?对,CSS3可以 ...
一款纯css3实现的超炫动画背画特效
之前为大家介绍了很多款由纯css3实现的特效.今天要再给大家带来一款纯css3实现的超炫动画背画特效.代码非常简单,没有引用任何其它js代码.css代码也不多.效果非常炫.一起看下效果图: 在线预览 ...
汉堡式折叠html,纯CSS3菜单汉堡包按钮变形动画特效
这是一款非常有趣的纯CSS3菜单汉堡包按钮变形动画特效.该特效共有9种不同的按钮变形动画效果,这些效果都是使用CSS3帧动画完成的,效果非常的酷. 制作方法 HTML结构该按钮变形动画使用嵌套的H ...
纯CSS3炫酷3D星空动画特效
效果: 源码: <!DOCTYPE html> <html lang="zh"> <head><meta charset="UT ...
纯CSS3海底泡泡多角鱼动画js特效
下载地址纯CSS3海底泡泡多角鱼动画特效是一款纯css3绘制卡通的海底水气泡和多角鱼群动画特效. dd:
css3蒙版运动,纯CSS3制作逼真的汽车运动动画
简要教程这是一款使用纯CSS3制作的逼真汽车运动动画特效.该特效中,所有元素都是通过CSS渲染得到的,没有使用任何图片.它通过公路斑马线的左右晃动来制作出汽车运动的视觉效果. 使用方法 HTML结构 ...
html 鼠标图标做成动画效果,纯css3实现的鼠标悬停动画按钮
今天给大家带来一款纯css3实现的鼠标悬停动画按钮.这款按钮鼠标经过前以正方形的形式,当鼠标经过的时候以动画的形式变成圆形.效果图如下: 实现的代码. html代码: 复制代码代码如下: css3代 ...
纯CSS3 制作交通信号灯红绿灯动画效果
纯CSS3 制作交通信号灯红绿灯动画效果 HTML: <div class="light"><div class="red"></ ...
纯CSS3卡通模型飞机飞行动画
下载地址纯CSS3卡通模型飞机飞行动画是一款逼真的塞斯纳飞机天空飞行动画特效. dd:
纯css3实现的鼠标悬停动画按钮
今天给大家带来一款纯css3实现的鼠标悬停动画按钮.这款按钮鼠标经过前以正方形的形式,当鼠标经过的时候以动画的形式变成圆形.效果图如下: 在线预览源码下载实现的代码. html代码: < ...

html css齿轮滚动特效,CSS_纯CSS3实现滚动的齿轮动画效果，纯CSS写的齿轮效果。支持chrome - phpStudy...

html css齿轮滚动特效,CSS_纯CSS3实现滚动的齿轮动画效果，纯CSS写的齿轮效果。支持chrome - phpStudy...相关推荐

最新文章

热门文章