全球彩票平台_全球彩票注册平台|官网下载地址

热门关键词: 全球彩票平台,全球彩票注册平台,全球彩官网下载地址

【全球彩官网下载地址】CSS3-loading动画(四),

CSS3-loading动画(四),css3-loading动画

图片看的效果真是不行,还是戳下面网址看吧

在线示例:

十七、效果十七

全球彩官网下载地址 1

 

三个小球,纵向居中,间距撑开,依次改变小球的translateY的值即可。

@keyframes leap_ball {
      50% {
        transform: translateY(60px);
      }
    }

十八、效果十八

全球彩官网下载地址 2

 

三个小球,横纵方向上均居中,通过外边距撑开小球之间的距离,从效果上看是左右两边的两个小球在围绕中间小球做环绕运动,那么我们可以直接让小球的父元素来旋转,来达到两边小球的环绕效果(父元素旋转的时候,因为圆形,所以中间小球看不出是在旋转,并且中间的位置也不会改变,从视觉上看,中间小球没有做任何变化)。

@keyframes wind_ball {
      50% {
        transform: rotateZ(180deg);
      }
      100% {
        transform: rotateZ(360deg);
      }
    }

十九、效果十九

全球彩官网下载地址 3

 

一共五个小球,每一个小球执行的动画都一样,只是每个小球的动画延迟时间不同,而使小球的位置不同,将五个小球定位至同一个位置作为统一起点(这里,我是将五个小球统一定位至最右边)

{animation: cool_ballP 2s linear infinite, cool_ballS 2s linear infinite;}
@keyframes cool_ballP {
      80% {
        right: 75%;    //到达终点,开始返回起点
      }
    }
@keyframes cool_ballS {
      80% {               //到达终点
        top: 25%;
        width: 20px;
        height: 20px;
      }
      81% {               //开始返回起点,长度变大,宽度变小,模拟移动产生的形变
        top: 0;
        width: 25px;
        height: 15px;
      }
      99% {               //到达起点
        top: 0;
        width: 25px;
        height: 15px;
      }
       100% {             //恢复初始
        width: 20px;
        height: 20px;
      } 
    }

二十、效果二十

全球彩官网下载地址 4

 

共八个小球,定位围成一个圆,改变小球的宽度、高度即可(要保持小球改变的是以小球的圆心为基准)

{animation: load_ball 1.6s linear infinite;}
@keyframes load_ball {
      50% {
        height: 0;
        width: 0;
      }
      80% {
        height: 0;
        width: 0;
      }
    }

(50%-80%小球维持宽度、高度保持0,形成了一半显示,一半隐藏的效果)

二十一、效果二十一

全球彩官网下载地址 5

 

一共三个小球,每个小球的运动轨迹依然是相同的,这里,我将三个小球的中心定位到纵向顶部,横向中心,然后分三个阶段,先运动到右下角,再到左下角,最后返回起点。

(在每一个阶段接近中间的时间点,加上了透明度的改变)

@keyframes triangle_ball {
      16% {
        opacity: .6;
      }
      33% {
        left: 100%;
        top: 100%;
        opacity: 1;
      }
      50% {
        opacity: .6;
      }
      66% {
        left: 0;
        top: 100%;
        opacity: 1;
      }
      83% {
        opacity: .6;
      }
      99% {
        top: 0;
        left: 50%;
        opacity: 1;
      }
    }

二十二、效果二十二

全球彩官网下载地址 6

 

这类似于一个旋转的齿轮,关键是如何做出一个齿轮的形状来,一个div给实现边框做里面的圆,给div的伪类虚线边框做外面的锯齿,伪类的边框越宽,锯齿越稀松,反之,越密集。

做出来齿轮了,就剩下旋转的小case了。

.gear_ball {
      height: 60px;
      width: 60px;
      border-radius: 50%;
      display: inline-block;
      border: 4px #fff solid;
      position: relative;
    }

    .gear_ball:after {
      content: '';
      position: absolute;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      top: -8px;
      left: -8px;
      border: 8px #fff dashed;
    }

 

今天的分享结束,明天周五,再来一波,撒花完结

图片看的效果真是不行,还是戳下面网址看吧 在线示例: 十七、效果十七 三...

(在每一个阶段接近中间的时间点,加上了透明度的改变)

 

CSS3-loading动画(五),css3-loading动画

CSS3-loading加载动画

在线示例demo:

之前发了四篇,二十二个效果,今天再分享六个效果,总计二十八个效果。

二十三、效果二十三

全球彩官网下载地址 7

 

两个正方形,初始均定位至左上(top:0;left:0;);

一次完整运动分为四个阶段:第一个阶段,左上移动至右上,旋转90°,宽高缩小;第二个阶段,右上移动至右下,旋转180°,宽高回复;第三个阶段,右下移动至左下,旋转270°,宽高缩小;第四个阶段,左下移动至左上,旋转360°,宽高回复。

动画延迟时间差为负的半个动画时间。

{animation: party_ball 2s ease infinite;}
@keyframes party_ball {
      25% {
        -webkit-transform: scale(.5) rotateZ(90deg);
        transform: scale(.5) rotateZ(90deg);
        top: 0;
        left: 100%;
      }
      50% {
        -webkit-transform: scale(1) rotateZ(180deg);
        transform: scale(1) rotateZ(180deg);
        top: 100%;
        left: 100%;
      }
      75% {
        -webkit-transform: scale(.5) rotateZ(270deg);
        transform: scale(.5) rotateZ(270deg);
        top: 100%;
        left: 0;
      }
      100% {
        -webkit-transform: scale(1) rotateZ(360deg);
        transform: scale(1) rotateZ(360deg);
        top: 0;
        left: 0;
      }
    }

二十四、效果二十四

全球彩官网下载地址 8

 

类似于火焰的跳动效果,将三个方形div定位至横向居中,纵向底部,初始宽高均设为0。

向上移动的同时,改变方形的宽高即可。

{animation: fire_ball 1.5s linear infinite;}
@keyframes fire_ball {
      50% {
        height: 30px;
        width: 30px;
        top: 50%;
      }
      100% {
        height: 0;
        width: 0;
        top: 0;
      }
    }

二十五、效果二十五

全球彩官网下载地址 9

 

很像小时候玩的游戏——吃豆人

左侧吃豆人的制作:两个div宽高为0,只设置边框,将右边框的颜色属性设置为transparent,代码及效果如下:

全球彩官网下载地址 10

.pac_head {
      border: 25px solid #fff;
      border-right-color: transparent;
      border-radius: 50%;
    }

吃豆人的嘴已经做出来了,剩下的,两个div一个正向Z轴旋转,一个反向Z轴旋转,便做出来了吃的动作。

右侧三个小球均定为至右侧中部,向吃豆人的嘴中运动,将小球的动画时间以及吃豆人的动画时间调整适当即可。

@keyframes pac_ball {
      100% {
        right: 55%;
      }
    }

二十六、效果二十六

全球彩官网下载地址 11

 

会跳动的纸片

这个效果难点就在于下落变形的效果怎么做。其实很简单。首先要明白,一个正方形,只要是绕Z轴旋转90的倍数,那么看起来与原图是一模一样的,那么做这个效果就很简单了,不用再考虑给每个角都加上一个变形的效果了。

变形效果:只要改变border-radius的值就可以产生这种变形了。

@keyframes beat_ball {
      25% {
        transform: translateY(25%) rotate(22.5deg);//下落
        border-bottom-right-radius: 10%;
      }
      50% {
        border-bottom-right-radius: 100%;
        transform: translateY(50%) scale(1, 0.8) rotate(45deg)   //scale,是为了让形变看起来有弹性
      }
      75% {
        transform: translateY(25%) rotate(67.5deg)   //上升
      }
      100% {
        transform: translateY(0) rotate(90deg)        //旋转90°结束一个周期,刚好和初始状态一模一样,那就直接重复执行动画即可
      }
    }

