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

最新推荐文章于 2023-04-21 18:49:25 发布

原创最新推荐文章于 2023-04-21 18:49:25 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

html5+css3 专栏收录该内容

20 篇文章

订阅专栏

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

在线演示

这里写图片描述

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度*/
}