CSS3实现小特效
CSS
目录
1CSS实现特效LOGO1
2CSS实现提示三角3
3CSS实现桃心 5
1CSS实现特效logo
CSS实现闪动logo,该特效使用了CSS3中transform变形处理和transition渐变动画效果来实现logo的幻影闪动效果。
transform和transition只有比较新的浏览器支持该属性功能的使用，如safari3.1，chrome8，firefox4，Opera10等以上版本支持。不同浏览器属性格式不一样，如safari和chrome书写为：“-webkit-transform”，firefox书写为 “-moz-transform” ,Opera书写为：“-o-transform”，其他大多数浏览器则不需要加前缀“transform”即可，transtion的书写格式同理。
Transform可以实现页面元素如文字或图像的缩放，旋转，倾斜，移动这四种类型的变形处理。
（1）缩放（scale）
使用scale来实现页面元素的缩放处理功能，如transform:scale(1.2);表示放大1.2倍。
（2）旋转（roate）
使用roate来实现页面元素的旋转处理功能，如transform:rotate(45deg);表示将页面选中元素顺时针旋转45度角。
（3）倾斜（skew）
使用skew来实现页面元素的倾斜处理功能，如transform:skew(30deg,40deg);表示水平方向上倾斜30度，垂直方向上倾斜40度。
（4）移动（translate）
使用translate来实现页面元素的移动处理功能，如translate(50px,100px);表示水平方向上移动50个像素，垂直方向上移动100个像素。
Transform中可以几种属性结合使用，但是要注意使用的先后顺序不同，页面显示的效果也会不一样。
Transition可以实现页面元素从一个属性值平滑过渡到另一个属性值，如是某元素的背景颜色平滑过渡到另一种颜色。transition主要包含四个属性值：执行变换的属性：transition-property,变换延续的时间：transition-duration,在延续时间段，变换的速率变化transition-timing-function,变换延迟时间transition-delay。
transition-timing-function的值允许你根据时间的推进去改变属性值的变换速率，transition-timing-function有6个可能值：
1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
6、cubic-bezier：（该值允许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。
其是cubic-bezier为通过贝赛尔曲线来计算“转换”过程中的属性值，如下曲线所示，通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。初始默认值为default.
其他几个属性值速率图为
如：transition:all 200ms ease-in-out;表示所有的属性在200ms平滑到事件的另一个属性值，变换速率为先加速后减速。
2CSS实现提示三角
CSS可以通过border-color来实现三角特效。如下：
***********************
未完待续
