• 昔日本土最佳中锋终破门 激活他国家队俱乐部都受益 2019-06-19
  • 反俄毒招!世界杯遇尴尬:假球票1万余张,涉案金额1亿美金! 2019-06-14
  • 萨拉赫,你再不上 埃及队就要回家啦 2019-06-14
  • 中外学者齐聚拉萨 首届中国西藏拉萨阿里象雄文化国际学术研讨会召开 2019-06-09
  • 一语惊坛(5月22日):精忠报国是每一个热血青年的夙愿! 2019-06-06
  • 世界是动态发展与平衡的,不会静止不变,指导社会的理论也是不断发展完善的,由相对真理向绝对真理发展接近,这话不是我臆造的,来自学的大学课本根据马克思著作编写... 2019-06-06
  • 重庆 民俗文化进校园(我们的节日·端午) 2019-06-04
  • 太阳是宇宙加油站?不明物体多次靠近“加油”,看清后屏住呼吸 2019-06-04
  • 代理加盟 2019全新代理计划 赚钱+省钱双管齐下,独立平台,丰厚利润!

    您现在的位置: 波西亚时光ns > 站长学院 > 建站教程 >

    波西亚时光蛛丝在哪:CSS3各种角度三角形可旋转动画

    来源:未知 发布时间:2019-03-30热度: ℃我要评论
    CSS3可以做动画、画简单的几何图形,只要浏览器兼容,重庆网站建设可以做出非常丰富的网页设计效果,重庆SEO九蜘蛛介绍用CSS3画三角形并实现旋转效果。 CSS样式部分 .jiao{position:relative;width:22px;height:22px;line-height:22px;}.jiao i{position:absolute;top:...

    波西亚时光ns www.1y2c.com

           CSS3可以做动画、画简单的几何图形,只要浏览器兼容,重庆网站建设可以做出非常丰富的网页设计效果,秀站网秀站网介绍用CSS3画三角形并实现旋转效果。

    css3各种角度三角形动画

    CSS样式部分

    .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);
    }

    HTML部分

    <p class="jiao"><i></i></p>

           注意:这个效果三角形是箭头朝上,围绕着中心旋转的。

    其他三角形绘制方法

           下面所说的等三角形其实并不等边,而是高度宽高比例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;}

    本文地址://www.1y2c.com/news/1378.html

      责任编辑:波西亚时光ns

      发表评论

      评论列表(条)

      • 昔日本土最佳中锋终破门 激活他国家队俱乐部都受益 2019-06-19
      • 反俄毒招!世界杯遇尴尬:假球票1万余张,涉案金额1亿美金! 2019-06-14
      • 萨拉赫,你再不上 埃及队就要回家啦 2019-06-14
      • 中外学者齐聚拉萨 首届中国西藏拉萨阿里象雄文化国际学术研讨会召开 2019-06-09
      • 一语惊坛(5月22日):精忠报国是每一个热血青年的夙愿! 2019-06-06
      • 世界是动态发展与平衡的,不会静止不变,指导社会的理论也是不断发展完善的,由相对真理向绝对真理发展接近,这话不是我臆造的,来自学的大学课本根据马克思著作编写... 2019-06-06
      • 重庆 民俗文化进校园(我们的节日·端午) 2019-06-04
      • 太阳是宇宙加油站?不明物体多次靠近“加油”,看清后屏住呼吸 2019-06-04
      • 扑克牌背面认牌技巧 部落冲突腾讯官方正版 pc蛋蛋官方网站 圣诞大镖客走势图 fifa手游新引擎什么阵容好 探灵笔记怎么看楼层 新濠江堵经 牌九变牌教学 山西11选5开奖奖金 美国篮球巨星乔丹 dnf51套 龙之谷手游礼包 魔术师 2011法兰克福 天天炫斗官网 黑龙江22选5行列图