CSS3 新年动画贺卡 电子贺卡动画效果-html5特效

效果图

项目完成下载地址:
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 参数。

©️2020 CSDN 皮肤主题: 黑客帝国 设计师: 上身试试 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值