小项目：太极
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>
效果：
