这个问题与以下内容完全相同:>
CSS Animated Circles – Stop center content from rotating1个
我正在尝试使用css仅旋转边框,但字体图标也在旋转.如何停止图标的旋转并仅使边框?
我正在尝试使用css仅旋转边框,但字体图标也在旋转.如何停止图标的旋转并仅使边框?
CSS:
.circle { width: 100px; height: 100px; background: transparent; border-radius: 50%; border: 2px dashed #000; -webkit-animation-name: Rotate; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: Rotate; -moz-animation-duration: 2s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: Rotate; -ms-animation-duration: 2s; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; } .play { padding: 20px 30px; font-size: 56px; } @-webkit-keyframes Rotate { from{-webkit-transform:rotate(0deg);} to{-webkit-transform:rotate(360deg);} } @-moz-keyframes Rotate { from{-moz-transform:rotate(0deg);} to{-moz-transform:rotate(360deg);} } @-ms-keyframes Rotate { from{-ms-transform:rotate(0deg);} to{-ms-transform:rotate(360deg);} }
HTML:
<div class="circle"> <div class="play"><i class="fa fa-play"></i></div> </div>
这个代码我哪里错了?
解决方法
旋转父级也会旋转子项,所以最好像这里一样单独设置边框样式
.circle { width: 100px; height: 100px; position: relative; } .circle .border { /* content: ''; */ position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: transparent; border-radius: 50%; border: 2px dashed #000; -webkit-animation-name: Rotate; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: Rotate; -moz-animation-duration: 2s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: Rotate; -ms-animation-duration: 2s; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; } .play { padding: 20px 30px; font-size: 56px; } .stop { font-size: 12px; padding: 30px; text-align: center; } @-webkit-keyframes Rotate { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @-moz-keyframes Rotate { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @-ms-keyframes Rotate { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(360deg); } }
<div class="circle"> <div class="border"></div> <div class="play"><i class="fa fa-play"></i> </div> </div> <p> PS: The icon loading is a bit slow. Wait until it shows up. </p> <div class="circle"> <div class="border"></div> <div class="stop">Stop me please</div> </div>