我想实现这个CSS动画,但不知道如何做到。我想将顶部边框围绕圆圈旋转,但整个元素都在旋转,包括文本。我只想将顶部边框旋转360度。以下是我的代码片段:
div#skill {
/*background: url(../img/white.jpg) center no-repeat;
background-size: cover;*/
background-color: rgba(144, 0, 64,0.8);
color: #fff;
padding: 10px 0;
}
div#skill h3 {
color: #fff;
text-transform: none;
}
div#skill .row {
margin-right: -15px;
margin-left: -15px;
padding: 15px 150px;
}
div#skill .circle {
height: 120px;
width: 120px;
border: 5px solid #ccc;
border-top-color: orange;
border-radius: 60px;
background-color: #74002f;
/*Making the top border to spin*/
animation: spin 2s linear infinite;
}
div#skill .circle:after {
content: url(../img/icons/arrow-point-to-right.png);
position: absolute;
top: 25px;
right: 0;
}
div#skill .circle.last:after{
display: none;
}
.circle .caption {
font-weight: bold;
padding: 20px 24px;
}
.caption h6 {
font-size: 15px;
}
/*Animation on circle*/
@keyframes spin {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
<div id="skill">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h3>My development process</h3>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="circle">
<div class="caption text-center">
<h6>1</h6>
<h6>Concept</h6>
</div>
</div>
</div>
<div class="col-md-3">
<div class="circle">
<div class="caption text-center">
<h6>2</h6>
<h6>Design</h6>
</div>
</div>
</div>
<div class="col-md-3">
<div class="circle">
<div class="caption text-center">
<h6>3</h6>
<h6>Code</h6>
</div>
</div>
</div>
<div class="col-md-3">
<div class="circle last">
<div class="caption text-center">
<h6 class="text-center">4</h6>
<h6 class="text-center">Launch</h6>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h3>about my skills</h3>
</div>
<div class="col-md-6">
</div>
</div>
</div>
</div>
circle
类,使用border-radius: 50%;
属性。 - Andrei Fedorov