页面下滑指引的小箭头
<div class="next_guide_icon"><img src="/Images/ting/float_top_icon.png"></div>
/*小箭头上下移动*/
@keyframes guide_icon {
0% {
transform: translateY(0);
}
25% {
transform: translateY(3px);
}
50% {
transform: translateY(6px);
}
75% {
transform: translateY(3px);
}
100% {
transform: translateY(0);
}
}
.next_guide_icon {
-webkit-animation: guide_icon 1s linear infinite;
animation: guide_icon 1s linear infinite;
}
文字淡入效果
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.first_text {
opacity: 0; /*事先规定文字的状态是不显示的*/
animation: fade-in 2s ease 0s 1; /*调用名称为fade-in的动画,全程动画显示时间4S,进入方式为ease,延时0S进入,播放次数1次*/
-webkit-animation: fade-in 2s ease 0s 1;
/*规定动画的最后状态为结束状态*/
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
文字从右侧飞入效果
@keyframes righteaseinAnimate {
0% {
-webkit-transform: translateX(2000px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0px);
opacity: 1;
}
}
/音乐图标转圈圈/
<div class="musicBg musicBg_on" style="display: block;"><img src="/Images/ting/bgm_open_icon.png"></div>
@keyframes rotate {
0% {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
}
}
.musicBg_on {
-webkit-animation: rotate 10s infinite linear;
-o-animation: rotate 10s infinite linear;
animation: rotate 10s infinite linear;
}
/下雪/
<div>//放置当前页面的背景图(树木图片)
<div class="snow" style="height: 667px;">//放置雪花背景图(雪花图片)
//这里是当前页面的内容
</div>
</div>
@keyframes snow {
0% {
background-position: 0 0, 0 0;
}
100% {
background-position: 500px 1000px, 500px 500px;
}
}
.snow {
background: url('https://static.frdic.com/web/ting/year_snow_imgg.png');//有雪花的透明背景图
-webkit-animation: snow 30s linear infinite;
animation: snow 30s linear infinite;
background-size:cover;
}
/星星一闪一闪/
<div class="star_animate star_animate1" style="height: 667px;"></div>
<div class="star_animate star_animate2" style="height: 667px;"></div>
@keyframes fade-star {
0% {
opacity: 0.2;
}
50% {
opacity:1;
}
100% {
opacity: 0.2;
}
}
@keyframes fade-end {
0% {
opacity: 0.9;
}
50% {
opacity: 0.2;
}
100% {
opacity: 1;
}
}
//两张透明的有星星的背景图,两张图的星星位置是不一样的,达到一闪一隐
.star_animate1 {
background: url('https://static.frdic.com/web/ting/year_summer_yellow_img.png');
animation: fade-star 3s ease 0s infinite;
-webkit-animation: fade-star 3s ease 0s infinite;
}
.star_animate2 {
opacity: 0;
background: url('https://static.frdic.com/web/ting/year_summer_yellow_double.png');
animation: fade-end 3s ease 3s infinite;
-webkit-animation: fade-end 3s ease 3s infinite;
}
.star_animate {
width:100%;
background-size: cover;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
float: left;
position: absolute;
top: 0;
left: 0;
}
/*秋风落叶从树上慢慢飘下
<span class="sheets sheet_1" style="display: block;"></span>
<span class="sheets sheet_2" style="display: block;"></span>
@keyframes leaf {
0% {
opacity:0;
top: 180px;
transform: rotateZ(80deg) translate(0px,0px);
}
20% {
opacity: 1;
transform: rotateZ(80deg) translate(20px,20px);
}
40% {
transform: rotateZ(-20deg) translate(20px,30px);
}
60% {
transform: rotateZ(-30deg) translate(25px,60px);
}
80% {
top: 400px;
transform: rotateZ(-10deg) translate(30px,80px);
opacity: 1;
}
100% {
top: 500px;
transform: rotateZ(50deg) translate(80px,100px);
opacity: 0;
}
}
.sheets {
display: block;
position: absolute;
top: 13%;
}
//落叶1
.sheet_1 {
left: 50%;
width: 72px;
height: 60px;
background: url("https://static.frdic.com/web/ting/year_leaf.png") no-repeat;
background-size: contain;
background-size: 50% 50%;
-webkit-animation: leaf 5s ease-in 1;
animation: leaf 5s linear 1;
animation-delay: 1s;
/*animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;*/
}
//落叶2
.sheet_2 {
right: 50px;
width: 72px;
height: 60px;
background: url("https://static.frdic.com/web/ting/year_leaf_double.png") no-repeat;
background-size: contain;
background-size: 50% 50%;
-webkit-animation: leaf 5s ease-in 1;
animation: leaf 5s linear 1;
animation-delay: 2s;
/*animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;*/
}