就是類似于這樣，這個容器外面 有一條 線，然后圍繞著這個容器慢慢的轉(zhuǎn)動。
2 回答
Chris_威
TA貢獻(xiàn)2條經(jīng)驗 獲得超1個贊
<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>rotate</title>
</head>
<style>
?*{
?margin:?0;
?padding:?0;
?}
????.wrapper{
?padding:?20px;
?position:?relative;
?height:?250px;
?}
????.main{
?height:?200px;
?width:?200px;
?margin:?25px?auto;
?box-shadow:?inset?0?0?0?1px?rgba(105,?202,?98,?0.5);
?}
????.main?,?.main::before,?.main::after?{
?position:?absolute;
?top:?0;
?bottom:?0;
?left:?0;
?right:?0;
?}
????.main::before,?.main::after?{
?content:?'';
?margin:?-5%;
?box-shadow:?inset?0?0?0?2px?rgba(105,?202,?98,?0.5);
?animation:?clip?8s?linear?infinite;
?}
????.main::before?{
?animation-delay:?0s;
?}
?@keyframes?clip?{
?0%,?100%?{
?clip:?rect(0px,?220.0px,?2px,?0px);
?}
?25%?{
?clip:?rect(0px,?2px,?220.0px,?0px);
?}
?50%?{
?clip:?rect(218.0px,?220.0px,?220.0px,?0px);
?}
?75%?{
?clip:?rect(0px,?220.0px,?220.0px,?218.0px);
?}
????}
</style>
<body>
????<div?class="wrapper">
????????<div?class="main"></div>
????</div>
</body>
</html>有個類似的，你參考參考
添加回答
舉報
0/150
提交
取消