css3一条线正方形旋转 |cssbanner居中

css简易日历，css中移动图片，html中css与javascript，css隐形p文本背景，css3图片作为背景，css中如何让文字对齐，cssbanner居中 css3一条线正方形旋转 |cssbanner居中

.sq {
width: 100px;
height: 100px;
border: 5px solid #333;
border-top: none;
animation: rotate 2s linear infinite;
}
@keyframes rotate {
to {
transform: rotate(360deg);
}
}

首先，大家需要一个边框宽度为0，顶部边框宽度为5px的正方形，使用CSS3的border属性即可实现。其次，定义旋转动画，大家可以使用CSS3中的@keyframes关键字和transform属性，实现从0deg到360deg的旋转。由于大家需要无限循环旋转，所以使用infinite属性，即可实现无限次数的旋转。

最后，将前面所写的样式应用到HTML代码上。例如，大家可以定义一个class为”sq”的div元素，并在其上添加前面所写的样式。这样即可在页面中展示出一条线正方形一面精彩的旋转效果。