[html] 第839天 使用HTML5+CSS3实现一个轮胎滚动的特效 #4277
Labels
html
html
Comments
|
写复杂了-_-| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.tyre{
height: 200px;
width: 200px;
background-color: #ffffff;
border-radius: 50%;
animation: spin 3s linear infinite;
text-align: center;
line-height: 200px;
display: flex;
}
.angle{
margin: auto;
height: 160px;
width: 160px;
border-radius: 50px;
background-color: #282a2c;
opacity: 0.9 ;
}
.circle{
height: 160px;
width: 160px;
border-radius: 50%;
background-color: #3e4044;
padding: 40px;
box-sizing:border-box;
}
.small_circle{
height: 80px;
width: 80px;
border-radius: 50%;
background-color: #000000;
}
@keyframes spin{
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="tyre">
<div class="angle" id="">
<div class="angle" id="" style="transform: rotate(30deg);">
<div class="angle" id="" style="transform: rotate(30deg);">
<div class="circle">
<div class="small_circle">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
第839天 使用HTML5+CSS3实现一个轮胎滚动的特效
3+1官网
我也要出题
The text was updated successfully, but these errors were encountered: