CSS3制作鼠标经过三角形旋转

最新推荐文章于 2025-04-30 09:13:09 发布

erdouzhang

最新推荐文章于 2025-04-30 09:13:09 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： html5+css3

本文链接：https://blog.youkuaiyun.com/erdouzhang/article/details/68941292

html5+css3 专栏收录该内容

20 篇文章

订阅专栏

本文介绍如何使用CSS3的:hover伪类和transform属性，创建一个当鼠标悬停时能旋转的三角形效果。通过设置不同的边框宽度和透明度，巧妙地构造出三角形，并在鼠标悬停状态下实现360度旋转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在线演示

这里写图片描述

html:

<div id="box"></div>

css:

#box {
    margin: 100px auto;
    width: 0;
    height: 0;
    border: 30px solid transparent;/*三角形宽30px 边框都为透明*/
    border-top-color: red;/*顶部边框为红色*/
    border-bottom: none;/*底部去掉边框*/
    transition: all 1s ease 0s;/*all是所有属性都将获得动画效果  1秒玩完成动画 ease(逐渐变慢)*/
}

#box:hover {
    transform: rotate(180deg);/*旋转180度*/
}