重庆seo2017-02-04 23:08:32阅读()CSSA+ / A-
CSS3可以做动画、画简单的几何图形,只要浏览器兼容,重庆网站建设可以做出非常丰富的网页设计效果,重庆SEO吖七介绍用CSS3画三角形并实现旋转效果。
.jiao{position:relative;width:22px;height:22px;line-height:22px;} .jiao i{ position:absolute; top:10px; right:10px; width:0px; height:0px; zoom:1; font-weight:500; font-style:normal; border-color:transparent transparent #000; border-style:solid; border-width:0px 4px 4px 4px; -webkit-transition: -webkit-transform 0.2s ease-in; -moz-transition:-moz-transform 0.2s ease-in; -o-transition:-o-transform 0.2s ease-in; transition:transform 0.2s ease-in; } .jiao:hover i{ -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2); }
<div class="jiao"><i></i></div>
注意:这个效果三角形是箭头朝上,围绕着中心旋转的。
下面所说的等三角形其实并不等边,而是高度宽高比例1:1。
.jiao i{ width:0; height:0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 8px solid #000;}
.jiao i{ width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:8px solid #000;}
.jiao i{ width:0; height:0; border-top:4px solid transparent; border-right:4px solid #000; border-bottom:8px solid transparent;}
.jiao i{ width:0; height:0; border-top:4px solid transparent; border-left:4px solid #000; border-bottom:8px solid transparent;}
.jiao i{ width:0; height: 0; border-top:8px solid red; border-right:8px solid transparent;}
.jiao i{ width: 0; height:0; border-top:8px solid red; border-left:8px solid transparent;}
.jiao i{ width:0; height:0; border-bottom:8px solid red; border-left:8px solid transparent;}
.jiao i{ width:0; height:0; border-bottom:8px solid red; border-right:8px solid transparent;}
本文地址:https://www.vi586.com/web/380.html
版权声明:原创文章,版权归重庆SEO吖七所有,欢迎分享本文,支持原创,转载请保留出处