手揣网教程/网站教程/内容

CSS3学习之页面加载动画（5）

网站教程2024-10-16 阅读
[摘要]之前发了四篇，二十二个效果，本篇文章再给大家分享6种css3的页面加载动画，总计二十八个页面加载动画效果。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。在之前的文章【CSS3学习之...
之前发了四篇，二十二个效果，本篇文章再给大家分享6种css3的页面加载动画，总计二十八个页面加载动画效果。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

在之前的文章【CSS3学习之页面加载动画（四）】中又分享了6个CSS3的加载动画，今天继续分享（标题接上一次）。

二十三、效果二十三

CSS3学习之页面加载动画（5）

两个正方形，初始均定位至左上（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;
      }
    }

二十四、效果二十四

CSS3学习之页面加载动画（5）

类似于火焰的跳动效果，将三个方形p定位至横向居中，纵向底部，初始宽高均设为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;
      }
    }

二十五、效果二十五

CSS3学习之页面加载动画（5）

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

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

CSS3学习之页面加载动画（5）

.pac_head {
      border: 25px solid #fff;
      border-right-color: transparent;
      border-radius: 50%;
    }
吃豆人的嘴已经做出来了，剩下的，两个p一个正向Z轴旋转，一个反向Z轴旋转，便做出来了吃的动作。
右侧三个小球均定为至右侧中部，向吃豆人的嘴中运动，将小球的动画时间以及吃豆人的动画时间调整适当即可。
@keyframes pac_ball {
      100% {
        right: 55%;
      }
    }
二十六、效果二十六
CSS3学习之页面加载动画（5）
会跳动的纸片
这个效果难点就在于下落变形的效果怎么做。其实很简单。首先要明白，一个正方形，只要是绕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);
      }
    }
二十七、效果二十七
CSS3学习之页面加载动画（5）
一个p，一个伪类就做出来了。
p负责旋转，伪类负责改变高度，各司其职就做来了。
@keyframes locker_ball {           //p旋转
      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;
      }
    }
二十八、效果二十八
CSS3学习之页面加载动画（5）
时钟的效果（我的定位好像没有定在正中间）
时钟的效果只用到一个关键帧动画就搞定了，那就是旋转360°，只要改变两个指针的动画运动时间即可。
@keyframes clock {
      100%{
        transform: rotateZ(360deg);
      }
    }
本系列动画中，有的停顿效果是通过关键帧控制从某百分比到某百分比一直保持该状态达到的；而有的则是通过运动曲线ease来实现的。
完结撒花！希望本系列能对大家的学习有所帮助，更多相关教程请访问 CSS基础视频教程， CSS3视频教程，bootstrap教程！
以上就是CSS3学习之页面加载动画（五）的详细内容，更多请关注php中文网其它相关文章！
				
				
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。

……
标签:CSS3学习之页面加载动画（5）
 
相关阅读