CSS3
浏览器内核
transition过渡
transition
1 2 3 4
| transition-property: all; transition-duration: 1s; transition-delay: 2s; transition-timing-function:cubic-bezier(.49,-0.75,.88,1.74);
|
transition-property : 规定设置过渡效果的CSS属性的名称。
transition-duration : 规定完成过渡效果需要多少秒或毫秒。
transition-delay : 定义过渡效果何时开始。 ( 延迟(数值为正数),也可以提前(数值为负数) )
transition-timing-function : 规定速度效果的速度曲线。

transform的注意事项:
- 变形操作不会影响到其他元素。
- 变形操作只能添加给块元素,但是不能添加给内联元素。
- 复合写法,可以同时添加多个变形操作
- 执行是有顺序的,先执行后面的操作,再执行前面的操作。
- translate会受到 rotate、scale、skew的影响
- transform-origin : 基点的位置 x y z(3d)
animaion动画
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| div { width: 100px; height: 100px; background-color: red; animation-name: example; animation-duration: 4s; }
@keyframes example { from {background-color: red; } to {background-color: yellow; width:200px;}
|
animation-name: 设置动画的名字。
animation-duration : 动画的持续时间
animation-delay : 动画的延迟时间
animation-iteration-count : 动画的重复次数 ,默认值就是1 ,infinite无限次数
animation-timing-function : 动画的运动形式
注:
- 运动结束后,默认情况下会停留在起始位置。
- keyframes : from -> 0% , to -> 100%
复合写法:animation:①②③④⑤;
1 2 3 4 5 6 7 8
| ul li:hover img{ animation: move 5s;} @keyframes move{ 0%{ transform : translate(0,0); opacity:1; } 60%{ transform : translate(0,-50px); opacity:0;} 61%{ transform : translate(0,20px);} 100%{ transform : translate(0,0); opacity:1;} }
|
animation实现动画加载效果
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| <style type="text/css"> .loading{width: 40px;height: 40px;position: relative; margin: 20px auto;} .loading .box1 ,.loading .box2{width: 100%;height: 100%;position: absolute;} .loading .box2{transform: rotate(45deg);} .box1 div ,.box2 div{width: 10px;height: 10px;background: skyblue;border-radius: 50%;position: absolute;animation: load 1.5s infinite linear;} .box1 div:nth-of-type(1) {left: 0;top: 0;animation-delay: 1.4s;} .box2 div:nth-of-type(1){left: 0;top: 0;animation-delay: 1.2s;} .box1 div:nth-of-type(2) {right: 0;top: 0;animation-delay: 1s;} .box2 div:nth-of-type(2){right: 0;top: 0;animation-delay: .8s;} .box1 div:nth-of-type(3) {right: 0;bottom: 0;animation-delay: .6s;} .box2 div:nth-of-type(3){right: 0;bottom: 0;animation-delay: .4s;} .box1 div:nth-of-type(4) {left: 0;bottom: 0;animation-delay: .2s;} .box2 div:nth-of-type(4){left: 0;bottom: 0;animation-delay: 0s;} @keyframes load{ %0{transform: scale(1);} 50%{transform: scale(0);} 100%{transform: scale(1);} } </style>
|

animation-fill-mode : 规定动画播放之前或之后,其动画效果是否可见。
none (默认值) : 在运动结束之后回到初始位置,在延迟的情况下,让0%在延迟后生效
backwards : 在延迟的情况下,让0%在延迟前生效
forwards : 在运动结束的之后,停到结束位置
both : backwards和forwards同时生效
animation-direction : 属性定义是否应该轮流反向播放动画。
alternate : 一次正向(0%-100%),一次反向(100%-0%)
reverse : 永远都是反向 , 从100%-0%
normal (默认值) : 永远都是正向 , 从0%-100%
transform:
rotateX() : 绕x轴顺时针旋转
rotateY() : 绕y轴顺时针旋转
translateZ() : 绕z轴顺时针旋转
scaleZ() : 立体元素的厚度
3d写法
scale3d() : 三个值 x y z
translate3d() : 三个值 x y z
rotate3d() : 四个值 0|1(x轴是否添加旋转角度) 0|1(y轴是否添加旋转角度) 0|1(z轴是否添加旋转角度) deg
做一个3d立方体
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| <style> *{ margin:0; padding:0;} ul{ list-style: none;} .box{ width:300px; height:300px; border:1px black solid; margin:30px auto; perspective: 200px; perspective-origin: top right;} .box ul{ width:100px; height:100px; margin:100px; position: relative; transform-style:preserve-3d; transition:2s; transform-origin: center center -50px; transform: rotate3d(1,1,1,30deg); } .box ul li{ width:100px; height:100px; position: absolute; line-height: 100px; text-align: center; color:white;font-size: 26px; opacity: 0.5; backface-visibility: hidden;} .box ul li:nth-child(1){ background:red; left: 0; top: 0;} .box ul li:nth-child(2){ background:blue; left: 100px; top: 0; transform-origin: left; transform: rotateY(90deg);} .box ul li:nth-child(3){ background:yellow; left: -100px; top: 0; transform-origin: right; transform: rotateY(-90deg);} .box ul li:nth-child(4){ background:green; left: 0; top: -100px; transform-origin: bottom; transform:rotateX(90deg);} .box ul li:nth-child(5){ background:pink; left: 0; top: 100px; transform-origin: top; transform:rotateX(-90deg);} .box ul li:nth-child(6){ background:gray; left: 0; top: 0; transform:translateZ(-100px) rotateY(180deg);} .box:hover ul{ transform: rotate3d(1,1,1,300deg);} </style>
|
效果:

perspective(观察距离): 离屏幕多远的距离去观察元素,值越大幅度越小。
perspective-origin : 观察基点位置,观察元素的角度。perspective-origin : top right。
transform-origin: center center -50px; (Z轴只能写数值,不能写单词)
transform-style : 3D空间
flat (默认值2d)、preserve-3d (3d,产生一个三维空间)
backface-visibility : 背面隐藏
hidden、visible (默认值)
旋转木马
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| <style> *{ margin:0; padding:0;} ul{ list-style: none;} img{ display: block;width:120px; height:60px;} .parent{ width:600px; height:300px; border:1px black solid; margin: 30px auto; perspective: 700px;} .parent ul{ width:45px; height:30px; margin: 100px auto; position: relative; transform-style: preserve-3d; transition: 2s;} .parent ul li{ width:100%; height:100%; position: absolute; left: 0; top: 0;} .parent ul li:nth-child(1){ transform: rotateY(0) translateZ(200px);} .parent ul li:nth-child(2){ transform: rotateY(60deg) translateZ(200px);} .parent ul li:nth-child(3){ transform: rotateY(120deg) translateZ(200px);} .parent ul li:nth-child(4){ transform: rotateY(180deg) translateZ(200px);} .parent ul li:nth-child(5){ transform: rotateY(240deg) translateZ(200px);} .parent ul li:nth-child(6){ transform: rotateY(300deg) translateZ(200px);} .parent:hover ul{ transform:rotateY(360deg);} </style>
|

CSS3拓展背景样式
background-size : 背景图的尺寸大小
cover : 覆盖 ,contain : 包含
background-origin : 背景图的填充位置
padding-box (默认)
border-box
content-box
background-clip : 背景图的裁切方式
padding-box
border-box (默认)
content-box
注:复合样式的时候,第一个是位置,第二个是裁切
图片翻转效果
1 2 3 4 5 6 7 8 9 10
| *{ margin:0; padding:0;} img{ display: block; width: 200px;height:100px;} .parent{ width:200px; height:100px; margin: 200px auto; position: relative; perspective: 300px;} .parent div{ width:100%; height:100%; position: absolute; left: 0; top: 0; backface-visibility: hidden; transition: .5s;}
.parent div:first-child{ transform: rotateY(0); } .parent div:last-child{ transform: rotateY(-180deg);}
.parent:hover div:first-child{ transform: rotateY(180deg); } .parent:hover div:last-child{ transform: rotateY(0);}
|

CSS3线性渐变
线性渐变 -> linear-gradient是值,需要添加到background-image属性上
注:渐变的0度是在页面在下边,正值会按照顺时针旋转,负值按逆时针旋转。
iconfont矢量图标库
链接: 阿里巴巴矢量图标库
图标引入
1 2
| <link rel="stylesheet" href="./css/iconfont.css"> <script src="./css/iconfont.js"></script> /*彩色图标引入js才是彩色 */
|
1 2 3
| <span class="iconfont iconDollar"></span> <span class="iconfont iconcompass"></span> <span class="iconfont iconfood-strawberry"></span>
|
text-shadow
hello world
1
| <div style="font-size:20px;text-shadow:3px 3px pink">hello world</div>
|
hello world
1
| <div style="font-size:30px;text-shadow:3px 3px skyblue">hello world</div>
|
hello world
1
| <div style="font-size:30px; color: white;text-shadow: 2px 2px 4px #000000;">hello world</div>
|
hello world
1
| <div style="font-size:30px; color: white;text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;">hello world</div>
|
hello world
1
| <div style="font-size:30px; color: pink;text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;">hello world</div>
|
box-shadow
卡片材质效果:
1 2 3 4 5 6 7 8
| <div style=" width: 250px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); text-align: center ;margin:5px auto;"> <img src="CSS3/pg.jpg" alt="pgone" style="width:100%"> <div style="padding:10px"> <p>《phaseless》-pgone</p> </div> </div>
|
box-shadow: h-shadow v-shadow blur spread color inset;
分栏布局
column-count : 分栏的个数
column-width : 分栏的宽度
column-gap : 分栏的间距
column-rule : 分栏的边线
column-span : 合并分栏
注:分栏的宽度和 分栏个数只能设置一个。
CSS3伪元素
CSS 伪元素用于设置元素指定部分的样式。
例如,它可用于:
- 设置元素的首字母、首行的样式
- 在元素的内容之前或之后插入内容
请注意双冒号表示法 - ::first-line 对比 :first-line
CSS hack
什么是CSS hack
不同厂商和浏览器的版本不同(如IE6-IE11,Firefox/Safari/Opera/Chrome等),导致CSS写法不同,解析方式不同,最后在页面上显示的效果也不同。为了统一在页面上的显示效果,针对不同浏览器写相应的CSS,这种方法称为CSS hack。
CSS hack 分类
CSS属性前缀法
.elem{ _background:red; }
选择器前缀法
*html .elem{ }
IE条件注释法
IE10以上已经不支持注释法。
详情见:史上最全的CSS hack方式一览_freshlover的专栏-CSDN博客_css hack
渐进增强和优雅降级
- 什么是渐进增强
在网页开发中,渐进增强认为应该专注于内容本身。一开始针对低版本的浏览器构建页面,满足最基本的功能,再针对高级浏 览器进行效果,交互,追加各种功能以达到更好用户体验,换句话说,就是以最低要求,实现最基础功能为基本,向上兼容。以css为例,以下这种写法就是渐进增强。
- 什么是优雅降级
在网页开发中,优雅降级指的是一开始针对一个高版本的浏览器构建页面,先完善所有的功能。然后针对各个不同的浏览器进行测试,修复,保证低级浏览器也有基本功能 就好,低级浏览器被认为“简陋却无妨 (poor, but passable)” 可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点,因此除了修复较 大的错误之外,其它的差异将被直接忽略。也就是以高要求,高版本为基准,向下兼容。同样以css为例,优雅降级的写法如下。
1 2 3 4 5 6 7
| .transition{ -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
|
1 2 3 4 5 6 7
| .transition{ transition: all .5s; -o-transition: all .5s; -moz-transition: all .5s; -webkit-transition: all .5s; }
|