阴影的效果就更好说了,做一个扁的椭圆出来,box-shadow加上阴影效果,适时是改变大小就OK了。

@keyframes beat_shadow {
      50%{
        transform: scale(1.25,0.8);
      }
    }

二十七、效果二十七

全球彩官网下载地址 12

 

一个div,一个伪类就做出来了。

div负责旋转,伪类负责改变高度,各司其职就做来了。

@keyframes locker_ball {           //div旋转
      25%{
        transform: rotateZ(180deg);
      }
      50%{
        transform: rotateZ(180deg);
      }
      75%{
        transform: rotateZ(360deg);
      }
      100%{
        transform: rotateZ(360deg);
      }
    }
    @keyframes locker_ballh {     //伪类高度改变
      25%{
        height: 40px;
      }
      50%{
        height: 0;
      }
      75%{
        height: 0;
      }
      100%{
        height: 40px;
      }
    }

二十八、效果二十八

全球彩官网下载地址 13

 

时钟的效果(我的定位好像没有定在正中间)

时钟的效果只用到一个关键帧动画就搞定了,那就是旋转360°,只要改变两个指针的动画运动时间即可。

@keyframes clock {
      100%{
        transform: rotateZ(360deg);
      }
    }

 

 

本系列动画中,有的停顿效果是通过关键帧控制从某百分比到某百分比一直保持该状态达到的;而有的则是通过运动曲线ease来实现的。

 

完结撒花~过周末~

CSS3-loading加载动画 在线示例demo: 之前发了四篇,二十二个效果,今天再分享...

CSS3-loading动画(二),css3-loading动画

上次分享了四个CSS3的加载动画,今天继续(标题接上一次)。

在线demo:   (持续更新)

 

请注意:代码中的关键帧动画有的用的linear曲线,而有的用的是ease曲线。前者是匀速执行,整个动画以固定的速度执行;后者有加速减速阶段,在动画开始时加速,在动画将要结束时减速(比如我在50%的地方设置了一个动画,那么在快要到达50%的时候,动画开始减速,在超过50%的时候动画开始加速,表现在页面上会有一个短暂的停留效果,效果七、效果八最为明显)

五、效果五

全球彩官网下载地址 14

 

小球爬楼梯的效果,第一看到这个效果,本以为会有点儿复杂,结果写出来之后觉得也没有那么难。

首先将楼梯定位至右上角,执行从右上至左下的运动动画,并为每一个楼梯设置animation-delay的值(我这里用了三个楼梯,总时长1.8s,animation-delay值分别为0s,-0.6s,-12s)

{animation: step_mv 1.8s linear infinite;}
@keyframes step_mv {
      0%{
        right: 0;
        top: 0;
        opacity: 0.6;
      }
      50%{
        opacity: 1;
      }
      100%{
        right: 100%;
        top: 100%;
        opacity: 0.6;
      }
    }

其次,确定小球与楼梯的接触点,小球将以此接触点作为最低基准,同时,改变小球在上升、下降过程中的宽高来是小球跳动更真实。小球动画的运动时间刚好是楼梯动画的延迟时间,这样,才能保证小球可以接触到每一个楼梯。

{animation: jump .6s 0s ease infinite,jump_S .6s 0s ease infinite;}
@keyframes jump {
      50%{
        top: 60%;
      }
    }
    @keyframes jump_S {
      5%{
        height: 25px; //下降过程
        width: 15px;
      }
      54%{
        height: 20px;//到达底部
        width: 20px;
      }
      55%{
        height: 25px;//上升过程
        width: 15px;
      }
      98%{
        height: 20px;//到达顶点
        width: 20px;
      }
    }

六、效果六

全球彩官网下载地址 15

 

这个效果就比较简单了。

一个矩形div,设置边框、圆角,将其中任意一个边框颜色设置为继承(即border-left/bottom/top/right-color:transparent);

这样,父元素没有边框颜色,这一边的边框也就无色,便形成了有缺口的圆,接下来只要设置旋转动画就OK了。(代码就不贴出来了)

