概述
CSS2新特性
文本阴影
鼠标悬停的动态效果
边框圆角
盒子阴影
盒子倾斜。。。等等
浏览器
浏览器
圆角边框
圆角边框
圆角边框例子
圆角边框例子
sublime快捷方式
阴影
阴影举例
水平偏移与垂直偏移若是正数向右向下偏移，负数向左向上偏移；模糊距离值越大阴影范围越大。
阴影举例
bxsh扩展会扩展出来前缀。
文本与文字的属性
text-shadow属性
阴影大小是可以省略的，如果省略了阴影大小那么阴影和文字是一样的大小
应用
第一个是一个文字描边效果，阴影不便宜，大小根据经验设置；第二个是一个文字凸起效果，文字是白色，阴影是黑色。
word-wrap属性
举例
@font-face规则
2D转换
可以对元素进行旋转、缩放、移动、拉伸
transform属性
rotate（角度deg）进行旋转的函数
scale（x，y）进行缩放的函数
旋转
角度值是正数就是顺指针旋转，负数就是逆时针旋转
缩放
应用
当鼠标悬停在盒子上的时候图片会放大。
过渡transition
从一个状态过渡到另一个状态
过渡
应用
鼠标悬停时文字和背景会发生一个过渡。
动画animation @keyframes规则
若干种状态之间的一个转换
动画
应用
mycolor时动画的名字，而0%、30%等时关键帧的名字
属性取值
最后的animation-play-state属性可以设置当鼠标悬停时动画播放running，鼠标移开时动画停止播放paused
3D变换
3D变换
透视：近大远小的一个效果
三维旋转-无透视
三维旋转-有透视
3D变换
如果我们需要3D变换的元素有好几个，每个元素放在一个父容器里，然后将这些父容器放在舞台里。
透视值相当于眼睛距离舞台的距离，值越大透视效果越不明显，值越小透视效果越明显。
应用
在鼠标悬停时，匀速做一个3D变换（有过渡，有3D变换）。
网友评论