用CSS3做网页中的小三角，以及transition的用法
Posted 蓝色幻想728
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用CSS3做网页中的小三角，以及transition的用法相关的知识，希望对你有一定的参考价值。
自开了博客园已经有2周了吧，虽然转载了一些觉得比较有用的文章之外还没有开始写自己的一些学习记录，那就从今天开始。
目前看了妙味的不少视频，有css+html，js的基础和中级也都看完了，作业也都做了，css3的部分也看过了，但是觉得讲得不太好，全部都是点到为止。无意中找到了传智播客的视频讲了一些css3的小技巧，今天就写一下用CSS3做网页中的小三角。
大致网上关于小三角的做法无非三种：
- 直接用背景图片，这个没什么好说的；
- 用块元素设置宽高都为0，三角的高用一条边框宽度，其他三条边框用dashed以及颜色透明即可，这个会形成一个完整的实心三角形；
- 参照2的方法，用两个三角重叠并且一个往上动几个像素，然后设置颜色和背景一致，就会形成一个条状，没有底边的三角
第二种三角：
<style> div{ width: 0;height: 0; border-width: 10px; border-color: black transparent transparent transparent; border-style: solid dashed dashed dashed;//这步是为了兼容ie6，因为ie6还不支持边框颜色transparent }</style><body> <div></div></body>第三种三角：顺便加入了鼠标移入时旋转功能，使用了transition
<style>ul,li{ list-style: none;}li{ border: 1px solid black; overflow: hidden; line-height: 32px;}a{ text-decoration: none; float: left;}i{ float: left; margin:13px 0 0 5px; position: relative; width: 6px; //需要给2个三角包一个i标签，这样转动的时候不会偏移 height: 6px;}li:hover i{ transform: rotate(180deg);}em,span{ border: 3px solid black; border-color: transparent transparent transparent transparent; border-style: solid dashed dashed dashed; width: 0; height: 0; position: absolute;}span{ border-top-color: white; //span写在后面，所以同样和em有了position之后，它就能覆盖在em上面，而把它上边宽改成和背景一样的颜色，再往上移动一个像素就能形成一条线框的三角形，当然也可以让em往下移动1px}em{ top: 1px; border-top-color: gray;}</style></head><body> <ul> //用em和span分别做2个三角 <li><a href="#">我的淘宝</a><i><em></em><span></span></i></li> </ul></body>上面这个例子还用到了transition，顺便复习一下。
transition的简写方式一般放4个参数
- 需要运动的属性，这点要注意，一般是写hover里的那个，上面这个例子就是写了transform，如果hover里的都要运动，可以直接写all
- 运动花的时间，单位是秒s
- 运动方式linear匀速，ease, ease-in, ease-out, ease-in-out
- 何时开始，单位是秒s
transition还要注意的地方有：
- 一般都是和hover配合使用；
- 能用css3来写的动画就不要用js来写了；
transition是写在要运动的那个元素里，而不是写在它的hover里
下面这个简单的例子是用transition和雪碧图来改变元素背景图
i{ width: 50px; height: 75px; display: block; background: url(1.jpg) no-repeat 0 0; transition: background-position 0.5s ease-in 0s; //注意这里改变的是背景图的位置，起到的效果就是背景图慢慢往上移动有一个过程}i:hover{ background-position:0 -80px ;}</style><script></script></head><body> <i></i></body>以上是关于用CSS3做网页中的小三角，以及transition的用法的主要内容，如果未能解决你的问题，请参考以下文章