非原创，使用html5做的旋转的太极图

来源：互联网发布：湖南网络公关公司编辑：程序博客网时间：2024/06/07 21:12

<!DOCTYPE html>
<html>
<head>
<title>渐变太极图</title>
<meta charset="utf-8">
<meta name="keywords" content="">
<meta name="description" content="这是一个旋转的太极图，颜色有黑白两色">
<style>/*修饰某一区域或元素的宽，高，颜色，位置……*/
. { /*通配符选择器：选中所有元素*/
margin: 0px; /*清除浏览器默认的外边距*/
}
body {
background-color: #ccc;
}
.taichi { /*找到以class命名的叫做taichi的元素*/
/*修饰内容区*/
width: 400px; /*属性名称：属性值*/
height: 400px;
/*background-color:#6600ff;*//*给元素设置一种颜色*/
/*外边距：margin*/
margin: 100px auto 0px auto; /*外边距：上右下左*/
border-radius: 50%; /*圆角*/
background:linear-gradient(black 50%, white 30%);
display: flex; /*弹性盒模型*/
align-items: center;
animation: rotate 5s infinite linear;
}
.left {
width:50px;
height: 50px;
border: 75px solid #000; /*边框：宽度样式颜色*/
border-radius: 50%; /*圆角*/
background-color:#fff; /*白色*/
animation: change 1s infinite alternate linear; /*动画：动画名称播多长时间*/
transform-origin: 0 50%;
/*animation: rotate 1s infinite alternate linear;*/
}
.right {
width:50px;
height: 50px;
border: 75px solid #fff; /*边框：宽度样式颜色*/
border-radius: 50%; /*圆角*/
background-color:#000; /*白色*/
animation: change 1s infinite alternate linear; /*动画：动画名称播多长时间*/
animation-delay: -1s; /*提前一秒变化*/
transform-origin: 100% 50%;
/*animation: rotate 1s infinite alternate linear;*/
}
/*关键帧：名字悟空传*/
@keyframes change {
from { /*变小*/
/*变化：大小*/
transform: scale(0.5); /*变成1/2*/
}
to {
transform: scale(1.5);
}
}
@keyframes rotate {
from {
/*变化：角度*/
transform:rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="taichi">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>

阅读全文

0 0