<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>淘宝三角做法css2D转换 transform/transition</title>
<style type="text/css">
body,ul,li{margin:0,padding:0;border:0;}
ul{margin:100px;list-style:none;}
a{font-size:14px;color:#3c3c3c;
text-decoration:none;}
ul li{width:100px;height:35px; background:#9C9;line-height:35px;border:1px solid #foo;}
ul li a{margin-right:10px;float:left;
height:35px;
line-height:35px;
}
/*ul li i{
        display:block;
        height:6px;
        width:6px;
        float:right;
        margin:15px 0;
        position:relative;
background:#66C; 
        transition:transform 0.3s ease 0.1s;
        -webkit-transition:-webkit-transform 0.3s ease 0.1s;
        -ms-transition:-ms-transform 0.3s;
        -moz-transition:-moz-transform 0.3s ease 0.1s;
        -o-transition:-o-transform 0.3s ease 0.1s;
        
        }*/
ul li i{ 
display:block; 
height:10px; 
width:10px;
float:right;
margin:15px 4px;
position:relative;
transition:transform 0.3s ease 0.1s;
-webkit-transition:-webkit-transform 0.3s ease 0.1s;
-ms-transition:-ms-transform 0.3s ease 0.1s;
-moz-transition:-moz-transform 0.3s ease 0.1s;
-o-transform:-o-transform 0.3s ease 0.1s;
background:url(../images/3.png) no-repeat;
}
ul li:hover i{
transform:rotate(180deg);
-ms-transform:rotate(180deg); /* Internet Explorer */
-moz-transform:rotate(180deg); /* Firefox */
-webkit-transform:rotate(180deg); /* Safari 和 Chrome */
-o-transform:rotate(180deg); /* Opera */
}
/*
em,span{
width:0;
height:0;
border-style:solid dashed dashed dashed;
border-color:transparent;
border-width:3px;
position:absolute;
top:0;
left:0;
}
em{border-top-color:#f00;top:1px;}
span{border-top-color:#fff;}*/
</style>
</head>
<body>
<ul>
<li><a href="#">我的淘宝<i><em></em><span></span></i></a></li>
</ul>
</body>
</html>

淘宝三角做法防CSS2D转换的更多相关文章

  1. vue+vue-cli+淘宝lib-flexible做移动端自适应

    总结用vue+vue-cli+淘宝lib-flexible做移动端自适应方案: 1.安装淘宝lib-flexible npm install lib-flexible --save 2.在入口文价ma ...

  2. 利用Python爬虫爬取淘宝商品做数据挖掘分析实战篇，超详细教程

    项目内容 本案例选择>> 商品类目:沙发: 数量:共100页  4400个商品: 筛选条件:天猫.销量从高到低.价格500元以上. 项目目的 1. 对商品标题进行文本分析 词云可视化 2. ...

  3. 仿照淘宝首页做的一个高度伪对齐demo

    功能就是当右边高度没有左边高的情况下做的一些处理,由于本人技术有限,不兼容所有浏览器, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra ...

  4. 淘宝可伸缩高性能互联网架构HSF(转)

    文章转自http://blog.csdn.net/hpf911/article/details/14165865 时间过得很快,来淘宝已经两个月了,在这两个月的时间里,自己也感受颇深.下面就结合淘宝目 ...

  5. HBase快照、Snapshots 淘宝快照

    淘宝在2011年之前所有的后端持久化存储基本上与我们所认知的意义,  大量存于 mysql .少量 oracle mongdb 等,使用mysql 的原因相信各位也很熟悉了.  开源.社区庞大.解决方 ...

  6. 阿里淘宝的S1级别bug，到底是谁的锅？

    3月25日,阿里的淘宝APP在IOS系统上出现BUG: 在打开淘宝APP以后,用户就会收到系统弹窗通知:“您使用的程序是测试/内测版本,将于当地时间2020-03-28到期,到期后将无法使用,请尽快下 ...

  7. 网站性能测试PV到TPS的转换以及TPS的波动和淘宝性能测试要点

    <淘宝性能测试白皮书V0.3> 性能测试的难点不在于测,在于测出的数据和实际的对照关系,以及测试出来的数据对性能的评估(到底是好,还是不好). 淘宝性能测试白皮书,解决了我的4个问题:1. ...

  8. vue2.0 类淘宝不同屏幕适配及px与rem转换问题

    因为项目需要,vue开发项目,必须将已写的以px为单位的部分,转换为rem.要是全部转换,这大量的计算量,哪怕是sublime Text 的cssrem插件,也是一个庞大的工作量.所以,直接使用插件没 ...

  9. 淘宝、网易移动端 px 转换 rem 原理，Vue-cli 实现 px 转换 rem

       在过去的一段时间里面一直在使用Vue配合 lib-flexible和px2rem-loader配合做移动端的网页适配.秉着求知的思想,今天决定对他的原理进行分析.目前网上比较主流使用的就是淘宝方 ...

随机推荐

  1. Java开发中经典的小实例-(随机数)

    import java.util.Random;//输出小于33的7个不相同的随机数public class probability {    static Random random = new R ...

  2. [SAP ABAP开发技术总结]数据输入输出转换、小数位/单位/货币格式化

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  3. zoj 1199 几何公式推导

    链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=199 Point of Intersection Time Limit:  ...

  4. 用Hbase存储Log4j日志数据：HbaseAppender

    业务需求: 需求很简单,就是把多个系统的日志数据统一存储到Hbase数据库中,方便统一查看和监控. 解决思路: 写针对Hbase存储的Log4j Appender,有一个简单的日志储存策略,把Log4 ...

  5. ZOJ-2364 Data Transmission 分层图阻塞流 Dinic+贪心预流

    题意:给定一个分层图,即只能够在相邻层次之间流动,给定了各个顶点的层次.要求输出一个阻塞流. 分析:该题直接Dinic求最大流TLE了,网上说采用Isap也TLE,而最大流中的最高标号预流推进(HLP ...

  6. 基于Spark ALS构建商品推荐引擎

    基于Spark ALS构建商品推荐引擎   一般来讲,推荐引擎试图对用户与某类物品之间的联系建模,其想法是预测人们可能喜好的物品并通过探索物品之间的联系来辅助这个过程,让用户能更快速.更准确的获得所需 ...

  7. nodejs学习笔记<三>关于路由(url)

    在网站开发中,路由的设置非常关键.nodejs对路由处理封装了一个比较全面的模块. 来认识下url模块 1)在命令行(cmd)可以直接 node —> url 可直接查看url模块的所有方法. ...

  8. oracle 10g正则表达式 REGEXP_LIKE 用法

    ORACLE中的支持正则表达式的函数主要有下面四个:1,REGEXP_LIKE :与LIKE的功能相似2,REGEXP_INSTR :与INSTR的功能相似3,REGEXP_SUBSTR :与SUBS ...

  9. maven初试2

    1.1.建立Hello项目 1.首先建立Hello项目,同时建立Maven约定的目录结构和pom.xml文件 Hello | --src | -----main | ----------java | ...

  10. Android热修复

    https://github.com/WeMobileDev/article/blob/master/%E5%BE%AE%E4%BF%A1Android%E7%83%AD%E8%A1%A5%E4%B8 ...