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

CSS3实现蟠桃树蟠桃摇晃动画特效代码

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

以下是 CSS3实现蟠桃树蟠桃摇晃动画特效代码 的示例演示效果:

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

部分效果截图:

CSS3实现蟠桃树蟠桃摇晃动画特效代码

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <meta name="Copyright" content="Tencent" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>CSS3实现蟠桃树蟠桃摇晃动画特效</title>
    <link rel="stylesheet" type="text/css" media="screen" href="css/style.css">
</head>
<body>

    <div class="act_wrapper">
        <div class="act_content">
            <div class="mod_style_3">
                <span class="peach peach1 shake-leftright1" data-value="1"></span>
                <span class="peach peach2 shake-leftright2" data-value="2"></span>
                <span class="peach peach3 shake-leftright3" data-value="3"></span>
                <span class="peach peach4 shake-leftright4" data-value="4"></span>
                <span class="peach peach5 shake-leftright5" data-value="5"></span>
                <span class="peach peach6 shake-leftright6" data-value="6"></span>
            </div>
        </div>
        <div class="act_bg">
            <div class="bg_act_6"></div>
            <div class="bg_act_7"></div>
            <div class="bg_act_8"></div>
        </div>
    </div>
</body>
</html>

CSS代码(style.css):

@charset utf-8;.act_btn:hover span{left:-417px;cursor:pointer}
.act_btn:hover{*zoom:1}
.act_wrapper{*zoom:1;position:relative;z-index:1;min-width:1000px;margin:auto;overflow:hidden}
.act_wrapper .act_bg{position:absolute;left:50%;top:0;z-index:1;width:1920px;margin-left:-960px}
.act_wrapper .act_content{position:relative;z-index:2;width:1000px;height:1200px;margin:auto;margin-top:-569px}
.mod_copyright{position:absolute;left:50%;bottom:10px;z-index:3;width:1000px;margin-left:-500px}
.mod_copyright a,.mod_copyright p{color:#ffd0cf}
.bg_act_6{background:url(../img/bg_06.jpg) 50% 0 no-repeat;height:86px}
.bg_act_7{background:url(../img/bg_07.jpg) 50% 0 no-repeat;height:300px}
.bg_act_8{background:url(../img/bg_08.jpg) 50% 0 no-repeat;height:250px}
.mod_style_1{position:absolute;left:328px;top:1178px;width:378px;height:76px}
.mod_style_1 span{top:-000px}
.mod_style_1.done span{top:-210px}
.mod_style_2{position:absolute;left:390px;top:1573px;width:240px;height:78px}
.mod_style_2 span{top:-100px}
.mod_style_2.done span{top:-304px}
.done.act_btn:hover span{left:0;cursor:pointer}
.mod_style_3{position:absolute;top:716px;left:200px;width:870px;height:560px}
.peach{cursor:pointer;position:absolute;top:0;left:0;width:90px;height:100px;display:block;background:url(../img/peach.png) 0 0 no-repeat}
.peach1{background-position:0 0;top:105px;left:72px}
.peach2{background-position:0 -115px;top:44px;left:242px}
.peach3{background-position:0 -215x;top:73px;left:452px}
.peach4{background-position:0 -328x;top:158px;left:257px}
.peach5{background-position:0 -435x;top:259px;left:405px}
.peach6{background-position:0 -545x;top:250px;left:569px}
@-webkit-keyframes shake-leftright{0%{-webkit-transform:rotate(2deg);transform:rotate(2deg);-webkit-transform-origin:50% 0;transform-origin:50% 0}
20%{-webkit-transform:rotate(10deg);transform:rotate(10deg);-webkit-transform-origin:50% 0;transform-origin:50% 0}
40%{-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transform-origin:50% 0;transform-origin:50% 0}
60%{-webkit-transform:rotate(-2deg);transform:rotate(-2deg);-webkit-transform-origin:50% 0;transform-origin:50% 0}
80%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg);-webkit-transform-origin:50% 0;transform-origin:50% 0}
100%{-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transform-origin:50% 0;transform-origin:50% 0}
}
@keyframes shake-leftright{0%{-webkit-transform:rotate(2deg);transform:rotate(2deg);-webkit-transform-origin:50% 0;transform-origin:50% 0}
20%{-webkit-transform:rotate(10deg);transform:rotate(10deg);-webkit-transform-origin:50% 0;transform-origin:50% 0}
40%{-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transform-origin:50% 0;transform-origin:50% 0}
60%{-webkit-transform:rotate(-2deg);transform:rotate(-2deg);-webkit-transform-origin:50% 0;transform-origin:50% 0}
80%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg);-webkit-transform-origin:50% 0;transform-origin:50% 0}
100%{-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transform-origin:50% 0;transform-origin:50% 0}
}
.shake-leftright{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:shake-leftright;animation-name:shake-leftright;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}
.shake-leftright1{-webkit-animation-duration:2.5s;animation-duration:2.5s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:shake-leftright;animation-name:shake-leftright;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}
.shake-leftright2,.shake-leftright6{-webkit-animation-duration:3.5s;animation-duration:3.5s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:shake-leftright;animation-name:shake-leftright;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}
.shake-leftright3{-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:shake-leftright;animation-name:shake-leftright;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}
.shake-leftright4{-webkit-animation-duration:4s;animation-duration:4s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:shake-leftright;animation-name:shake-leftright;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}
.shake-leftright5{-webkit-animation-duration:3s;animation-duration:3s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:shake-leftright;animation-name:shake-leftright;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}
@-webkit-keyframes shake-little{2%{-webkit-transform:translate(1px,1px) rotate(0.5deg);transform:translate(1px,1px) rotate(0.5deg)}
4%{-webkit-transform:translate(1px,0px) rotate(0.5deg);transform:translate(1px,0px) rotate(0.5deg)}
6%{-webkit-transform:translate(1px,1px) rotate(0.5deg);transform:translate(1px,1px) rotate(0.5deg)}
8%{-webkit-transform:translate(1px,1px) rotate(0.5deg);transform:translate(1px,1px) rotate(0.5deg)}
10%{-webkit-transform:translate(1px,1px) rotate(0.5deg);transform:translate(1px,1px) rotate(0.5deg)}
12%{-webkit-transform:translate(0px,1px) rotate(0.5deg);transform:translate(0px,1px) rotate(0.5deg)}
14%{-webkit-transform:translate(0px,1px) rotate(0.5deg);transform:translate(0px,1px) rotate(0.5deg)}
16%{-webkit-transform:translate(0px,0px) rotate(0.5deg);transform:translate(0px,0px) rotate(0.5deg)}
18%{-webkit-transform:translate(1px,0px) rotate(0.5deg);transform:translate(1px,0px) rotate(0.5deg)}
20%{-webkit-transform:translate(0px,1px) rotate(0.5deg);transform:translate(0px,1px) rotate(0.5deg)}
22%{-webkit-transform:translate(0px,0px) rotate(0.5deg);transform:translate(0px,0px) rotate(0.5deg)}
24%{-webkit-transform:translate(1px,0px) rotate(0.5deg);transform:translate(1px,0px) rotate(0.5deg)}
26%{-webkit-transform:translate(1px,0px) rotate(0.5deg);transform:translate(1px,0px) rotate(0.5deg)}
28%{-webkit-transform:translate(0px,0px) rotate(0.5deg);transform:translate(0px,0px) rotate(0.5deg)}
30%{-webkit-transform:translate(0px,1px) rotate(0.5deg);transform:translate(0px,1px) rotate(0.5deg)}
32%{-webkit-transform:translate(1px,1px) rotate(0.5deg);transform:translate(1px,1px) rotate(0.5deg)}
34%{-webkit-transform:translate(0px,0px) rotate(0.5deg);transform:translate(0px,0px) rotate(0.5deg)}
36%{-webkit-transform:translate(1px,0px) rotate(0.5deg);transform:translate(1px,0px) rotate(0.5deg)}
38%{-webkit-transform:translate(1px,0px) rotate(0.5deg);transform:translate(1px,0px) rotate(0.5deg)}
40%{-webkit-transform:translate(0px,1px) rotate(0.5deg);transform:translate(0px,1px) rotate(0.5deg)}
42%{-webkit-transform:translate(1px,1px) rotate(0.5deg);transform:translate(1px,1px) rotate(0.5deg)}
44%{-webkit-transform:translate(1px,0px) rotate(0.5deg);transform:translate(1px,0px) rotate(0.5deg)}
46%{-webkit-transform:translate(1px,1px) rotate(0.5deg);transform:translate(1px,1px) rotate(0.5deg)}
48%{-webkit-transform:translate(1px,1px) rotate(0.5deg);transform:translate(1px,1px) rotate(0.5deg)}
50%{-webkit-transform:translate(0px,1px) rotate(0.5deg);transform:translate(0px,1px) rotate(0.5deg)}
52%{-webkit-transform:translate(0px,1px) rotate(0.5deg);transform:translate(0px,1px) rotate(0.5deg)}
54%{-webkit-transform:translate(0px,0px) rotate(0.5deg);transform:translate(0px,0px) rotate(0.5deg)}
56%{-webkit-transform:translate(1px,0px) rotate(0.5deg);transform:translate(1px,0px) rotate(0.5deg)}
58%{-webkit-transform:translate(0px,1px) rotate(0.5deg);transform:translate(0px,1px) rotate(0.5deg)}
60%{-webkit-transform:translate(1px,0px) rotate(0.5deg);transform:translate(1px,0px) rotate(0.5deg)}
62%{-webkit-transform:translate(0px,1px) rotate(0.5deg);transform:translate(0px,1px) rotate(0.5deg)}
64%{-webkit-transform:translate(1px,0px) rotate(0.5deg);transform:translate(1px,0px) rotate(0.5deg)}
66%{-webkit-transform:translate(1px,1px) rotate(0.5deg);transform:translate(1px,1px) rotate(0.5deg)}
68%{-webkit-transform:translate(1px,1px) rotate(0.5deg);transform:translate(1px,1px) rotate(0.5deg)}
70%{-webkit-transform:translate(0px,0px) rotate(0.5deg);transform:translate(0px,0px) rotate(0.5deg)}
72%{-webkit-transform:translate(0px,0px) rotate(0.5deg);transform:translate(0px,0px) rotate(0.5deg)}
74%{-webkit-transform:translate(1px,0px) rotate(0.5deg);transform:translate(1px,0px) rotate(0.5deg)}
76%{-webkit-transform:translate(1px,1px) rotate(0.5deg);transform:translate(1px,1px) rotate(0.5deg)}
78%{-webkit-transform:translate(0px,0px) rotate(0.5deg);transform:translate(0px,0px) rotate(0.5deg)}
80%{-webkit-transform:translate(1px,0px) rotate(0.5deg);transform:translate(1px,0px) rotate(0.5deg)}
82%{-webkit-transform:translate(0px,0px) rotate(0.5deg);transform:translate(0px,0px) rotate(0.5deg)}
84%{-webkit-transform:translate(1px,1px) rotate(0.5deg);transform:translate(1px,1px) rotate(0.5deg)}
86%{-webkit-transform:translate(1px,0px) rotate(0.5deg);transform:translate(1px,0px) rotate(0.5deg)}
88%{-webkit-transform:translate(0px,0px) rotate(0.5deg);transform:translate(0px,0px) rotate(0.5deg)}
90%{-webkit-transform:translate(1px,0px) rotate(0.5deg);transform:translate(1px,0px) rotate(0.5deg)}
92%{-webkit-transform:translate(0px,0px) rotate(0.5deg);transform:translate(0px,0px) rotate(0.5deg)}
94%{-webkit-transform:translate(0px,1px) rotate(0.5deg);transform:translate(0px,1px) rotate(0.5deg)}
96%{-webkit-transform:translate(0px,0px) rotate(0.5deg);transform:translate(0px,0px) rotate(0.5deg)}
98%{-webkit-transform:translate(0px,1px) rotate(0.5deg);transform:translate(0px,1px) rotate(0.5deg)}
0%,100%{-webkit-transform:translate(0,0) rotate(0);transform:translate(0,0) rotate(0)}
}
@keyframes shake-little{2%{-webkit-transform:translate(1px,1px) rotate(0.5deg);transform:translate(1px,1px) rotate(0.5deg)}
4%{-webkit-transform:translate(1px,0px) rotate(0.5deg);transform:translate(1px,0px) rotate(0.5deg)}
6%{-webkit-transform:translate(1px,1px) rotate(0.5deg);transform:translate(1px,1px) rotate(0.5deg)}
8%{-webkit-transform:translate(1px,1px) rotate(0.5deg);transform:translate(1px,1px) rotate(0.5deg)}
10%{-webkit-transform:translate(1px,1px) rotate(0.5deg);transform:translate(1px,1px) rotate(0.5deg)}
12%{-webkit-transform:translate(0px,1px) rotate(0.5deg);transform:translate(0px,1px) rotate(0.5deg)}
14%{-webkit-transform:translate(0px,1px) rotate(0.5deg);transform:translate(0px,1px) rotate(0.5deg)}
16%{-webkit-transform:translate(0px,0px) rotate(0.5deg);transform:translate(0px,0px) rotate(0.5deg)}
18%{-webkit-transform:translate(1px,0px) rotate(0.5deg);transform:translate(1px,0px) rotate(0.5deg)}
20%{-webkit-transform:translate(0px,1px) rotate(0.5deg);transform:translate(0px,1px) rotate(0.5deg)}
22%{-webkit-transform:translate(0px,0px) rotate(0.5deg);transform:translate(0px,0px) rotate(0.5deg)}
24%{-webkit-transform:translate(1px,0px) rotate(0.5deg);transform:translate(1px,0px) rotate(0.5deg)}
26%{-webkit-transform:translate(1px,0px) rotate(0.5deg);transform:translate(1px,0px) rotate(0.5deg)}
28%{-webkit-transform:translate(0px,0px) rotate(0.5deg);transform:translate(0px,0px) rotate(0.5deg)}
30%{-webkit-transform:translate(0px,1px) rotate(0.5deg);transform:translate(0px,1px) rotate(0.5deg)}
32%{-webkit-transform:translate(1px,1px) rotate(0.5deg);transform:translate(1px,1px) rotate(0.5deg)}
34%{-webkit-transform:translate(0px,0px) rotate(0.5deg);transform:translate(0px,0px) rotate(0.5deg)}
36%{-webkit-transform:translate(1px,0px) rotate(0.5deg);transform:translate(1px,0px) rotate(0.5deg)}
38%{-webkit-transform:translate(1px,0px) rotate(0.5deg);transform:translate(1px,0px) rotate(0.5deg)}
40%{-webkit-transform:translate(0px,1px) rotate(0.5deg);transform:translate(0px,1px) rotate(0.5deg)}
42%{-webkit-transform:translate(1px,1px) rotate(0.5deg);transform:translate(1px,1px) rotate(0.5deg)}
44%{-webkit-transform:translate(1px,0px) rotate(0.5deg);transform:translate(1px,0px) rotate(0.5deg)}
46%{-webkit-transform:translate(1px,1px) rotate(0.5deg);transform:translate(1px,1px) rotate(0.5deg)}
48%{-webkit-transform:translate(1px,1px) rotate(0.5deg);transform:translate(1px,1px) rotate(0.5deg)}
50%{-webkit-transform:translate(0px,1px) rotate(0.5deg);transform:translate(0px,1px) rotate(0.5deg)}
52%{-webkit-transform:translate(0px,1px) rotate(0.5deg);transform:translate(0px,1px) rotate(0.5deg)}
54%{-webkit-transform:translate(0px,0px) rotate(0.5deg);transform:translate(0px,0px) rotate(0.5deg)}
56%{-webkit-transform:translate(1px,0px) rotate(0.5deg);transform:translate(1px,0px) rotate(0.5deg)}
58%{-webkit-transform:translate(0px,1px) rotate(0.5deg);transform:translate(0px,1px) rotate(0.5deg)}
60%{-webkit-transform:translate(1px,0px) rotate(0.5deg);transform:translate(1px,0px) rotate(0.5deg)}
62%{-webkit-transform:translate(0px,1px) rotate(0.5deg);transform:translate(0px,1px) rotate(0.5deg)}
64%{-webkit-transform:translate(1px,0px) rotate(0.5deg);transform:translate(1px,0px) rotate(0.5deg)}
66%{-webkit-transform:translate(1px,1px) rotate(0.5deg);transform:translate(1px,1px) rotate(0.5deg)}
68%{-webkit-transform:translate(1px,1px) rotate(0.5deg);transform:translate(1px,1px) rotate(0.5deg)}
70%{-webkit-transform:translate(0px,0px) rotate(0.5deg);transform:translate(0px,0px) rotate(0.5deg)}
72%{-webkit-transform:translate(0px,0px) rotate(0.5deg);transform:translate(0px,0px) rotate(0.5deg)}
74%{-webkit-transform:translate(1px,0px) rotate(0.5deg);transform:translate(1px,0px) rotate(0.5deg)}
76%{-webkit-transform:translate(1px,1px) rotate(0.5deg);transform:translate(1px,1px) rotate(0.5deg)}
78%{-webkit-transform:translate(0px,0px) rotate(0.5deg);transform:translate(0px,0px) rotate(0.5deg)}
80%{-webkit-transform:translate(1px,0px) rotate(0.5deg);transform:translate(1px,0px) rotate(0.5deg)}
82%{-webkit-transform:translate(0px,0px) rotate(0.5deg);transform:translate(0px,0px) rotate(0.5deg)}
84%{-webkit-transform:translate(1px,1px) rotate(0.5deg);transform:translate(1px,1px) rotate(0.5deg)}
86%{-webkit-transform:translate(1px,0px) rotate(0.5deg);transform:translate(1px,0px) rotate(0.5deg)}
88%{-webkit-transform:translate(0px,0px) rotate(0.5deg);transform:translate(0px,0px) rotate(0.5deg)}
90%{-webkit-transform:translate(1px,0px) rotate(0.5deg);transform:translate(1px,0px) rotate(0.5deg)}
92%{-webkit-transform:translate(0px,0px) rotate(0.5deg);transform:translate(0px,0px) rotate(0.5deg)}
94%{-webkit-transform:translate(0px,1px) rotate(0.5deg);transform:translate(0px,1px) rotate(0.5deg)}
96%{-webkit-transform:translate(0px,0px) rotate(0.5deg);transform:translate(0px,0px) rotate(0.5deg)}
98%{-webkit-transform:translate(0px,1px) rotate(0.5deg);transform:translate(0px,1px) rotate(0.5deg)}
0%,100%{-webkit-transform:translate(0,0) rotate(0);transform:translate(0,0) rotate(0)}
}
.shake-little{-webkit-animation-duration:300ms;animation-duration:300ms;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-name:shake-little;animation-name:shake-little;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}
.flash-drop{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-name:flash-drop;animation-name:flash-drop;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}
.flash-pick{-webkit-animation-name:shake-little,flash-drop,flash-hide;animation-name:shake-little,flash-drop,flash-hide;-webkit-animation-duration:300ms,0.5s,0.2s;animation-duration:300ms,0.5s,0.2s;-webkit-animation-delay:0s,300ms,0.8s;animation-delay:0s,300ms,0.8s;-webkit-animation-timing-function:ease-in-out,ease-in-out,linear;animation-timing-function:ease-in-out,ease-in-out,linear;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}
.flash-pick-short{-webkit-animation-name:shake-little,flash-drop-short,flash-hide;animation-name:shake-little,flash-drop-short,flash-hide;-webkit-animation-duration:300ms,0.5s,0.2s;animation-duration:300ms,0.5s,0.2s;-webkit-animation-delay:0s,300ms,0.8s;animation-delay:0s,300ms,0.8s;-webkit-animation-timing-function:ease-in-out,ease-in-out,linear;animation-timing-function:ease-in-out,ease-in-out,linear;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}
.flash-pick-last{-webkit-animation-name:shake-little,flash-drop-last,flash-hide;animation-name:shake-little,flash-drop-last,flash-hide;-webkit-animation-duration:300ms,0.3s,0.2s;animation-duration:300ms,0.3s,0.2s;-webkit-animation-delay:0s,300ms,0.8s;animation-delay:0s,300ms,0.8s;-webkit-animation-timing-function:ease-in-out,ease-in-out,linear;animation-timing-function:ease-in-out,ease-in-out,linear;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}
@-webkit-keyframes flash-hide{0%{opacity:1}
100%{opacity:0}
}
@keyframes flash-hide{0%{opacity:1}
100%{opacity:0}
}
@-webkit-keyframes flash-drop{0%{-webkit-transform:translate(1px,1px) rotate(0.5deg);transform:translate(1px,1px) rotate(0.5deg)}
20%{-webkit-transform:translate(2px,20px) rotate(60deg);transform:translate(2px,20px) rotate(60deg)}
40%{-webkit-transform:translate(3px,50px) rotate(70deg);transform:translate(3px,50px) rotate(70deg)}
60%{-webkit-transform:translate(5px,100px) rotate(80deg);transform:translate(5px,100px) rotate(80deg)}
80%{-webkit-transform:translate(5px,180px) rotate(100deg);transform:translate(5px,180px) rotate(100deg)}
90%{-webkit-transform:translate(5px,280px) rotate(105deg);transform:translate(5px,280px) rotate(105deg)}
100%{-webkit-transform:translate(5px,320px) rotate(110deg);transform:translate(5px,320px) rotate(110deg)}
}
@keyframes flash-drop{0%{-webkit-transform:translate(1px,1px) rotate(0.5deg);transform:translate(1px,1px) rotate(0.5deg)}
20%{-webkit-transform:translate(2px,20px) rotate(60deg);transform:translate(2px,20px) rotate(60deg)}
40%{-webkit-transform:translate(3px,50px) rotate(70deg);transform:translate(3px,50px) rotate(70deg)}
60%{-webkit-transform:translate(5px,100px) rotate(80deg);transform:translate(5px,100px) rotate(80deg)}
80%{-webkit-transform:translate(5px,180px) rotate(100deg);transform:translate(5px,180px) rotate(100deg)}
90%{-webkit-transform:translate(5px,280px) rotate(105deg);transform:translate(5px,280px) rotate(105deg)}
100%{-webkit-transform:translate(5px,320px) rotate(110deg);transform:translate(5px,320px) rotate(110deg)}
}
@-webkit-keyframes flash-drop-short{0%{-webkit-transform:translate(1px,1px) rotate(0.5deg);transform:translate(1px,1px) rotate(0.5deg)}
20%{-webkit-transform:translate(2px,20px) rotate(60deg);transform:translate(2px,20px) rotate(60deg)}
40%{-webkit-transform:translate(3px,60px) rotate(70deg);transform:translate(3px,60px) rotate(70deg)}
60%{-webkit-transform:translate(5px,120px) rotate(80deg);transform:translate(5px,120px) rotate(80deg)}
100%{-webkit-transform:translate(5px,200px) rotate(110deg);transform:translate(5px,200px) rotate(110deg)}
}
@keyframes flash-drop-short{0%{-webkit-transform:translate(1px,1px) rotate(0.5deg);transform:translate(1px,1px) rotate(0.5deg)}
20%{-webkit-transform:translate(2px,20px) rotate(60deg);transform:translate(2px,20px) rotate(60deg)}
40%{-webkit-transform:translate(3px,60px) rotate(70deg);transform:translate(3px,60px) rotate(70deg)}
60%{-webkit-transform:translate(5px,120px) rotate(80deg);transform:translate(5px,120px) rotate(80deg)}
100%{-webkit-transform:translate(5px,200px) rotate(110deg);transform:translate(5px,200px) rotate(110deg)}
}
@-webkit-keyframes flash-drop-last{0%{-webkit-transform:translate(1px,1px) rotate(0.5deg);transform:translate(1px,1px) rotate(0.5deg)}
20%{-webkit-transform:translate(2px,20px) rotate(60deg);transform:translate(2px,20px) rotate(60deg)}
40%{-webkit-transform:translate(3px,30px) rotate(70deg);transform:translate(3px,30px) rotate(70deg)}
60%{-webkit-transform:translate(5px,50px) rotate(80deg);transform:translate(5px,50px) rotate(80deg)}
100%{-webkit-transform:translate(5px,130px) rotate(100deg);transform:translate(5px,130px) rotate(100deg)}
}
@keyframes flash-drop-last{0%{-webkit-transform:translate(1px,1px) rotate(0.5deg);transform:translate(1px,1px) rotate(0.5deg)}
20%{-webkit-transform:translate(2px,20px) rotate(60deg);transform:translate(2px,20px) rotate(60deg)}
40%{-webkit-transform:translate(3px,30px) rotate(70deg);transform:translate(3px,30px) rotate(70deg)}
60%{-webkit-transform:translate(5px,50px) rotate(80deg);transform:translate(5px,50px) rotate(80deg)}
100%{-webkit-transform:translate(5px,130px) rotate(100deg);transform:translate(5px,130px) rotate(100deg)}
}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
130.01 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
130.01 KB
立即下载
汤琴卿澜
了解
打赏作者 鼓励作者
Html 动画效果4
最新结算
HTM5 Canvas实现3D飞机飞行动画特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
HTM5 Canvas实现3D飞机飞行动画特效代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery图像缩放工具插件Zoomer特效代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery图像缩放工具插件Zoomer特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
Labelauty–jQuery单选框_复选框美化插件特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
Labelauty–jQuery单选框_复选框美化插件特效代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery网页版打砖块小游戏源码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery网页版打砖块小游戏源码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章