七、效果七

全球彩官网下载地址 16

 

这个效果形状的制作与上一个做法相同,只是这次多加了一个边框,还是旋转,就不多说了,直接上关键帧动画的代码。

{animation: rotate_bors 2s ease infinite;}//大圆
{animation: rotate_bors 1s ease infinite;}//小圆
@keyframes rotate_bors {
      50%{
        transform: rotateZ(180deg);
      }
      100%{
        transform: rotateZ(360deg);
      }
    }

八、效果八

全球彩官网下载地址 17

 

这个效果也很简单,外部大圈怎么做就不多说了,里面的小圆,也只要改变大小就行了。

{animation: rotate_borw 1s linear infinite;}
@keyframes rotate_borw {
      50%{
        width: 15px;
        height: 15px;
      }
    }

九、效果九

全球彩官网下载地址 18

 

将小球全部设置为行内块元素,给父元素text-align:center来使小球水平居中,通过设置行高,来使小球垂直居中。接下来通过关键帧动画来改变小球的长宽、以及左右外边距。

{animation: margin 1s linear infinite;}
    @keyframes margin {
      50%{
        margin:0 10px;
        width: 10px;
        height: 10px;
      }
    }

十、效果十

全球彩官网下载地址 19

 

依然将小球设为行内块,只需水平居中即可,可以设置外边距来调整小球之间的距离,通过关键帧来设置小球的translateY的值。(每个小球之间的延迟不必均分,差值可以减小)

{animation: trans 1.2s ease infinite;}
@keyframes trans {
      50%{
        opacity: 1;
        transform: translateY(30px);
      }
      70%{
        opacity: 1;
        transform: translateY(30px);
      }
      100%{
        opacity: 0;
        transform: translateY(60px);
      }
    }

 

(未完待续)

上次分享了四个CSS3的加载动画,今天继续(标题接上一次)。 在线demo: (持...

十八、效果十八

全球彩官网下载地址 20

十九、效果十九

全球彩官网下载地址 21

三个小球,纵向居中,间距撑开,依次改变小球的translateY的值即可。

 

 

@keyframes leap_ball {
      50% {
        transform: translateY(60px);
      }
    }
@keyframes triangle_ball {
      16% {
        opacity: .6;
      }
      33% {
        left: 100%;
        top: 100%;
        opacity: 1;
      }
      50% {
        opacity: .6;
      }
      66% {
        left: 0;
        top: 100%;
        opacity: 1;
      }
      83% {
        opacity: .6;
      }
      99% {
        top: 0;
        left: 50%;
        opacity: 1;
      }
    }

三个小球,纵向居中,间距撑开,依次改变小球的translateY的值即可。

这类似于一个旋转的齿轮,关键是如何做出一个齿轮的形状来,一个div给实现边框做里面的圆,给div的伪类虚线边框做外面的锯齿,伪类的边框越宽,锯齿越稀松,反之,越密集。

全球彩官网下载地址 22

{animation: load_ball 1.6s linear infinite;}
@keyframes load_ball {
      50% {
        height: 0;
        width: 0;
      }
      80% {
        height: 0;
        width: 0;
      }
    }
{animation: cool_ballP 2s linear infinite, cool_ballS 2s linear infinite;}
@keyframes cool_ballP {
      80% {
        right: 75%;    //到达终点,开始返回起点
      }
    }
@keyframes cool_ballS {
      80% {               //到达终点
        top: 25%;
        width: 20px;
        height: 20px;
      }
      81% {               //开始返回起点,长度变大,宽度变小,模拟移动产生的形变
        top: 0;
        width: 25px;
        height: 15px;
      }
      99% {               //到达起点
        top: 0;
        width: 25px;
        height: 15px;
      }
       100% {             //恢复初始
        width: 20px;
        height: 20px;
      } 
    }

本文由全球彩票平台发布于全球彩官网下载地址Web前端,转载请注明出处:【全球彩官网下载地址】CSS3-loading动画(四),

TAG标签: 全球彩票平台
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。