http://www.oschina.net/code/snippet_2671046_55494
css文件
@charset "utf-8";
.loading{background:url(http://hovertree.com/texiao/css3/9/images/fcbg.png);width:320px;height:500px;margin:auto;position:relative;margin-top:200px;z-index:2}
.pic{
background:url(http://hovertree.com/texiao/css3/9/images/fc.png);position:absolute;z-index:1;right:60px;width:427px;height:430px;top:-170px;
-webkit-animation:load 2s linear 1s infinite;
-moz-animation:load 2s linear 1s infinite;
-ms-animation:load 2s linear 1s infinite;
-o-animation:load 2s linear 1s infinite;
animation:load 2s linear 1s infinite;
}
.fcc{background:url(http://hovertree.com/texiao/css3/9/images/fcc.png);position:absolute;z-index:3;right:230px;width:90px;height:97px;top:0}
@-webkit-keyframes load{
0%{
transform: rotate(0);
-ms-transform: rotate(0); /* IE 9 */
-webkit-transform: rotate(0); /* Safari and Chrome */
-o-transform: rotate(0); /* Opera */
-moz-transform: rotate(0); /* Firefox */
}
100%{
transform: rotate(360deg);
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Safari and Chrome */
-o-transform: rotate(360deg); /* Opera */
-moz-transform: rotate(360deg); /* Firefox */
}
}
<!DOCTYPE html>
<html>
<head>
<!-- 效果:http://hovertree.com/texiao/css3/9/ -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3转动的大风车 - 何问起</title><base target="_blank" />
<link href="http://hovertree.com/texiao/css3/9/hovertreefc/hovertreedfc.css" rel="stylesheet" type="text/css" />
<style>a{color:blue;}</style>
</head>
<body>
<div class="loading">
<div class="pic"></div>
<div class="fcc"></div>
</div>
<div><a href="http://hovertree.com/h/bjaf/h9tb5itb.htm">原文</a> <a href="http://hovertree.com/">首页</a> <a href="http://hovertree.com/texiao/">特效</a></div>
</body>
</html>
分享到:
相关推荐
css3实现旋转风车动画特效是一款基于CSS3实现的转动的大风车特效下载。
纯css3 3D旋转科技球体动画特效 纯css3 3D旋转科技球体动画特效
css3风车动画,旋转风车,简单的风车特效。
网页动画素材 css3属性绘制圆形旋转的黑洞动画特效(抖音资料)网页动画素材 css3属性绘制圆形旋转的黑洞动画特效(抖音资料)网页动画素材 css3属性绘制圆形旋转的黑洞动画特效(抖音资料)网页动画素材 css3属性...
代码简介:CSS3旋转动画地球周转特效是一款3D效果的旋转变形特效下载。
css3实现的旋转风车动画特效源码.zip
css3彗星星旋转动画特效
纯CSS3山村风车动画特效是一款基于css3绘制的黑夜里小村庄风车动画场景。
css3旋转的环形菜单动画特效 css3旋转的环形菜单动画特效
HTML5CSS3实现大风车旋转动画效果源码下载
纯CSS3表情图片旋转动画特效是一款可爱的卡通表情旋转动画效果代码。
Css3 Simple Rotary Windmill Animation Special Effects
纯CSS3彩色旋转加载动画特效是一款实用的网页加载动画特效下载。
这次我们要来分享一款很酷的HTML5动画,是一个可以旋转的大风车动画效果,回顾一下利用HTML5实现的旋转动画,我们可以看HTML5/CSS3实现3D旋转陀螺动画,它们的实现都是利用CSS3的transform:rotate属性,这款大风车...
纯css3实现简单的旋转风车动画特效源码.zip
css3实现旋转风车动画特效是一款基于CSS3实现的转动的大风车特效下载。
这是一款纯CSS3绘制的3D立体正方形旋转动画效果,多个CSS3正方体同时旋转动画特效。
CSS3风水罗盘旋转动画特效是一款乾坤八卦罗盘旋转CSS3动画特效下载。