前端小项目：旋转太极

最新推荐文章于 2023-09-17 18:45:59 发布

CaptainDrake

最新推荐文章于 2023-09-17 18:45:59 发布

阅读量116

点赞数 1

分类专栏： Front-End # Demos 文章标签：前端 css3 css

本文链接：https://blog.csdn.net/CaptainDrake/article/details/127934827

版权

Front-End 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

Demos

5 篇文章 0 订阅

订阅专栏

小项目：太极

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>

效果：

Untitled

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

动画：

@keyframes 规则

概念：

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

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

语法：

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

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

属性：

Untitled

例子：

<!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>

效果：

颜色逐渐变化

Untitled

参考：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>