CSS3

概述

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变换)。

你可能感兴趣的:(CSS3)