VUE学习03——太极动图制作

最新推荐文章于 2024-05-17 14:32:46 发布

逆转时空007

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量77

点赞数

分类专栏： VUE学习文章标签： vue.js 学习前端

本文链接：https://blog.csdn.net/m0_73890688/article/details/132913111

版权

VUE学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

总结

1.overflo：hidden（溢出隐藏，超出部分的内容不显示）
2.动画名称：run 运行一次的时间：5s 运动的速率（匀速运动）：linear 无限循环：infinite 往返动作：alternate
使用格式：run+运动时间

3.动画制作的代码
translate: 移动
rotate：旋转
scale：缩放

@keyframes run {
            0% {
                transform: translateX(0) rotate(0) scale(1);
            }
            50% {
                transform: translateX(250px) rotate(180deg) scale(0.5);
            }
            100% {
                transform: translateX(500px) rotate(360deg) scale(1.2);
            }
        }

太极动图完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: lightblue;
        }
        .box {
            width: 600px;
            height: 600px;
            position: relative;
            border: 1px solid black;
            border-radius: 50%;
            /* 溢出 隐藏，超出范围的内容不显示 */
            overflow: hidden;
            /* 
                动画名称 ：run
                运行一次的时间：5s
                运动的速率（匀速运动）：linear
                无限循环：infinite
                往返动作：alternate
            */
            animation: run 5s linear infinite alternate;
        }

        /* 
            translate: 移动
            rotate：旋转
            scale：缩放
        */
        @keyframes run {
            0% {
                transform: translateX(0) rotate(0) scale(1);
            }
            50% {
                transform: translateX(250px) rotate(180deg) scale(0.5);
            }
            100% {
                transform: translateX(500px) rotate(360deg) scale(1.2);
            }
        }
        
        .top_div {
            height: 300px;
            background-color: white;
        }
        .bottom_div {
            height: 300px;
            background-color: black;
        }
        .box2 {
            width: 300px;
            height: 300px;
            position: absolute;
            top: 150px;
            border-radius: 50%;
        }
        .left_0 {
            left: 0;
        }
        .right_0 {
            right: 0;
        }
        .box3 {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
        .white_bg {
            background-color: white;
        }
        .black_bg {
            background-color: black;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="top_div"></div>
        <div class="bottom_div"></div>

        <div class="box2 left_0 black_bg">
            <div class="box3 white_bg"></div>
        </div>

        <div class="box2 right_0 white_bg">
            <div class="box3 black_bg"></div>
        </div>
    </div>
</body>
</html>

效果图：

在这里插入图片描述

逆转时空007

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
VUE学习03——太极动图制作

1.overflo：hidden（溢出隐藏，超出部分的内容不显示）2.动画名称：run 运行一次的时间：5s 运动的速率（匀速运动）：linear 无限循环：infinite 往返动作：alternate使用格式：run+运动时间3.动画制作的代码translate: 移动rotate：旋转scale：缩放0% {50% {100% {
复制链接

扫一扫