<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#yin-yang {
width: 96px;
height: 48px;
background: #fff;
border-color: black;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
animation: taiji 5s linear;
}
#yin-yang:hover {
animation-play-state: paused;
}
#yin-yang::before {
content: '';
position: absolute;
top: 50%;
left: 0;
background: #fff;
border: 18px solid black;
border-radius: 100%;
width: 12px;
height: 12px;
}
#yin-yang::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
background: black;
border: 18px solid #fff;
border-radius: 100%;
width: 12px;
height: 12px;
}
@keyframes taiji {
form{
transform: rotate(0deg);
}to{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="yin-yang"></div>
</body>
</html>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
