经验分享程序开发文档资料数据资源其它资源

animation.css实现动画旋转特效css代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 animation.css实现动画旋转特效css代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

animation.css实现动画旋转特效css代码

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>animation.css实现动画旋转特效</title>
<link rel="stylesheet" href="css/index.css" />
<link rel="stylesheet" href="css/animation.css">
</head>
<body>
<div class="wrap">
    <div class="mod_bg">
    		<div class="bg1"></div>
    		<div class="bg2"></div>
    		<div class="bg3">
    			<div class="bg3_1"></div>
    			<div class="bg3_2"></div>
    			<div class="bg3_3"></div>
    		</div>
    		<div class="bg4"></div>
    </div>
    <div class="main" id="J_main">
    		<div class="mod_info1">
    			<div class="mod_info1__flash mod_info1__f"></div>
    			<div class="mod_info1__flash1 mod_info1__f"></div>
    			<div class="mod_info1__flash2 mod_info1__f"></div>
    			<div class="mod_info1__flash3 mod_info1__f"></div>
    			<div class="mod_info1__logo1 mod_info1__logoall"></div>
    			<div class="mod_info1__logo2 mod_info1__logoall"></div>
    			<div class="mod_info1__logo3 mod_info1__logoall"></div>
    		</div>
    </div>
</div>
<script type="text/javascript">
	$('.mod_info2__power3').on('mouseover',function(e){
		$('.mod_info2__power3').addClass('play');
	});
	$('.mod_info2__power3').on('mouseout',function(e){
		$('.mod_info2__power3').removeClass('play');
	});
	$('.mod_info2__power1').on('mouseover',function(e){
		$('.mod_info2__power1').addClass('play');
	});
	$('.mod_info2__power1').on('mouseout',function(e){
		$('.mod_info2__power1').removeClass('play');
	});
	$('.mod_info2__power2').on('mouseover',function(e){
		$('.mod_info2__power2').addClass('play');
	});
	$('.mod_info2__power2').on('mouseout',function(e){
		$('.mod_info2__power2').removeClass('play');
	});
	$('.mod_info2__power4').on('mouseover',function(e){
		$('.mod_info2__power4').addClass('play');
	});
	$('.mod_info2__power4').on('mouseout',function(e){
		$('.mod_info2__power4').removeClass('play');
	});

    // setTimeout(function() {
    //     $('.mod_info2__power3').addClass('play');
    //     $('.mod_info2__power1').addClass('play');
    //     $('.mod_info2__power2').addClass('play');
    //     $('.mod_info2__power4').addClass('play');
    // },1000);

    // setTimeout(function() {
    //     $('.mod_info2__power3').removeClass('play');
    //     $('.mod_info2__power1').removeClass('play');
    //     $('.mod_info2__power2').removeClass('play');
    //     $('.mod_info2__power4').removeClass('play');
    // },4000);
</script>
</body>
</html>

CSS代码(animation.css):

