html页面实现gif的重新播放,html – 尝试在css中重新创建加载gif

简单地这样做怎么样？

div {

border: 10px solid #000;

height: 50px;

width: 50px;

border-radius: 50%;

position: relative;

}

div:after {

height: 0;

width: 0;

display: block;

position: absolute;

right: -12px;

content: " ";

border-bottom: 12px solid #fff;

border-right: 12px solid transparent;

transform: rotate(10deg);

}

说明：我们在这里做的是使用：after伪后将元素绝对定位到圆并使用transform属性旋转三角形.

div {

border: 10px solid #000;

height: 50px;

width: 50px;

border-radius: 50%;

position: relative;

animation: spin 1s infinite linear;

}

div:after {

height: 0;

width: 0;

display: block;

position: absolute;

right: -12px;

content: " ";

border-bottom: 12px solid #fff;

border-right: 12px solid transparent;

transform: rotate(10deg);

}

@keyframes spin {

from { transform: rotate(0deg); }

to { transform: rotate(360deg); }

}

我的建议：当你更新你的qustion,你说你想要一个透明的排水沟,我建议你使用.png图像并旋转它,而不是写100行CSS并担心跨浏览器的兼容性.或者,当我在评论中共享链接时,您可以使用CSS屏蔽.