css3旋转的大风车动画特效
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> 相关推荐
Ladyseven 2020-10-22
mapaler 2020-07-17
云端漂移 2020-07-17
淡风wisdon大大 2020-06-27
lanzhusiyu 2020-06-21
AlisaClass 2020-06-05
jiedinghui 2020-06-04
usepython 2020-05-31
flycony 2020-05-30
88284453 2020-05-09
hqulyc 2020-05-05
yaodilu 2020-04-30
冰蝶 2020-04-20
vavid 2020-04-20
AlisaClass 2020-04-11
ELEMENTS爱乐小超 2020-04-07
lcyangcss 2020-03-28