css3实现旋转小三角动画

最新推荐文章于 2022-11-04 09:05:15 发布

huang100qi

最新推荐文章于 2022-11-04 09:05:15 发布

阅读量6.2k

点赞数

本文链接：https://blog.csdn.net/huang100qi/article/details/8767423

版权

这篇博客展示了如何利用CSS3的旋转（rotate）属性和过渡（transition）效果，创建一个点击后小三角形翻转的动画效果。通过设置不同的边框颜色和宽度，以及应用hover事件，实现了三角形从直角到倒角的平滑变换。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>box-sizing</title>
<style>
i{font-weight:500;
    font-style:normal;
   }
.hitme {
       display:block;
       line-height:22px;
       height:22px;
       overflow:visible;
       padding:0px 15px;
        font-size:14px;
        width:40px;
        position:relative;
   }

   .hitme i{
       border-color: transparent transparent #626262 transparent;
        border-style: solid;
        border-width: 0px 4px 4px 4px;
        _border-style:solid dotted;
        position:absolute;
        top:10px;
        right:10px;
        width:0px;