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变化

transform的注意事项:

  1. 变形操作不会影响到其他元素。
  2. 变形操作只能添加给块元素,但是不能添加给内联元素。
  3. 复合写法,可以同时添加多个变形操作
  4. 执行是有顺序的,先执行后面的操作,再执行前面的操作。
  5. translate会受到 rotate、scale、skew的影响
  6. 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;}

  1. animation-name: 设置动画的名字。

  2. animation-duration : 动画的持续时间

  3. animation-delay : 动画的延迟时间

  4. animation-iteration-count : 动画的重复次数 ,默认值就是1 ,infinite无限次数

  5. animation-timing-function : 动画的运动形式

注:

  1. 运动结束后,默认情况下会停留在起始位置。
  2. 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%

transform3D

  1. 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: scaleZ(.5); */
/* transform: scale3d(2,.5,2); */
/* transform: translate3d(100px,100px,100px); */
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>

效果:

  1. perspective(观察距离): 离屏幕多远的距离去观察元素,值越大幅度越小。

  2. perspective-origin : 观察基点位置,观察元素的角度。perspective-origin : top right。

  3. transform-origin: center center -50px; (Z轴只能写数值,不能写单词)

  4. transform-style : 3D空间

    flat (默认值2d)、preserve-3d (3d,产生一个三维空间)

  5. 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拓展背景样式

  1. background-size : 背景图的尺寸大小

    cover : 覆盖 ,contain : 包含

  2. background-origin : 背景图的填充位置

    padding-box (默认)

    border-box

    content-box

  3. 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线性渐变

  1. 线性渐变 -> 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

卡片材质效果:
Shanghai

《phaseless》-Pacemak1r

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;

分栏布局

  1. column-count : 分栏的个数

  2. column-width : 分栏的宽度

  3. column-gap : 分栏的间距

  4. column-rule : 分栏的边线

  5. column-span : 合并分栏

注:分栏的宽度和 分栏个数只能设置一个。

CSS3伪元素

CSS 伪元素用于设置元素指定部分的样式。

例如,它可用于:

  • 设置元素的首字母、首行的样式
  • 在元素的内容之前或之后插入内容

请注意双冒号表示法 - ::first-line 对比 :first-line

  • 在 CSS3 中,双冒号取代了伪元素的单冒号表示法。这是 W3C 试图区分伪类伪元素的尝试。

  • 在 CSS2 和 CSS1 中,伪类和伪元素都使用了单冒号语法。为了向后兼容,CSS2 和 CSS1 伪元素可接受单冒号语法。

CSS hack

什么是CSS hack

不同厂商和浏览器的版本不同(如IE6-IE11,Firefox/Safari/Opera/Chrome等),导致CSS写法不同,解析方式不同,最后在页面上显示的效果也不同。为了统一在页面上的显示效果,针对不同浏览器写相应的CSS,这种方法称为CSS hack。

CSS hack 分类

  1. CSS属性前缀法
    .elem{ _background:red; }

  2. 选择器前缀法

    *html .elem{ }

  3. IE条件注释法

    IE10以上已经不支持注释法。

详情见:史上最全的CSS hack方式一览_freshlover的专栏-CSDN博客_css hack

渐进增强和优雅降级

  1. 什么是渐进增强

在网页开发中,渐进增强认为应该专注于内容本身。一开始针对低版本的浏览器构建页面,满足最基本的功能,再针对高级浏 览器进行效果,交互,追加各种功能以达到更好用户体验,换句话说,就是以最低要求,实现最基础功能为基本,向上兼容。以css为例,以下这种写法就是渐进增强。

  1. 什么是优雅降级

在网页开发中,优雅降级指的是一开始针对一个高版本的浏览器构建页面,先完善所有的功能。然后针对各个不同的浏览器进行测试,修复,保证低级浏览器也有基本功能 就好,低级浏览器被认为“简陋却无妨 (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;
}
/*优雅降级*/