@charset "utf-8";@keyframes myfirst{from{transform:rotate(0);-ms-transform:rotate(0);-webkit-transform:rotate(0);-o-transform:rotate(0);-moz-transform:rotate(0)}
to{transform:rotate(360deg);-ms-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);-moz-transform:rotate(360deg)}
}
@-moz-keyframes myfirst{from{transform:rotate(0);-ms-transform:rotate(0);-webkit-transform:rotate(0);-o-transform:rotate(0);-moz-transform:rotate(0)}
to{transform:rotate(360deg);-ms-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);-moz-transform:rotate(360deg)}
}
@-webkit-keyframes myfirst{from{transform:rotate(0);-ms-transform:rotate(0);-webkit-transform:rotate(0);-o-transform:rotate(0);-moz-transform:rotate(0)}
to{transform:rotate(360deg);-ms-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);-moz-transform:rotate(360deg)}
}
@-o-keyframes myfirst{from{transform:rotate(0);-ms-transform:rotate(0);-webkit-transform:rotate(0);-o-transform:rotate(0);-moz-transform:rotate(0)}
to{transform:rotate(360deg);-ms-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);-moz-transform:rotate(360deg)}
}
.mod_info1__logo1{animation:myfirst 8s linear infinite;-moz-animation:myfirst 8s linear infinite;-webkit-animation:myfirst 8s linear infinite;-o-animation:myfirst 8s linear infinite}
@keyframes myfirst2{from{transform:rotate(360deg);-ms-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);-moz-transform:rotate(360deg)}
to{transform:rotate(0);-ms-transform:rotate(0);-webkit-transform:rotate(0);-o-transform:rotate(0);-moz-transform:rotate(0)}
}
@-moz-keyframes myfirst2{from{transform:rotate(360deg);-ms-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);-moz-transform:rotate(360deg)}
to{transform:rotate(0);-ms-transform:rotate(0);-webkit-transform:rotate(0);-o-transform:rotate(0);-moz-transform:rotate(0)}
}
@-webkit-keyframes myfirst2{from{transform:rotate(360deg);-ms-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);-moz-transform:rotate(360deg)}
to{transform:rotate(0);-ms-transform:rotate(0);-webkit-transform:rotate(0);-o-transform:rotate(0);-moz-transform:rotate(0)}
}
@-o-keyframes myfirst2{from{transform:rotate(360deg);-ms-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);-moz-transform:rotate(360deg)}
to{transform:rotate(0);-ms-transform:rotate(0);-webkit-transform:rotate(0);-o-transform:rotate(0);-moz-transform:rotate(0)}
}
.mod_info1__logo2{animation:myfirst2 6s linear infinite;-moz-animation:myfirst2 6s linear infinite;-webkit-animation:myfirst2 6s linear infinite;-o-animation:myfirst2 6s linear infinite}
@keyframes myfirst3{from{transform:translateY(18px);-ms-transform:translateY(18px);-webkit-transform:translateY(18px);-o-transform:translateY(18px);-moz-transform:translateY(18px)}
to{transform:translateY(0);-ms-transform:translateY(0);-webkit-transform:translateY(0);-o-transform:translateY(0);-moz-transform:translateY(0)}
}
@-moz-keyframes myfirst3{from{transform:translateY(18px);-ms-transform:translateY(18px);-webkit-transform:translateY(18px);-o-transform:translateY(18px);-moz-transform:translateY(18px)}
to{transform:translateY(0);-ms-transform:translateY(0);-webkit-transform:translateY(0);-o-transform:translateY(0);-moz-transform:translateY(0)}
}
@-webkit-keyframes myfirst3{from{transform:translateY(18px);-ms-transform:translateY(18px);-webkit-transform:translateY(18px);-o-transform:translateY(18px);-moz-transform:translateY(18px)}
to{transform:translateY(0);-ms-transform:translateY(0);-webkit-transform:translateY(0);-o-transform:translateY(0);-moz-transform:translateY(0)}
}
@-o-keyframes myfirst3{from{transform:translateY(18px);-ms-transform:translateY(18px);-webkit-transform:translateY(18px);-o-transform:translateY(18px);-moz-transform:translateY(18px)}
to{transform:translateY(0);-ms-transform:translateY(0);-webkit-transform:translateY(0);-o-transform:translateY(0);-moz-transform:translateY(0)}
}
.mod_info1__f{animation:flash 5s .2s ease-in-out infinite both;-webkit-animation:flash 5s .2s ease-in-out infinite both;-moz-animation:flash 5s .2s ease-in-out infinite both}
.mod_info1__flash{animation:flash 5s 1.5s ease-in-out infinite both;-webkit-animation:flash 5s 1.5s ease-in-out infinite both;-moz-animation:flash 5s 1.5s ease-in-out infinite both}
.mod_info1__flash1{animation:flash 5s .8s ease-in-out infinite both;-webkit-animation:flash 5s .8s ease-in-out infinite both;-moz-animation:flash 5s .8s ease-in-out infinite both}
.mod_info2__jt{animation:_rotateOutDownLeft 1.3s linear infinite;-moz-animation:_rotateOutDownLeft .8s linear infinite;-webkit-animation:_rotateOutDownLeft 1.3s linear infinite;-o-animation:_rotateOutDownLeft .8s linear infinite}
.mod_info2__jt1{animation:_rotateOutDownLeft 1.8s linear infinite;-moz-animation:_rotateOutDownLeft 1.8s linear infinite;-webkit-animation:_rotateOutDownLeft 1.3s linear infinite;-o-animation:_rotateOutDownLeft 1.8s linear infinite}
.play .ani_1_1{animation:flash 1s .2s ease both;-webkit-animation:flash 1s .2s ease both;-moz-animation:flash 1s .2s ease both}
.play .ani_3{animation:fadeOutUp 1s .2s ease infinite both;-webkit-animation:fadeOutUp 1s .2s ease infinite both;-moz-animation:fadeOutUp 1s .2s ease infinite both}
.play .ani_3_2{animation:flash 2s .2s ease infinite both;-webkit-animation:flash 2s .2s ease infinite both;-moz-animation:flash 2s .2s ease infinite both}
.play .ani_2_1{animation:bounceOutUp 1s .2s ease none;-webkit-animation:bounceOutUp 1s .2s ease none;-moz-animation:bounceOutUp 1s .2s ease none}
.play .ani_2{animation:fadeOutDown 1s .2s ease none;-webkit-animation:fadeOutDown 1s .2s ease none;-moz-animation:fadeOutDown 1s .2s ease none}
.play .ani_4_1{animation:rotateOutDownLeft 1s .2s ease none;-webkit-animation:rotateOutDownLeft 1s .2s ease none;-moz-animation:rotateOutDownLeft 1s .2s ease none}
@keyframes fadeOutUp{0%{opacity:1;-ms-transform:translateY(0);-webkit-transform:translateY(0)}
100%{opacity:0;-ms-transform:translateY(-20px);-webkit-transform:translateY(-20px)}
}
@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0)}
100%{opacity:0;-webkit-transform:translateY(-20px)}
}
@-moz-keyframes fadeOutUp{0%{opacity:1;-moz-transform:translateY(0)}
100%{opacity:0;-moz-transform:translateY(-20px)}
}
@keyframes flash{0%,100%,50%{opacity:1}
25%,75%{opacity:0}
}
@-webkit-keyframes flash{0%,100%,50%{opacity:1}
25%,75%{opacity:0}
}
@-moz-keyframes flash{0%,100%,50%{opacity:1}
25%,75%{opacity:0}
}
@keyframes rotateIn{0%{-ms-transform-origin:center center;-ms-transform:rotate(-200deg);-webkit-transform-origin:center center;-webkit-transform:rotate(-200deg);opacity:0}
100%{-ms-transform-origin:center center;-ms-transform:rotate(0);-webkit-transform-origin:center center;-webkit-transform:rotate(0);opacity:1}
}
@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center center;-webkit-transform:rotate(-200deg);opacity:0}
100%{-webkit-transform-origin:center center;-webkit-transform:rotate(0);opacity:1}
}
@-moz-keyframes rotateIn{0%{-moz-transform-origin:center center;-moz-transform:rotate(-200deg);opacity:0}
100%{-moz-transform-origin:center center;-moz-transform:rotate(0);opacity:1}
}
@keyframes bounceOutUp{0%{-ms-transform:translateY(0);-webkit-transform:translateY(0)}
20%{opacity:1;-ms-transform:translateY(20px);-webkit-transform:translateY(20px)}
100%{opacity:0;-ms-transform:translateY(-2000px);-webkit-transform:translateY(-2000px)}
}
@-webkit-keyframes bounceOutUp{0%{-webkit-transform:translateY(0)}
20%{opacity:1;-webkit-transform:translateY(20px)}
100%{opacity:0;-webkit-transform:translateY(-2000px)}
}
@-moz-keyframes bounceOutUp{0%{-moz-transform:translateY(0)}
20%{opacity:1;-moz-transform:translateY(20px)}
100%{opacity:0;-moz-transform:translateY(-2000px)}
}
@keyframes fadeOutDown{0%{opacity:1;-ms-transform:translateY(0);-webkit-transform:translateY(0)}
100%{opacity:0;-ms-transform:translateY(20px);-webkit-transform:translateY(20px)}
}
@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0)}
100%{opacity:0;-webkit-transform:translateY(20px)}
}
@-moz-keyframes fadeOutDown{0%{opacity:1;-moz-transform:translateY(0)}
100%{opacity:0;-moz-transform:translateY(20px)}
}
@-webkit-keyframes rotateOutDownLeft{0%{opacity:1;-webkit-transform:translateY(0)}
100%{opacity:0;-webkit-transform:translateY(-40px)}
}
@-moz-keyframes rotateOutDownLeft{0%{opacity:1;-moz-transform:translateY(0)}
100%{opacity:0;-moz-transform:translateY(-40px)}
}
@keyframes rotateOutDownLeft{0%{opacity:1;-ms-transform:translateY(0);-webkit-transform:translateY(0)}
100%{opacity:0;-ms-transform:translateY(-40px);-webkit-transform:translateY(-40px)}
}
@-webkit-keyframes _rotateOutDownLeft{0%{opacity:0;-webkit-transform:translateY(0)}
100%{opacity:1;-webkit-transform:translateY(-60px)}
}
@keyframes _rotateOutDownLeft{0%{opacity:0;-webkit-transform:translateY(0);-ms-transform:translateY(0)}
100%{opacity:1;-webkit-transform:translateY(-60px);-ms-transform:translateY(-60px)}
}
/* |xGv00|31fae3f36794f4352a83e5ce40bae766 */

