CSS实现1024动画

厦门摩块诗信息科技

于 2021-10-24 16:25:39 发布

阅读量281

点赞数

分类专栏：前端文章标签： 1024程序员节

本文链接：https://blog.csdn.net/qq_52124121/article/details/120935519

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

效果图:

一.方法要点:

1.animation函数使用

2.nth-child(n)控制子元素

3. @keyframes+自定义函数来定义动画规则和关键帧

二.核心代码讲解:

animation: myMove 1.5s ease alternate infinite;

参数对应: name,durationm,timing-function,direction,iteration-count

(1)其中0% 50% 100%定义不同时刻的帧

(2)rotateY(deg) 以Y轴为对称轴进行旋转deg度 scale()进行放大缩小

(3)利用top来进行上下移动

 @keyframes myMove {
            0% {
                color:rgb(299,255,80);
                top:160px;
                transform: rotateY(0deg) scale(1.0);
            }
            50%{
                color:rgb(2,150,200);
                top:0;
                transform: rotateY(180deg) scale(1.5);
            }
            100%{
                color:rgb(255,106,198);
                top:160px;
                transform: rotateY(0deg) scale(1.0);
            }
        }

三.完整源码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个Vue程序</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .outBox ul{
            text-align: center;
            display: flex;
            margin-left: 350px;
            margin-top: 80px;
        }
        .outBox li{
            list-style: none;
            margin: 20px;
            font-size:120px;
            position: relative;
            top:0;
            color:#fff;
        }
        .outBox li:nth-child(1){
            animation: myMove 1.5s ease alternate infinite;
        }
        .outBox li:nth-child(2){
            animation: myMove 1.5s ease 0.5s alternate infinite;
        }
        .outBox li:nth-child(3){
            animation: myMove 1.5s ease 1s alternate infinite;
        }
        .outBox li:nth-child(4){
            animation: myMove 1.5s ease 1.5s alternate infinite;
        }
        @keyframes myMove {
            0% {
                color:rgb(299,255,80);
                top:160px;
                transform: rotateY(0deg) scale(1.0);
            }
            50%{
                color:rgb(2,150,200);
                top:0;
                transform: rotateY(180deg) scale(1.5);
            }
            100%{
                color:rgb(255,106,198);
                top:160px;
                transform: rotateY(0deg) scale(1.0);
            }
        }
    </style>
</head>
<body>
<div class="outBox">
    <ul>
        <li>1</li>
        <li>0</li>
        <li>2</li>
        <li>4</li>
    </ul>
</div>
</body>
</html>

厦门摩块诗信息科技

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS实现1024动画

效果图:一.方法要点:1.animation函数使用2.nth-child(n)控制子元素3. @keyframes+自定义函数来定义动画规则和关键帧二.核心代码讲解:1animation: myMove 1.5s ease alternate infinite;参数对应: name,durationm,timing-function,direction,iteration-count2.(1)其中0% 50% 100%定义不同时刻的帧(2)rotateY
复制链接

扫一扫

专栏目录