项目完成下载地址：
https://download.csdn.net/download/kingrome2017/10411712
移动端性能优化几点建议
简化结构层标签
少用图片，用CSS3 完成动画效果
用原生js 代替jQuery 等前端框架
注意几点
项目中关于音乐播放暂停动画用到–animationPlayState
但是目前兼容性不太好，建议考虑其他方案，一般在项目开发中兼容低版本设备很重要。
关于页面渲染
<meta http-equiv="X-UA-Compatible" content="ie=edge, chrome=1">老生常谈的问题，为的是页面渲染统一性，强制采用谷歌内核，对于ie采用最高模式渲染。
<!DOCTYPE html>
<html lang="Zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge, chrome=1">
<meta name="format-detection" content="telephone=no">
<title>春节贺卡</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="music">
<img src="images/music_pointer.png">
<img src="images/music_disc.png" class="play" id="music">
</div>
<div class="page" id="page1">
<div class="bg"></div>
<div class="p1_lantern">点击屏幕
<br>开启好运2018</div>
<div class="p1_imooc"></div>
<div class="p1_words">2018年新年特献</div>
</div>
<div class="page" id="page2">
<div class="bg "></div>
<div class="bg"></div>
<div class="p2_circle"></div>
<div class="p2_2016"></div>
</div>
<div class="page" id="page3">
<div class="bg"></div>
<div class="p3_logo"></div>
<div class="p3_title"></div>
<div class="p3_second"></div>
<div class="p3_first"></div>
<div class="p3_blessing"></div>
</div>
<audio autoplay="true">
<source src="audio/When You're Gone-Avril Lavigne.mp3" type="audio/mpeg">
</audio>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>//加载完页面才执行
window.onload = () => {
const page1 = document.getElementById('page1');
const page2 = document.getElementById('page2');
const page3 = document.getElementById('page3');
const music = document.getElementById('music');
const audio = document.getElementsByTagName('audio')[0];
audio.addEventListener('ended', () => {
music.style.animationPlayState="paused";
music.style.webkitAnimationPlayState="paused";
});
music.addEventListener('touchstart', () => {
if(audio.paused){
audio.play();
music.style.animationPlayState="running";
music.style.webkitAnimationPlayState="running";
}else{
audio.pause();
music.style.animationPlayState="paused";
music.style.webkitAnimationPlayState="paused";
}
},false);
page1.addEventListener('touchstart', () => {
page1.style.display = 'none';
page2.style.display = 'block';
page3.style.display = 'block';
page3.style.top = '100%';
setTimeout(() => {
page2.setAttribute('class','page fadeOut');
page3.setAttribute('class','page fadeIn');
},5500)
},false);
}* {
margin:0;
padding: 0;
border: none;
font-size: 1.5625vw;
font-family: "Microsoft Yahei";
}
html,
body{
height: 100%;
overflow: hidden;
}
.music{
position: fixed;
top: 3vh;
right: 4vw;
z-index: 5;
width: 15vw;
height: 15vw;
border: 4px solid #ef1639;
border-radius: 50%;
background: #fff;
}
.music > img:first-of-type{
position: absolute;
top: 24%;
right: 2.5%;
width: 28.421%;
z-index: 6;
}
.music > img:last-of-type{
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin:auto;
width: 79%;
}
.music > img.play{
-webkit-animation:music_disc 4s linear infinite;
animation:music_disc 4s linear infinite;
}
@-webkit-keyframes music_disc{
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes music_disc{
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.page{
position: absolute;
width: 100%;
height: 100%;
}
.page > .bg{
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
#page1{
display: block;
}
#page1 > .bg{
background: url('../images/p1_bg.jpg') no-repeat center center;
background-size: 100%;
}
#page1 > .p1_lantern{
position: absolute;
top: -3.4%;
right: 0;
left: 0;
margin:auto;
background: url('../images/p1_lantern.png') no-repeat center bottom;
background-size: 100%;
width: 45vw;
height: 71.2vh;
font-size: 3.506rem;
padding-top: 31vh;
color:#fff;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
}
#page1 > .p1_lantern:before{
position: absolute;
top:0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
content: "";
margin:auto;
width: 30vw;
height: 30vw;
background: #d60b3b;
opacity: .5;
border-radius: 50%;
-webkit-box-shadow: 0 0 10vw 10vw #d60b3b;
-ms-box-shadow: 0 0 10vw 10vw #d60b3b;
-o-box-shadow: 0 0 10vw 10vw #d60b3b;
box-shadow: 0 0 10vw 10vw #d60b3b;
-webkit-animation: p1_lantern .5s infinite alternate;
animation: p1_lantern .5s infinite alternate;
}
@-webkit-keyframes p1_lantern {
0% {
opacity: .5;
-webkit-transform: scale(.8,.8);
transform: scale(.8,.8);
}
100%{
opacity: 1;
}
}
@keyframes p1_lantern {
0% {
opacity: .5;
-webkit-transform: scale(.8,.8);
transform: scale(.8,.8);
}
100%{
opacity: 1;
}
}
#page1 > .p1_imooc{
position: absolute;
right: 0;
left: 0;
bottom: 9vh;
background: url('../images/p1_imooc.png') no-repeat center center;
background-size: 100%;
width: 27.656vw;
height: 18.63vh;
margin: auto;
}
#page1 > .p1_words{
font-size: 2.134rem;
position: absolute;
right: 0;
left: 0;
bottom: 48px;
text-align: center;
color: #231815;
}
#page2{
display: none;
-webkit-transition: .5s;
-o-transition: .5s;
transition: .5s;
}
#page2.fadeOut{
opacity: .3;
-webkit-transform: translate(0,-100%);
-ms-transform: translate(0,-100%);
transform: translate(0,-100%);
}
#page2 > .p2_bg_loading {
z-index: 4;
background: #ef1639;
-webkit-animation: loading 1s linear forwards;
animation: loading 1s linear forwards;
}
@-webkit-keyframes loading{
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes loading{
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#page2 > .bg{
background: url('../images/p2_bg.jpg') no-repeat center center;
background-size: 100%;
}
#page2 > .p2_circle{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin:auto;
background: url('../images/p2_circle_outer.png') no-repeat center center;
background-size: 100%;
width: 59.375vw;
height: 59.375vh;
-webkit-animation: outer 1s linear 3s infinite;
animation: outer 1s linear 3s infinite;
}
@-webkit-keyframes outer {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@keyframes outer {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
#page2 > .p2_circle:before{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin:auto;
content: "";
background: url('../images/p2_circle_middle.png') no-repeat center center;
background-size: 100%;
width: 45.625vw;
height: 45.625vh;
-webkit-animation: mid 1s linear 2s infinite;
animation: mid 1s linear 2s infinite;
}
@-webkit-keyframes mid {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(720deg);
transform: rotate(720deg);
}
}
@keyframes mid {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(720deg);
transform: rotate(720deg);
}
}
#page2 > .p2_circle:after{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin:auto;
content: "";
background: url('../images/p2_circle_inner.png') no-repeat center center;
background-size: 100%;
width: 39.9375vw;
height: 39.9375vh;
-webkit-animation: inner 1s linear 1s infinite;
animation: inner 1s linear 1s infinite;
}
@-webkit-keyframes inner {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-1080deg);
transform: rotate(-1080deg);
}
}
@keyframes inner {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-1080deg);
transform: rotate(-1080deg);
}
}
#page2 > .p2_2016{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin:auto;
background: url('../images/p2_2016.png') no-repeat center center;
background-size: 100%;
width: 27.59vw;
height: 6.24vh;
}
#page3{
display: none;
-webkit-transition: .5s;
-o-transition: .5s;
transition: .5s;
}
#page3.fadeIn{
opacity: 1;
-webkit-transform: translate(0,-100%);
-ms-transform: translate(0,-100%);
transform: translate(0,-100%);
}
#page3 > .bg{
background: url('../images/p3_bg.jpg') no-repeat center center;
background-size: 100%;
}
#page3 > .p3_logo {
width: 34.6875vw;
height: 6.327vh;
position: absolute;
top: 7.82vh;
right: 0;
left: 0;
margin:auto;
background: url('../images/p3_logo.png') no-repeat center center;
background-size: 100%;
}
#page3 > .p3_title {
width: 48.125vw;
height: 50vh;
position: absolute;
top:21vh;
right: 0;
left: 0;
margin:auto;
background: url('../images/p3_title.png') no-repeat center center;
background-size: 100%;
}
#page3 > .p3_second {
width: 22.8125vw;
height: 41.652vh;
position: absolute;
top:25.48vh;
left: 3.75vw;
background: url('../images/p3_couplet_second.png') no-repeat center center;
background-size: 100%;
-webkit-animation: first 1s linear infinite alternate;
animation: first 1s linear infinite alternate;
}
#page3 > .p3_first {
width: 22.8125vw;
height: 41.652vh;
position: absolute;
top:25.48vh;
right: 3.75vw;
background: url('../images/p3_couplet_first.png') no-repeat center center;
background-size: 100%;
-webkit-animation: first 1s linear infinite alternate;
animation: first 1s linear infinite alternate;
}
@-webkit-keyframes first {
0% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
100%{
}
}
@keyframes first {
0% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
100%{
}
}
#page3 > .p3_blessing {
width: 32vw;
height: 18vh;
position: absolute;
right: 0;
left: 0;
bottom: 10vh;
margin:auto;
background: url('../images/p3_blessing.png') no-repeat center center;
background-size: 100%;
border-radius: 50%;
-webkit-animation: blessing 2s linear infinite;
animation: blessing 2s linear infinite;
}
@-webkit-keyframes blessing {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes blessing {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}重点内容
关键的动画效果都在 style.css 文件，
关于旋转，分为两步，0%-100% 对应 0deg-360deg
以及 循环播放 反向等 animation 参数。
转载自原文链接, 如需删除请联系管理员。
原文链接：CSS3 新年动画贺卡 电子贺卡动画效果-html5特效，转载请注明来源！