CSS代码(index.css):

@charset "utf-8";blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,lengend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
body,button,input,select,textarea,th{font-size:12px;line-height:1.5;font-family:"hiragino sans gb",Tahoma,Helvetica,Arial}
h1,h2,h3,h4,h5,h6{font-size:100%}
li{list-style:none}
img{border:none;-ms-interpolation-mode:bicubic}
input[type=button],input[type=submit]{cursor:pointer}
button{cursor:pointer}
table{border-collapse:collapse;border-spacing:0}
a{text-decoration:none}
a:hover{text-decoration:underline}
.frame_top,.mod_footer,.wrap{min-width:1000px;background-color:#12343f}
.mod_footer a,.mod_footer p{color:#eee}
.wrap{position:relative;width:100%;overflow:hidden}
.mod_bg{position:absolute;left:0;top:0;width:100%}
.main{position:relative;z-index:10;width:1000px;margin:0 auto}
.mod_bg .bg1{background:#0a2631 url(img/bg1.jpg) no-repeat center 0;height:536px}
.mod_bg .bg2{background:#173b45 url(img/bg2.jpg) no-repeat center 0;height:575px}
.mod_bg .bg3{height:516px;position:relative}
.mod_bg .bg3_1{height:52px;background-color:#173b45}
.mod_bg .bg3_2{height:464px;background-color:#082631}
.mod_bg .bg3_3{height:100%;width:100%;background:url(img/bg3.jpg) no-repeat center 0;top:0;right:0;position:absolute}
.mod_bg .bg4{background:#082631 url(img/bg4.jpg) no-repeat center 0;height:1080px}
.mod_info1{height:536px;position:relative}
.mod_info1__logoall{height:348px;width:345px;position:absolute;top:0;right:32px}
.mod_info1__logo1{background-image:url(sprite/ani.png);background-position:0 0;_background-image:url(img/logo_1ie.png)}
.mod_info1__logo2{background-image:url(sprite/ani.png);background-position:-347px 0;_background-image:url(img/logo_2ie.png)}
.mod_info1__logo3{background-image:url(sprite/ani.png);background-position:-694px 0;_background-image:url(img/logo_3ie.png)}
.mod_info1__f{position:absolute;width:34px;height:34px;background:url(img/flash.png);_display:none}
.mod_info1__flash{bottom:163px;left:130px}
.mod_info1__flash1{bottom:92px;right:79px}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
178.86 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
178.86 KB
立即下载
区静澜希
了解
打赏作者 鼓励作者
Html 动画效果4
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章