编写html代码滚铁圈的效果铁拳上的文字也一起滚动
<html>
<head>
<title>滚铁圈</title>
<style>
#iron-fist {
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
background: #777;
border-radius: 50%;
overflow: hidden;
}
<pre><code> #iron-fist:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin: -100px 0 0 -100px;
border-radius: 50%;
border: 10px solid #333;
animation: rotate 2s linear infinite;
}
#iron-fist:after {
content: "铁拳";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 50px;
color: #fff;
animation: text-rotate 2s linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes text-rotate {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
</style>
</code></pre>
</head>
<body>
<div id="iron-fist"></div>
</body>
</html
原文地址: https://www.cveoy.top/t/topic/fk4d 著作权归作者所有。请勿转载和采集!