CSS3 animation 演习_玖富娱乐主管发布


玖富娱乐是一家为代理招商,直属主管信息发布为主的资讯网站,同时也兼顾玖富娱乐代理注册登录地址。

css3 的动画让 html 页面变得生气勃勃,然则怎样用好动画是一门艺术,接下来我来以一个demo为例,来演习css3 animation。

我们先细致相识一下animation 这个属性。

animation-name

    这是一个必填的选项,不然没法指定要实行哪一个动画。

animation-duration  

    属性界说动画完成一个周期所须要的时刻,以秒或毫秒计,若是不写的话,动画将没法实行。

animation-timing-function  

    动画速率曲线(默许ease),这个属性轻微庞杂一些,它划定了这个动画在哪一个时刻实行的快,谁人时刻实行的慢。属性界说了一些经常运用的速率曲线,下面是一些例子:

linear // 动画从头至尾的速率是雷同的
ease // 动画以低速最先,然后加速,在完毕前变慢
ease-in // 动画以低速最先
ease-out // 动画以低速完毕
ease-in-out // 动画以低速最先和完毕
cubic-bezier(n,n,n,n) // cubic-bezier 是二阶贝塞尔曲线,4个值都在[0,1]之间取,前两个值构成一个点,后两个值构成一个点。

animation-delay  

    划定在动画最先之前的延迟时刻(默许0),一样以秒或毫秒计。

animation-iteration-count  

    动画播放次数(默许1),可以是恣意正整数或许无穷次数 infinite。

animation-direction 

    动画是不是偏向播放(默许normal)

normal // 每一个动画周期正向播放
reverse // 每一个动画周期反向播放
alternate // 奇数周期正向播放,偶数周期偏向播放
alternate-reverse // 偶数周期偏向播放,奇数周期正向播放

 animation

    animation 是animation动画的简写,能够将以上6个属性写在一同。既:

animation: name duration timing-function delay iteration-count direction;

    我们将animation基础知识温习了一遍,接下来我们用一个小例子感受一下animation 的魅力。我们先看一下这个 animation-demo。这个demo主要有四周用到了 animation动画。

第一处是当横屏时 ( window.innerHeight < window.innerWidth ) 涌现竖屏提醒

这里应用动画的有三处,第一个是手机的扭转,第二个和第三个是对号错号的缩放。下面上代码

html局部

<div class="phone">
    <img src="img/phone.png"/>
    <i class="yes"></i>
    <i class="no"></i>
</div>

css局部

.phone {position: absolute;left: 50%;top: 100px;transform: translateX(-50%)}
.phone img {position: relative;animation: rotate_phone 5s ease-in-out infinite}
.phone .yes {position: absolute;left: 50%;top: 50%;display: inline-block;width: 40px;height: 30px;
    background-image: url("../img/yes.png");animation: scale_yes 5s ease infinite}
.phone .no {position: absolute;left: 50%;top: 50%;display: inline-block;width: 40px;height: 30px;
    background-image: url("../img/no.png");animation: scale_no 5s ease infinite}
@keyframes rotate_phone {
  0% {transform: rotate(0deg)}
  15% {transform: rotate(0deg)}
  35% {transform: rotate(-90deg)}
  65% {transform: rotate(-90deg)}
  85% {transform: rotate(0deg)}
  100% {transform: rotate(0deg)}
}
@keyframes scale_yes {
0% {transform: translate(-50%,-50%) scale(1);}
22% {transform: translate(-50%,-50%) scale(1);}
24% {transform: translate(-50%,-50%) scale(0);}
52% {transform: translate(-50%,-50%) scale(0);}
80% {transform: translate(-50%,-50%) scale(0);}
82% {transform: translate(-50%,-50%) scale(1.3);}
84% {transform: translate(-50%,-50%) scale(0.8);}
86% {transform: translate(-50%,-50%) scale(1.1);}
88% {transform: translate(-50%,-50%) scale(0.9);}
90% {transform: translate(-50%,-50%) scale(1);}
100% {transform: translate(-50%,-50%) scale(1);}
}
@keyframes scale_no {
0% {transform: translate(-50%,-50%) scale(0);}
30% {transform: translate(-50%,-50%) scale(0);}
32% {transform: translate(-50%,-50%) scale(1.3);}
34% {transform: translate(-50%,-50%) scale(0.8);}
36% {transform: translate(-50%,-50%) scale(1.1);}
38% {transform: translate(-50%,-50%) scale(0.9);}
40% {transform: translate(-50%,-50%) scale(1);}
72% {transform: translate(-50%,-50%) scale(1);}
74% {transform: translate(-50%,-50%) scale(0);}
100% {transform: translate(-50%,-50%) scale(0);}
}

 

    这段代码的精华地点就是怎样谐和配合好这三个动画。那末怎样谐和呢?先拿手机扭转来讲,我设置的动画活动的时刻比上总时刻为2:5,即在100%中,有60%的时刻是不动的,如许一来我们能够分派30%的时刻在竖着的手灵活画上,30%的时刻在横着的手灵活画上。我的思绪起首会想到下面如许的代码:

-玖富娱乐是一家为代理招商,直属主管信息发布为主的资讯网站,同时也兼顾玖富娱乐代理注册登录地址。-
0% {transform: rotate(0deg)}
50% {transform: rotate(-90deg)}
100% {transform: rotate(0deg)}

    然后剖析50%的时刻是横屏(rotate: -90deg),横屏时刻占30%,离别向摆布各延长15%,即35%~65%,在轮回动画中0%实在就是100%,都能够看做是竖屏(rotate: 0deg)的时刻中央,因而竖屏时刻局限从0%~15%和85%~100%。以是获得 rotate_phone 动画。接下来我们以错号(scale_no)的缩放动画为例作剖析,

0% {transform: translate(-50%,-50%) scale(0);}
30% {transform: translate(-50%,-50%) scale(0);}
32% {transform: translate(-50%,-50%) scale(1.3);}
34% {transform: translate(-50%,-50%) scale(0.8);}
36% {transform: translate(-50%,-50%) scale(1.1);}
38% {transform: translate(-50%,-50%) scale(0.9);}
40% {transform: translate(-50%,-50%) scale(1);}
72% {transform: translate(-50%,-50%) scale(1);}
74% {transform: translate(-50%,-50%) scale(0);}
100% {transform: translate(-50%,-50%) scale(0);}

动画起首抵达横屏的时刻为 rotate_phone 动画的35%局部,我是以35%为错号缩放动画的中央时刻,以2%为一个时刻段(依据本身的需求),缩放水平先大后小scale(1.3)=>scale(0.8)=>scale(1.1)=>scale(0.9)=>scale(1)这里只是大略的透露表现。正号的局部就是将错号的局部 50%或许-50%就能够了。凌驾100%的局部或许少于0%的局部在从新换算成0%~100%,好比72% => 22%。因而获得 scale_yes 动画

0% {transform: translate(-50%,-50%) scale(1);}
22% {transform: translate(-50%,-50%) scale(1);}
24% {transform: translate(-50%,-50%) scale(0);}
80% {transform: translate(-50%,-50%) scale(0);}
82% {transform: translate(-50%,-50%) scale(1.3);}
84% {transform: translate(-50%,-50%) scale(0.8);}
86% {transform: translate(-50%,-50%) scale(1.1);}
88% {transform: translate(-50%,-50%) scale(0.9);}
90% {transform: translate(-50%,-50%) scale(1);}
100% {transform: translate(-50%,-50%) scale(1);}

第二处是主页配景色彩的变更动画

    这个动画比较简单,就是配景色彩的变更,色彩我是借助 Ant Design 的色彩设想。下面贴代码

article {height: 100%;width: 100%;position: relative;animation: change_color 10s ease-in-out infinite;overflow: hidden}
@keyframes change_color {
  0% {}
  8% {background-color: #ffa39e;}
  12% {}
  28% {background-color: #b7eb8f;}
  32% {}
  48% {background-color: #ffadd2;}
  52% {}
  68% {background-color: #adc6ff;}
  72% {}
  88% {background-color: #ffe58f;}
  92% {}
  100% {background-color: #ffa39e;}
}

第三处是转盘的迁移转变

起首先把这个圆盘放在中央,这个不在动画局限并且比较简单就不多说。中央的指针是130px * 155px的,然则这里注重我们不能将指针图片中央与转盘中央重合,由于这个图片不是正方形,我们要把指针圆形的中央与转盘中央重合,我运用了相对定位,这里运用calc盘算属性(存在兼容性题目)处理上面重合题目。

css局部

article .disc .disc-box .zz {position: absolute;left: calc(50% - 65px);top: calc(50% - 90px);transform: rotate(0deg);transition: all 8s cubic-bezier(0.25, 0.46, 0.45, 0.94);transform-origin: 65px 90px}

js局部

$('.zz').css('transform','rotate(3000deg)')

    这里运用点击事宜来动身事宜转变款式。

第四局部是四边活动的笔墨

这局部比较简单,看代码就懂,个中两个轻微贫苦的点就是将四个笔墨盒子经由过程扭转平移到四个边,再有就是要先获得一个反复单位笔墨的长度。下面贴代码。

 html局部

<div class="move">
    <div class="top pp">
        <p>
            GUOZHIQIANG   GUOZHIQIANG   GUOZHIQIANG   GUOZHIQIANG                   GUOZHIQIANG   
        </p>
    </div>
    <div class="right pp">
        <p>
            GUOZHIQIANG   GUOZHIQIANG   GUOZHIQIANG   GUOZHIQIANG   GUOZHIQIANG   
        </p>
    </div>
    <div class="bottom pp">
        <p>
            GUOZHIQIANG   GUOZHIQIANG   GUOZHIQIANG   GUOZHIQIANG   GUOZHIQIANG   
        </p>
    </div>
    <div class="left pp">
        <p>
            GUOZHIQIANG   GUOZHIQIANG   GUOZHIQIANG   GUOZHIQIANG   GUOZHIQIANG   
        </p>
    </div>
</div>            

css局部

.move .pp {height: 80px;position: absolute;overflow: hidden;left: 0;top: 0;}
.move .top {width: calc(100vw - 80px);transform: translate(0px, 0px);}
.move .bottom {width: calc(100vw - 80px);transform: translate(80px, calc(100vh - 80px)) rotate(180deg);}
.move .right {width: calc(100vh - 80px);transform: translate(100vw, 0px) rotate(90deg);transform-origin: 0px 0px;}
.move .left {width: calc(100vh - 80px);transform: translate(0px, 100vh) rotate(-90deg);transform-origin: 0px 0px;}
.move .pp p {height: 80px;line-height: 80px;font-size: 50px;color: #000;animation: move 1.5s linear infinite;}
@keyframes move {
  from {transform: translate(-422px, 0px);}
  to {transform: translate(0px, 0px);}
}

    注重move动画这里的 -422px 就是一个反复单位笔墨的长度,既 "GUOZHIQIANG   "的长度。

    但这里css动画就看完了,代码很简单,这里是码云地点 https://gitee.com/guo_zq/color.git,喜好请点赞哦。

 

转载请说明:CSS3 animation 演习

 

-玖富娱乐是一家为代理招商,直属主管信息发布为主的资讯网站,同时也兼顾玖富娱乐代理注册登录地址。