我正在参加[码上掘金挑战赛]详情请看：码上掘金挑战赛来了！
旋转的八卦图
八卦图代码
<!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>
*{
margin: 0;
height: 0;
}
body{
background-color: beige;
}
@keyframes myRote {
from{
transform: rotate(360deg);
}to{
transform: rotate(0deg);
}
}
.taiji{
width: 0;
height: 300px;
border-left: 150px solid white;
border-right: 150px solid black;
border-radius: 50%;
margin: 100px;
border-top: 100px;
transition: all .5s;
animation: myRote 3s linear infinite ;
}
.taiji::before{
content: " ";
display:block;
width: 50px;
height: 50px;
border: 50px solid white;
border-radius: 50%;
background-color: black;
margin-left: -80px;
}
.taiji::after{
content: " ";
display:block;
width: 50px;
height: 50px;
border: 50px solid black;
border-radius: 50%;
background-color: white;
margin-left: -80px;
}
.taiji:hover{
box-shadow: 5px 2px 15px red,
-5px 2px 15px blueviolet,
5px -2px 15px brown,
-5px -2px 15px blue;
}
</style>
</head>
<body>
<div class="taiji"></div>
</body>
</html>
结果
结论
transform:允许旋转，缩放，倾斜或平移给定元素。
rotate:允许旋转，缩放，倾斜或平移给定元素
transition:过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果
content:用于在元素的 ::before 和 ::after 伪元素中插入内容
::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容,是行内元素。
animation 属性用来指定一组或多组动画，每组之间用逗号相隔\
锚点功能
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html {
/* 滚动条是HTML标签来选择 */
/* 让滚动条实现一个滚动效果 */
scroll-behavior: smooth;
}
* {
border: 1px solid red;
}
header {
height: 300px;
}
.container {
height: 1500px;
}
footer {
height: 300px;
}
</style>
</head>
<body>
<header id="top">
<a href="#footer">到达底部</a>
<a href="#content">到达中间内容部分</a>
</header>
<div class="container" id="content">
<a href="#footer">到达底部</a>
</div>
<footer id="footer">
<a href="#top">到达顶部</a>
<a href="#content">到达中间内容部分</a>
</footer>
</body>
</html>
结论
可以快速回到指定位置。
