前端小项目：旋转太极-阿里云开发者社区

前端小项目：旋转太极

2023-09-13 74

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 前端小项目：旋转太极

小项目：太极

Date: November 18, 2022

太极

知识点：

简要介绍所需关键知识

圆角：

用途：为边框设置圆角，若无边框，则会作用到背景上。

这里主要谈谈用百分比：

radius的值是百分比，相当于盒子的宽度和高度的百分比。

举例：

例1 盒子宽高都为100px。border-top-left-radius：50% 就相当于用50px作为半径

构建圆形，此圆形与上左边框的交集，形成圆角。

Code：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .circle{
            width: 100px;
            height: 100px;
            background-color: pink;
            border-radius: 50%;
            /* 同理：border-radius: 50px;*/
        }
    </style>
</head>
<body>
    <div class="circle"></div>
</body>
</html>

效果：

参考：https://blog.csdn.net/weixin_44137575/article/details/114587752

动画：

@keyframes 规则

概念：

在 @keyframes规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。

要使动画生效，必须将动画绑定到某个元素。

语法：

使用简写的 animation属性也可以实现与上例相同的动画效果：

animation: name duration timing-function delay iteration-count direction fill-mode;

属性：

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes example {
            from{
                background-color: red;
            }to{
                background-color: yellow;
            }
        }
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            animation: example 5s linear 2s infinite alternate;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果：

颜色逐渐变化

参考：https://www.w3school.com.cn/css/css3_animations.asp

整体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 旋转动画设置： */
        @keyframes myAnimation{
            from{
                transform: rotate(0deg);
            }
            to{
                transform: rotate(360deg);
            }
        }
        body{
            background-color: #ccc;
        }
        .taiji{
            width: 0px;
            height: 300px;
            border-radius: 50%;
            border-left: 150px solid white;
            border-right: 150px solid black;
            animation: myAnimation 2s infinite linear;
        }
        .taiji::before,
        .taiji::after{
            width: 50px;
            border: 50px solid white;
            height: 50px;
            border-radius: 50%;
            content: "";
            background-color: black;
            display: block;
            margin-left: -75px;
        }
        .taiji::before{
            border: 50px solid black;
            background-color: white;
        }
    </style>
</head>
<body>
    <div class="taiji"></div>
</body>
</html>