一段很简单的代码，需要的时候直接Ctrl+C啦~
<!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>
body{
background: #999;
}
div{
width: 200px;
height: 200px;
background: linear-gradient(white 50%,black 50%);
margin: 10px ;
transition: all 2s;/*秒数表示旋转时间*/
display: flex;/*水平显示*/
align-items: center;
border-radius: 50%;/*正方形变圆形通用样式*/
}
div:hover{
transform: rotate(360deg);/* 改变数字可以调整旋转度数 */
}
div::before{
content:"";
width: 100px;
height: 100px;
background:radial-gradient(white 25%,black 25%);
display: block;
border-radius: 50%;
}
div::after{
content:"";
width: 100px;
height: 100px;
background:radial-gradient(black 25%,white 25%);
display: block;
border-radius: 50%;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>代码注释里有解析，最后完成的效果就是这样啦~
鼠标移动到太极图上就会旋转，移开则恢复。
490
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
