首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS3 animation动画 - 转风车、loding加载、人物走路等示例

CSS3 animation动画 - 转风车、loding加载、人物走路等示例

作者头像
Devops海洋的渔夫
发布2019-05-31 16:29:26
1.3K0
发布2019-05-31 16:29:26
举报
文章被收录于专栏:Devops专栏Devops专栏

CSS3 animation动画相关参数

1、@keyframes 定义关键帧动画 2、animation-name 动画名称 3、animation-duration 动画时间 4、animation-timing-function 动画曲线 linear(匀速)|ease(缓冲)|steps(步数) 5、animation-delay 动画延迟 6、animation-iteration-count 动画播放次数 n|infinite 7、animation-direction 动画结束后是否反向还原 normal|alternate 8、animation-play-state 动画状态 paused(停止)|running(运动) 9、animation-fill-mode 动画前后的状态 none(缺省)|forwards(结束时停留在最后一帧)|backwards(开始时停留在定义的开始帧)|both(前后都应用) 10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性

看了上面的这么多动画效果的相关参数,估计还是不太理解,那么下面先来一下快速入门示例

快速入门示例 - div长度伸缩动画效果

二话不说,先手写一个div正方形。那么下一步就是设置一个动画效果,伸缩扩展这个正方形div的宽度。

上面的代码就是当鼠标移动到div上,则在1秒内执行完expanding的动画效果,从原来的宽度width:300px变为width:600px的效果。

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        @keyframes expanding{

            from{
                width: 300px;
            }       

            to{
                width: 600px;
            }
        }

        .box1{
            width: 300px;
            height: 300px;
            background-color: gold;
            border: 3px solid #000;

        }

        .box1:hover{
            animation: expanding 1s;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

animation-timing-function 动画曲线 linear(匀速)|ease(缓冲)|steps(步数)

其实这个跟transition的过渡参数是一样的。

刚才上面的扩展动画效果比较生硬,增加一个缓冲效果来看看,如下:

animation-delay 动画延迟

设置1秒延迟的效果,不会立即呈现动画效果。

animation-iteration-count 动画播放次数 n|infinite

设置了这个参数,那么动画效果就会播放多次,这里填写参数为5,那么就会执行5次。

如果填写infinite,那么就会执行无限次。

animation-direction 动画结束后是否反向还原 normal|alternate

如果需要有反向的动画效果,需要填写alternate,如下:

animation-play-state 动画状态 paused(停止)|running(运动)

这个参数是用来控制动画效果的开始以及停止的。

例如:我将上面的代码改一改,就是div原来自动在一直不停地伸缩,鼠标移动上去就停止。

那么默认如果就是pasued的状态,试试等鼠标移动上去就改为running状态看看效果。

练习一:风车动画

看完上面的参数应该已经基本知道animation动画的使用方法,下面来看看这张图片,如下:

fengche.png

制作一个动画效果,让这个风车不停地旋转。那么其实只要设置无限播放,然后动画效果使用transform中的rotateZ参数,进行360度地旋转即可。

实现如下:

要注意的是这个风车的旋转是使用Z轴的,也就是说屏幕正对着你的方向。

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        @keyframes Rotating{
            from{
                transform: rotateZ(0deg);
            }
            to{
                transform: rotateZ(360deg);
            }
        }

        .fengche{
            display: block;
            width: 400px;
            height: 400px;
            animation:  linear Rotating 2s infinite;
        }

    </style>
</head>
<body>
    <img src="fengche.png" alt="" class="fengche">
</body>
</html>

练习二:loading动画

分析思路: 首先写五个div,并且设置好对应的样式。然后写一个动画效果,给每个div动画伸展Y轴的大小,最后给每个动画效果做一个延时,这样就可以做好了。

下面来实现代码看看,如下:

完整代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        @keyframes loding{
            from{
                transform: scaleY(0.5);
            }

            to{
                transform: scaleY(1);
            }
        }

        .con{
            width: 300px;
            height: 158px;
            border: 1px solid #000;
        }

        .con div{
            width: 30px;
            height: 100px;
            float: left;
            margin:15px;
            border-radius: 15px;

            animation: loding 1s ease infinite alternate;
        }

        .con div:nth-child(1){
            background-color: red;
        }

        .con div:nth-child(2){
            background-color: green;
            animation-delay: 100ms;
        }

        .con div:nth-child(3){
            background-color: pink;
            animation-delay: 200ms;
        }

        .con div:nth-child(4){
            background-color: rgb(174,255,43);
            animation-delay: 300ms;
        }

        .con div:nth-child(5){
            background-color: rgb(0,255,255);
            animation-delay: 400ms;
        }

        .con p {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="con">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <p>loding...</p>
    </div>
</body>
</html>

练习三:人物走路动画,动画中的step用法

动画中使用的图片如下:

从上图来看,我的第一印象就是写一个绝对定位,然后left图片的动画效果,此时动画效果不能用匀速、缓冲移动的方式,要才用step步数的方式。

首先看看图片的宽度,如下:

图片的移动使用step方式是需要设置整体宽度的,并且设置为8个步数,因为里面有8个动作图片。

下面实现来看看,如下:

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        @keyframes walking{
            from{
                left: 0px;
            }

            to{
                left: -960px;
            }
        }

        .step{
            width: 120px;
            height: 180px;
            border:1px solid #000;
            position: relative;
            overflow: hidden;
        }

        .step img{
            position: absolute;
            top: 0px;
            left: 0px;
            animation: walking 1s steps(8) infinite;
        }
    </style>
</head>
<body>
    <div class="step">
        <img src="steps.png" alt="">
    </div>
</body>
</html>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019.03.04 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • CSS3 animation动画相关参数
  • 快速入门示例 - div长度伸缩动画效果
  • 练习一:风车动画
  • 练习二:loading动画
  • 练习三:人物走路动画,动画中的step用法
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档