首页前端用css绘制刷新图标

前端用css绘制刷新图标

时间: 2024-10-15 12:08:28 浏览: 40

前端使用CSS绘制刷新图标通常可以利用伪元素（`:before`或`:after`）配合SVG、伪元素内容（`:dashbox`, `::marker`等）或者简单的边框样式来实现。下面是一个简单例子，使用伪元素和一些基本的形状： ```html <!DOCTYPE html> <html lang="en"> <head> <style> .refresh-icon { display: inline-block; width: 24px; /* 或者自定义尺寸 */ height: 24px; cursor: pointer; } .refresh-icon::before { content: ""; background-color: #f00; /* 透明度调整颜色 */ position: relative; transform: rotate(0deg); transition: transform 0.3s ease-in-out; } .refresh-icon:hover::before { transform: rotate(180deg); } </style> </head> <body> <button class="refresh-icon"> </button> </body> </html> ``` 在这个示例中，当鼠标悬停在按钮上时，"刷新"图标会旋转180度，给人一种动态的感觉。

阅读全文