animation动画

animation-name:自定义动画的名字

animation-duration:动画的持续时间

animation-delay:动画的延迟时间

animation-iteration-count:动画的重复次数,默认值为1,infinite为无限次数

animation-timing-function:动画的运动形式

ps:运动结束后,默认会停留在起始位置

实现图标划入划出效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图标划入划出效果 By ToDo Blog</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
            width: 400px;
            margin: 30px auto;
        }
        ul li {
            float: left;
            width: 100px;
            height: 100px;
            position: relative;
        }
        ul li img {
            width: 50%;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -25px 0 0 -25px;
        }
        ul li:hover img {
            animation: move .5s;
        }
        @keyframes move {
            0% {
                transform: translate(0, 0);
                opacity: 1;
            }
            60% {
                transform: translate(0, -50px);
                opacity: 0;
            }
            61% {
                transform: translate(0, 30px);
            }
            100% {
                transform: translate(0, 0);
                opacity: 1;
            }
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <img src="./images/qq.png" alt="QQ">
        </li>
        <li>
            <img src="./images/wx.png" alt="微信">
        </li>
        <li>
            <img src="./images/wb.png" alt="微博">
        </li>
        <li>
            <img src="./images/facebook.png" alt="脸书">
        </li>
    </ul>
</body>
</html>

此处内容需要评论回复后方可阅读。

实现loading加载动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>实现Loading加载动画 By ToDo Blog</title>
    <style>
        .loading {
            width: 40px;
            height: 40px;
            margin: 30px auto;
            position: relative;
        }
        .loading .box1,
        .loading .box2 {
            width: 100%;
            height: 100%;
            position: absolute;
        }
        .loading .box2 {
            transform: rotate(45deg);
        }
        .loading .box1 div,
        .loading .box2 div {
            width: 10px;
            height: 10px;
            background: #666666;
            border-radius: 50%;
            position: absolute;
            animation: loadingMove 1.5s infinite linear;
        }
        .loading .box1 div:nth-child(1),
        .loading .box2 div:nth-child(1) {
            left: 0;
            top: 0;
        }
        .loading .box1 div:nth-child(2),
        .loading .box2 div:nth-child(2) {
            right: 0;
            top: 0;
        }
        .loading .box1 div:nth-child(3),
        .loading .box2 div:nth-child(3) {
            right: 0;
            bottom: 0;
        }
        .loading .box1 div:nth-child(4),
        .loading .box2 div:nth-child(4) {
            left: 0;
            bottom: 0;
        }
        @keyframes loadingMove {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(0);
            }
            100% {
                transform: scale(1);
            }
        }
        .loading .box1 div:nth-child(1) {
            animation-delay: -0;
        }
        .loading .box2 div:nth-child(1) {
            animation-delay: -.2s;
        }
        .loading .box1 div:nth-child(2) {
            animation-delay: -.4s;
        }
        .loading .box2 div:nth-child(2) {
            animation-delay: -.6s;
        }
        .loading .box1 div:nth-child(3) {
            animation-delay: -.8s;
        }
        .loading .box2 div:nth-child(3) {
            animation-delay: -1s;
        }
        .loading .box1 div:nth-child(4) {
            animation-delay: -1.2s;
        }
        .loading .box2 div:nth-child(4) {
            animation-delay: -1.4s;
        }
    </style>
</head>
<body>
    <div class="loading">
        <div class="box1">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="box2">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</body>
</html>

animation动画拓展

animation-fill-mode:规定动画播放之前或之后,其动画效果是否可见。

  • none(默认值):在运动结束之后回到初始位置,在延迟的情况下,让0%在延迟后生效

  • backwards:在运动结束之后,停到结束位置

  • bothbackwardsforwards同时生效

animation-direction:属性定义是否应该轮流反向播放动画。

  • normal(默认值):永远都是正向,从0%~100%

  • alternate:一次正向(0%~200%),一次反向(100%~0%)

  • reverse:永远都是反向,从100%~0%

animation.css

一款强大的预设CSS3动画库,官网地址:https://daneden.github.io/animate.css/

基本使用:

  • animated:基类(基础的样式,每个动画效果都需要加)

  • infinite:动画的无限次数

此处内容需要评论回复后方可阅读。

不起眼的小广告

do淘客