星空网 > 软件开发 > 网页设计

使用CSS3制作三角形小图标

话不多说,直接写代码,希望能够对大家有所帮助!

1.html代码如下:

<a href="#" class="usetohover">    <div class="triangle_border_right"></div></a><div class="ball">    <div class="triangle_border_up rotate-back"></div></div>

2.css代码如下:

.triangle_border_right{      width:0 !important;      height:0;      border-width: 7px 0 8px 11px;      margin: 27px 10px 0 0;      border-style:solid;      border-color:transparent transparent transparent #333;/*透明 透明 透明 灰*/      position:relative;    }    .usetohover:hover > .triangle_border_right {      transform: rotate(90deg);      -moz-transform:rotate(90deg);      -webkit-transform:rotate(90deg);      -webkit-transition: transform 1s;      -moz-transition: transform 1s;      -ms-transition: transform 1s;      -o-transition: transform 1s;      transition: transform 1s;    }    .ball {      width: 50px;      height: 25px;      position: absolute;      top: 5px;      left: 123px;      background-color: rgba(255,214,71,0.5);      border-radius: 25px 25px 0 0;      color: #fff;      text-align: center;      z-index: 10;    }    .triangle_border_up {      width: 0;      height: 0;      margin: 10px 0 0 17px;      border-width: 0 8px 10px;      border-style: solid;      border-color: transparent transparent #333;      position: relative;    }    .rotate-back {      transform: rotate(0deg);      -moz-transform: rotate(0deg);      -webkit-transform: rotate(0deg);      -webkit-transition: transform 1s;      -moz-transition: transform 1s;      -ms-transition: transform 1s;      -o-transition: transform 1s;      transition: transform 1s;    }

效果图如下:

使用CSS3制作三角形小图标




原标题:使用CSS3制作三角形小图标

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

众盛 深圳 科技物流:https://www.goluckyvip.com/tag/49437.html
众为资本:https://www.goluckyvip.com/tag/49438.html
众鑫邦物流:https://www.goluckyvip.com/tag/49439.html
VP直评:https://www.goluckyvip.com/tag/4944.html
众云跨境:https://www.goluckyvip.com/tag/49440.html
重点品类:https://www.goluckyvip.com/tag/49441.html
重庆品胜科技与星苹台达成合作 助力部队现代化后勤建设 :https://www.kjdsnews.com/a/1836523.html
回乡创业,不知道干什么,能否推荐几个农村老家创业的好项目?:https://www.vstour.cn/a/365177.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流