图标元素动画效果

最新推荐文章于 2022-09-12 15:09:25 发布

qq_22317389

最新推荐文章于 2022-09-12 15:09:25 发布

阅读量570

点赞数

分类专栏： HTML5 文章标签： HTML5

本文链接：https://blog.csdn.net/qq_22317389/article/details/80068926

版权

HTML5 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

<!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>Document</title>
    <style type="text/css">
        
        *{
            padding: 0%;
            margin: 0%;
        }

        body{
            background: #8b8ab3;
            margin: 50px;
        }

        @font-face{
            font-family: 'icon-font';
            src: url('font/flat-ui-icons-regular.ttf'), url('font/flat-ui-icons-regular.eot'), url('font/flat-ui-icons-regular.woff'), url('font/flat-ui-icons-regular.svg');
        
        }
        .icon{
            background: white;
            border: none;
            border-radius: 50%;
            /* inline-block 使行内元素变为块元素 */
            display: inline-block;
            width: 100px;
            height: 100px;
            line-height: 100px;
            font-size: 0px;
            cursor: pointer;
            /*添加动画
            -webkit-animation:move 1s linear;
            animation:move 1s linear;
            */

            animation: move 1s cubic-bezier(.62,-0.91,.45,1.97);
            /*
                animate-full-mode 属性规定了元素在动画之外的状态时怎样的
                forward， 表示动画完成后保留最后一个关键帧中的属性
                backword， 表示动画延迟之前就使得元素应用第一个关键帧中的属性
                both，表示包括forward和backward的两种属性，此例中both和backward皆可
            */
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both; /*backwards*/
        }
        /**为什么用before*/
        .icon::before{
            content:"\e609";
            font-family: 'icon-font';
            color: #8b8ab3;
            font-size: 50px;
         
           /*content之后通常添加display：block和width和height*/
            display: block; 
            text-align: center;
        }
        
        /* 定义图标
            定义图标的时候添加图标和content
        */
        .home::before{
            content: '\e62e';
        }
        .search::before{
            content: '\e630';
        }
        .user::before{
            content: '\e631';
        }
        .mail::before{
            content: '\e632';
        }
        .chat::before{
            content: '\e62d';
        }
        /*定义动画出现的时延*/
        .home{
            animation-delay: 0s;
        }
        .search{
            animation-delay: .1s;
        }
        .user{
            animation-delay: .2s;
        }
        .mail{
            animation-delay: .3s;
        }
        .chat{
            animation-delay: .4s;
        }

        /*定义动画出现的动作，在页面加载时就出现这些动作，所以把move加在icon上
            自定义动作名为move,之后用animate添加在icon中
        */

        @keyframes move{
            from{
                opacity: 0;
                transform: translateY(100%);
            }

            to{
                opacity: 1;
                transform: translateY(0%);
            }
        }
    </style>
</head>
<body>
<span class="home icon">Home</span>
<span class="search icon">Search</span>
<span class="user icon">User</span>
<span class="mail icon">Mail</span>
<span class="chat icon">Chat</span>
</body>
</html>