fffffffff_jj

CSS3

#1. CSS3是啥啊啊啊？

新功能：

Border radius - 允许我们为元素创建圆角。

Border images - 允许我们指定一个图像作为元素周围的边框。

Multiple backgrounds - 将多个背景应用于元素。

动画(Animations)和特效(effects)…

为了使Web开发更加简单快捷，CSS3引入了更多的新功能，其中包括：

Box Shadow (盒阴影)

使用box-shadow属性，可以通过指定颜色，大小，模糊和偏移值来将一个或多个阴影附加到元素。

Gradients (渐变)

CSS3渐变允许我们将元素的背景颜色设置为渐变。有两种类型的渐变可用：线性(Linear)和径向(Radial)。

CSS3：新功能

转换(transform) ：通过CSS3转换，我们可以移动，比例化，反过来，旋转，和拉伸元素。

动画(animation) ：CSS3中我们可以创建动画，它可以取代许多网页动画图像，Flash动画，和JAVAScripts。

 转换(transform)可以通过改变元素的属性来实现一些动画的效果

通过添加前缀，能使CSS样式在不受支持的浏览器中生效。有时候为了兼容更多的浏览器，你可能需要对同一个样式属性进行重复定义增加不同的前缀。
CSS3前缀用于区分并兼容各大主流浏览器对于CSS新功能的支持。

例如，Safari和Chrome的前缀是-webkit。 Chrome，Safari和Mozilla目前支持border-radius属性，只要它带有浏览器前缀即可生效。

要在Chrome和Safari中指定边框半径，请使用以下语法：

HTML代码：

W3cSchool

CSS代码：

div {
border :1px solid green;
-webkit-border-radius: 24px;
}

Browser	Vendor Prefix
Firefox	-moz-
Safari	-webkit-
Chrome	-webkit-
Opera	-o-
Internet Explorer	-ms

border-radius属性

通过border-radius属性可以给任何元素设置“圆角”。

HTML代码：

W3c School

CSS代码：

div {
border-radius: 20px;
background-color: green;
color: white;
}

执行结果：

border-radius的属性可以通过（左上角，右上角，右下角，左下角）的顺序进行设置。

CSS代码：

border-radius: 0 0 20px 20px;

执行结果：

 border-radius的属性值也可以是百分比。

通过border-radius创建一个圆形

通过将元素的border-radius设置成元素高度以及宽度的一半可以将元素变成圆形。

示例中矩形元素的宽度和高度均为300px。通过将border-radius设置为150px，矩形元素将变成圆形。

HTML代码：

W3c School

CSS代码：

div {
width: 200px;
height: 200px;
border-radius: 100px;
background-color: green;
color: white;
text-align: center;
}

执行结果：

box-shadow属性

box-shadow属性可以为元素增加阴影效果。

box-shadow的属性介绍（使用的时候必须按顺序设置）

box-shadow: h-shadow v-shadow blur spread color inset;

值描述
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。

HTML代码：

W3c School

CSS代码：

div {
width: 300px;
height: 100px;
background-color: #9ACD32;
box-shadow: 10px 10px #888888;
}

执行结果：

创建一个内阴影

通过设置box-shadow的inset属性可以设置内阴影。

CSS代码：

box-shadow: inset 10px 10px 5px #888888;

执行结果：

 您可以通过用逗号分隔每个阴影来同时创建内部(inset)和外部(默认为外部)阴影。

box-shadow: inset 10px 10px 5px #888888, 10px 10px 5px #888888;

如何设置多个阴影

可以通过在同一个规则中使用 “,”（逗号）来定义多个阴影。

下例中我们将通过逗号创建两个阴影。

CSS代码：

box-shadow: inset 15px 15px 5px #ddd, inset -15px -15px 5px #ddd;

执行结果：

如果我们设置了多个阴影值，这些阴影的层叠层次将会按设置的顺序排放，所以最后一个设置的阴影将会在之前所有阴影的后面。

CSS代码：

box-shadow: 0 0 10px 4px #FF6347,
0 0 10px 30px #FFDAB9,
30px 0 20px 30px #B0E0E6;

执行结果：

 上例中蓝色阴影（#B0E0E6）放置于所有阴影的后面。

透明效果

CSS3中可以通过设置RGBA来实现透明效果。

RGBA在RGB的基础上加入了Alpha通道，通过设置Alpha值可以实现透明的效果。

rgba(255, 255, 255, 0)

R：红色值。正整数 | 百分数

G：绿色值。正整数 | 百分数

B：蓝色值。正整数| 百分数

A：透明度。取值0~1之间

HTML代码：

CSS代码：

body {
background:url(“https://www.w3cschool.cn/attachments/image/20180125/1516870677823170.jpg”);
}
nav {
padding: 50px 0;
min-width: 500px;
}
nav ul {
background: linear-gradient(90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.2) 25%,
rgba(255, 255, 255, 0.2) 75%,
rgba(255, 255, 255, 0) 100%);
box-shadow: 0 0 25px rgba(0, 0, 0, 0.1),
inset 0 0 1px rgba(255, 255, 255, 0.6);
}
nav ul li {
display: inline-block;
}
nav ul li a {
padding: 10px;
color: #FFFFFF;
font-size: 18px;
font-family: Arial;
text-decoration: none;
display: block;
}

执行结果：

text-shadow属性

text-shadow属性定义一个或多个以逗号分隔的阴影效果，应用于当前元素的文本内容。

下图显示了如何应用text-shadow属性：

- 对于CSS文本阴影属性，offset-x和offset-y值是必需的。

- color值不是必需的，但由于文本阴影的默认值是透明的，除非指定颜色值，否则不会显示文本阴影。

如何设置多个文本阴影效果

text-shadow样式可以通过 “,” (逗号)分割同时创建多个阴影。

在CSS3中越先定义的阴影效果会被放置在越顶层，反之则相反。

下例为我们展示如何通过逗号创建多个阴影。

HTML代码：

W3CSCHOOL

CSS代码：

h1 {
text-shadow: 5px 10px 2px #93968f,
-3px 6px 5px #58d1e3;
}

执行结果：

如何使用伪类

CSS3中的伪类允许我们在不适用javascript等脚本的情况下去设置web页面中某些特定的元素的属性。

伪类通常以 “:”(冒号)开头。:first-child和:last-child是较为常用的伪类。

:first-child将会匹配该元素中的第一个子元素。

:last-child则反之，匹配最后一个子元素。

HTML代码：

First w3cschool

Second W3cschool

Third w3cSchool

Fourth W3cSchool

CSS代码：

#parent p:first-child {
color: green;
text-decoration: underline;
}

执行结果：

 反之同理 :last-child则是选取最后一个元素。

如何使用伪元素

伪元素用于选择元素的特定部分。

在CSS中有五个伪元素，每个都以一个双冒号(::)开头：

::first-line- 选择器中文本的第一行
::first-letter - 选择器中文本的第一个字母
::selection - 选择用户选择的元素部分
::before - 在元素之前插入一些内容
::after - 在元素之后插入一些内容

在下面的例子中，::first-line伪元素用于为文本的第一行设置样式。

HTML代码：

First w3cschool
Second W3cschool
Third w3cSchool
Fourth W3cSchool

CSS代码：

p::first-line {
color: #AE4141;
}

执行结果：

::selection 伪元素对选定的文本进行设置样式。

CSS代码：

p::selection{
background: #AE4141;
color: #fff;
}
p::-moz-selection{
background: #AE4141;
color: #fff;
}

执行结果：

 使用-moz-前缀，因为Mozilla不支持:: selection元素。

如何使用伪元素

使用::before和::after伪元素允许我们向页面添加各种各样的内容。

在下面的例子中，::before伪元素用于在列表之前添加图像。

HTML代码：

First w3cschool

Second W3cschool

Third w3cSchool

Fourth W3cSchool

CSS代码：

p::before {
content: url(“http://statics.w3cschool.cn/images/w3c/index-logo.png”);
}

执行结果：

 请注意样式中的content关键字

 反之同理，::after则会在末尾增加样式

word-wrap属性

word-wrap属性允许对长单词进行自动换行处理。

它的值可以为：

normal
break-word

HTML代码：

Firstw3cschool,SecondW3cschool,Thirdw3cSchool,FourthW3cSchool

CSS代码：

p {
width: 100px;
height: 100px;
border: 1px solid #000000;
word-wrap: normal;
}

执行结果：

接下来我们将word-wrap的属性设置为break-word，然后再看一下效果。

CSS代码：

p {
width: 100px;
height: 150px;
border: 1px solid #000000;
word-wrap: break-word;
}

执行结果：

@font-face 规则

@ font-face规则允许将自定义字体加载到网页中。

借助于此规则，设计不再局限于安装在用户计算机上的字体。

在Internet Explorer 8和更低版本中，URL必须指向Embedded OpenType（eot）文件，而Firefox，Chrome等支持True Type字体（ttf）字体和OpenType字体（otf）。

使用@font-face规则

必须使用@font-face规则声明每种形式的字体系列。

在下面的例子中，一个名为“Delicious”的自定义字体被加载并用于标题。

HTML代码：

w3cschool

CSS代码：

@font-face {
font-family: Delicious;
src: url(‘Delicious-Roman.otf’);
}
@font-face {
font-family: Delicious;
font-weight: bold;
src: url(‘Delicious-Bold.otf’);
}
h1{
font-family: Delicious, sans-serif;
}

当定义了多个@font-face规则时，Internet Explorer有一个内置的错误。如下所示使用#iefix修复了这个问题：

@font-face {
font-family: Delicious;
src: url(‘Delicious-Roman.ttf’);
src: url(‘Delicious-Roman.eot?#iefix’);
}

执行结果：

创建线性渐变

CSS3渐变(linear-gradient)使您能够显示两个或多个指定颜色之间的平滑过渡。 CSS3定义了两种类型的渐变：线性(Linear)和径向(Radial)。

为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。

在下面的示例中，使用蓝色和黑色的颜色从上到下创建线性渐变。

CSS代码：

div {
float: left;
width: 300px;
height: 100px;
margin: 4px;
color: #FFF;
background:linear-gradient(DeepSkyBlue, Black);
}

执行结果：

 该属性在Mozilla系列的浏览器中需要加入前缀(-moz)

 示例中使用了颜色名称设置颜色，你还可以使用十六进制、RGB或者HSL等来进行渐变定义

3/11
颜色停止

线性渐变可以通过","逗号分隔添加多个颜色，浏览器将由上到下的在几种颜色中生成颜色区间并生成渐变效果。

CSS代码：

div {
float: left;
width: 300px;
height: 100px;
margin: 4px;
color: #FFF;
background:linear-gradient(blue, yellow, green, pink, white);
}

执行结果：

接下来我们为每种颜色设置颜色停止

CSS代码：

div {
float: left;
width: 300px;
height: 100px;
margin: 4px;
color: #FFF;
background:linear-gradient(blue 20%, yellow 30%, green 85%);
}

执行结果：

除百分比外，还可以使用px，em等来指定颜色停止。

如果您对两种颜色使用相同的颜色停止位置，则会在它们之间创建一条清晰的线条。

渐变方向

渐变的方向是可以被改变的。

在下面的例子中，第一个渐变从左开始，向右移动; 第二个从底部到顶部。

CSS代码：

div.first {
float: left;
width: 300px;
height: 100px;
margin: 4px;
color: #FFF;
background:-webkit-linear-gradient(left, blue, green, white);
}
div.second {
float: left;
width: 300px;
height: 100px;
margin: 4px;
background:-webkit-linear-gradient(bottom, blue, green, white);
}

执行结果：

left, right, top, 和 bottom的渐变方向都是支持的，您可以根据需求自由设定。

渐变的角度

通过设置 (bottom, top, right, left, bottom right等)的值，可以改变颜色渐变的角度。

该角度被指定为在水平线和梯度线之间延伸的角度。换句话说，0deg创建一个从左到右的渐变，而90deg则创建一个从下到上的渐变。

CSS代码：

div.first {
float: left;
width: 300px;
height: 100px;
margin: 4px;
color: #FFF;
background:-webkit-linear-gradient(bottom left, blue, green, white);
}
div.second {
float: left;
width: 300px;
height: 100px;
margin: 4px;
background:-webkit-linear-gradient(100deg, blue, green, white);
}

执行结果：

重复线性渐变

repeat-linear-gradient()函数用于重复线性渐变：

CSS代码：

div {
float: left;
width: 300px;
height: 100px;
margin: 4px;
color: #FFF;
background:-webkit-repeating-linear-gradient(blue, green 20px);
}

执行结果：

<html>
<head>
       <style>
           div{
            width: 300px; 
            height: 100px;
            margin: 10px;
            color: #FFF; 
           }
        #div-1 {
 
            background:linear-gradient(DeepSkyBlue, Black);
        }
        #div-2 {
            background:linear-gradient(blue, yellow, green, pink, white);
        }
        #div-3 {
            background:-webkit-linear-gradient(left, blue, green, white);            
        }
        #div-4 {
            background:-webkit-linear-gradient(bottom right, blue, green, white);
        }
        #div-5 {
            background:-webkit-repeating-linear-gradient(blue, green 20px);
        }
       style>
head>
<body>
    <div id="div-1">w3cschool--线性渐变div>
    <div id="div-2">w3cschool--颜色停止div>
    <div id="div-3">w3cschool--渐变方向div>
    <div id="div-4">w3cschool--渐变的角度div>
    <div id="div-5">w3cschool--重复线性渐变div>
body>
html>

径向渐变

要创建径向渐变，您必须定义至少两个颜色的中止点。

径向梯度由其中心定义。

径向渐变的CSS语法如下所示：

background: radial-gradient(shape size at position, start-color, …, last-color);

值描述
shape 确定圆的类型:

ellipse (默认): 指定椭圆形的径向渐变。
circle ：指定圆形的径向渐变

size 定义渐变的大小，可能值：

farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边

position 定义渐变的位置。可能值：

center（默认）： 设置中间为径向渐变圆心的纵坐标值。
top： 设置顶部为径向渐变圆心的纵坐标值。
bottom： 设置底部为径向渐变圆心的纵坐标值。

start-color, …, last-color 用于指定渐变的起止颜色。

设置径向渐变的形状

shape参数定义形状。如果您没有定义径向渐变的形状，则默认情况下将采用椭圆值(ellipse)。

ellipse (默认): 指定椭圆形的径向渐变。
circle ：指定圆形的径向渐变

在下面的例子中，我们没有指定第一个div的径向渐变的形状，但是第二个，我们将该值设置为圆形。

CSS代码：

div.first {
height: 150px;
width: 200px;
color: #FFF;
background: -moz-radial-gradient(green, yellow, blue);
}
div.second {
height: 150px;
width: 200px;
color: #FFF;
background: -moz-radial-gradient(circle, green, yellow, blue);
}

执行结果：

径向梯度定位

本质上，我们可以使用与background-position CSS属性指定背景图像位置相同的方法来指定椭圆中心的位置。

我们可以使用关键字，(left, center right, 或者 top, center, bottom)，长度值，百分比值，像素，ems或者组合起来进行定位。

在下面的例子中，第一个渐变从左上角开始; 在第二，我们设置了5％的绿色，15％的黄色和60％的蓝色。

CSS代码：

div.first {
height: 150px;
width: 200px;
color: #FFF;
background: -webkit-radial-gradient(top left, green, yellow, blue);
}
div.second {
height: 150px;
width: 200px;
color: #FFF;
background: -webkit-radial-gradient(green 5%, yellow 15%, blue 60%);
}

执行结果：

设置颜色停留

与线性渐变一样，使用颜色指定一个颜色停止位置，并加上一个可选的停止位置，即长度或百分比值。

这里是一个简单的带有颜色停止的圆形渐变：

CSS代码：

background: -webkit-radial-gradient(circle, green 40%, yellow 50%, blue 70%);

执行结果：

<html>
<head>
       <style>
       div{
        height: 150px;
        width: 200px;
        color: #FFF;
       }
    div#div-1 {
       background: radial-gradient(green, yellow, blue);   
    }
    div#div-2 {
       background: radial-gradient(circle, green, yellow, blue); 
    }
    div#div-3 {
       background: -webkit-radial-gradient(top left, green, yellow, blue); 
    }
    div#div-4 {
       background: radial-gradient(green 5%, yellow 15%, blue 60%); 
    }
    div#div-5 {
       background: radial-gradient(circle, green 40%, yellow 50%, blue 70%);
    }
       style>
head>
<body>
    <div id="div-1">w3cschool--径向渐变div>
    <div id="div-2">w3cschool--设置径向渐变的形状div>
    <div id="div-3">w3cschool--径向梯度定位-1div>
    <div id="div-4">w3cschool--径向梯度定位-2div>
    <div id="div-5">w3cschool--设置颜色停留div>
body>
html>

background-size属性

background-size属性为CSS添加了新的功能，使我们能够使用长度或百分比来指定背景图像的大小。

CSS代码：

div {
height: 60px;
width: 228px;
border: 1px solid #000;
background: url(“https://statics.w3cschool.cn/images/w3c/index-logo.png”) no-repeat 50% 50%;
background-size: 228px 60px;
}

执行结果：

background-size属性

background-size的属性有两个关键字contain 和 cover。

contain关键字缩放图像以适应容器。

换句话说，图像会按比例增长或缩小，但宽度和高度不会超过容器的尺寸：

background-size: contain;

执行结果：

background-size也接受cover关键字。图像缩放以适应整个容器; 不过，如果长宽比不同，图像将被裁剪：

background-size: cover;

执行结果：

background-clip属性

background-clip属性指定背景的绘画区域。

该属性有三个不同的值：

border-box - （默认）背景被绘制到边框的外边缘

padding-box - 背景被绘制到填充的外边缘

content-box - 背景被绘制在内容框中

在下面的例子中，带背景剪辑的第一个div被设置为填充框; 在第二个div中它被设置为内容框。

CSS代码：

.first {
border: 2px dotted black;
padding: 20px;
background: red;
color: #fff;
background-clip: padding-box;
}
.second {
border: 2px dotted black;
padding: 20px;
background: red;
color: #fff;
background-clip: content-box;
}

执行结果：

background-clip属性对于背景图片的应用

background-clip也适用于背景图像。

CSS代码：

div {
height: 60px;
background-image: url(“https://7nsts.w3cschool.cn/images/w3c/index-logo.png”);
background-clip: content-box;
}

执行结果：

调用了background-clip的透明边框

在元素上设置透明边框会在边框下面显示元素自己的背景。

在下面的示例中，我们使用RGBA将边框设置为透明，但实际上它们显示为纯灰色。

border: 20px solid rgba(0, 0, 0, 0.3);
width:200px;
position:absolute;
top:50px;
left:50px;
background-color:white;

执行结果：

通过将background-clip属性设置为padding-box，边框将变为透明。

div {
border: 20px solid rgba(0, 0, 0, 0.3);
-moz-background-clip: padding-box;
background-clip: padding-box;
width:100%;
position:absolute;
background-color:white;
}

执行结果：

 透明效果是通过background-clip:padding-box实现的。 没有它，盒子的背景也在边界之下，使它不透明。

层叠的背景图

CSS3中支持同时使用多个背景图片。

通过","逗号分隔可以设置多个背景图。第一个图像将出现在顶部，最后一个在底部。

在下面的例子中，我们有两个背景图片：第一个是w3cschool标识（对齐底部和右侧）; 第二个是风景图像（与左上角对齐）。

CSS代码：

div {
width: 400px;
height: 300px;
background-image: url(‘https://7nsts.w3cschool.cn/images/w3c/header-logo.png’),url(‘https://7n.w3cschool.cn/attachments/image/20180125/1516870677823170.jpg’);
background-position: right bottom, left top;
background-repeat: no-repeat;
}

执行结果：

层叠的背景图

使用background-position属性可以更改背景图像的位置。

CSS代码：

执行结果：

可以通过使用background简写属性

例：background: url(w3cschool.png) right top no-repeat, url(w3cschool.jpg) left top no-repeat;

opacity属性

CSS中的opacity属性支持为元素增加一个不透明度。

下例中对同一张图片设置多种不透明度进行展示，可以明显看到差别。

CSS代码：

#img1 {
opacity: 1;
}
#img2 {
opacity: 0.5;
}
#img3 {
opacity: 0.25;
}

执行结果：

 opacity的值必须介于（0.0~1.0）之间。0.0（完全透明）、1.0（完全不透明）

在Internet Explorer中设置opacity

要让opacity属性兼容所有的IE版本，请使用filter：alpha(opacity = x) 以及opacity属性。 x可以取值从0到100。

x设置为0则是完全透明，反之设置为100是完全不透明。

例如，为了使代码能够正常的使用IE，当图像的不透明度设置为0.4时，应该如下所示：

CSS代码：

#img {
opacity: 0.4;
filter: alpha(opacity=40);
}

执行结果：

 alpha过滤器是一个仅限Microsoft的属性，而不是标准的CSS属性。

CSS3 转换

CSS3转换 (transition) 允许我们在限定的时间内从一个属性值转换到另一个属性值。

transition-property - 指定要转换的属性
transition-duration - 指定转换发生的持续时间
transition-timing-function - 指定转换的速度在其持续时间内如何变化
transition-delay - 指定过渡效果的延迟（以秒为单位）

在下面的示例中，我们将transition属性设置为5秒的持续时间转换属性，并设置ease-in定时函数，该函数用慢启动指定转换效果。

CSS代码：

transition: transform 5s ease-in;

 过渡效果可以应用于各种CSS属性，包括背景颜色，宽度，高度，不透明度等等

transition-property

在下面的例子中，div元素的宽度和高度都是100px，并有一个红色的背景。我们为width属性指定了一个过渡效果，持续时间为3秒：

CSS代码：

div {
width: 100px;
height: 100px;
background: red;
color: #fff;
transition: width 3s;
}
div:hover {
width: 250px;
}

执行结果：

如果您将光标悬停在div元素上，则会从左向右移动。

 当光标被移出元素时，它将逐渐变回原来的样式。

transition-timing-function

transition-timing-function属性指定过渡效果的速度曲线。

它可以有以下值：

ease - 动画开始缓慢，然后加速（默认值）。
ease-in - 缓步开始，然后加速，突然停止。
ease-out - 快速启动，但减速停止。
ease-in-out - 类似于ease，但是加速和减速时会有稍微的不同。
linear - 匀速转换。

最后，我们有cubic-bezier() 函数，它允许你在cubic-bezier函数中定义你自己的值。取值范围在0~1之间。

CSS代码：

transition-timing-function: cubic-bezier(0,0,1,1);

CSS3旋转

CSS3中transform(旋转)允许您翻转，旋转，缩放和倾斜元素。

transform(旋转)是一种让元素更改形状，大小和位置的效果。

CSS3支持2D和3D转换。我们来看看旋转转换：

CSS代码：

div {
width: 300px;
height: 150px;
margin-top: 25px;
background-color: red;
}

执行结果：

转换前的div元素是这样的

现在我们设置15deg的角度将div进行旋转。

div {
width: 200px;
height: 100px;
margin-top: 30px;
background-color: #32CD32;
transform: rotate(15deg);
}

执行结果：

rotate()方法根据给定的deg顺时针或逆时针旋转一个元素。

负值将导致逆时针旋转。

使用负值

如前所述，使用正值将顺时针旋转元素，使用负值将逆时针旋转元素。

CSS代码：

div.positive {
width: 200px;
height: 100px;
margin-top: 30px;
background-color: red;
transform: rotate(10deg);
}
div.negative {
width: 200px;
height: 100px;
margin-top: 30px;
background-color: red;
transform: rotate(-10deg);
}

执行结果：

transform-origin

transform-origin属性允许您更改已转换元素的位置。该属性的默认值是50%50%，对应于元素的中间。

在下面的例子中，我们将transform-origin属性和transform-rotate一起使用。 x轴（水平）的原点从左侧设定为30%。 y轴（垂直）的原点从上方设定为80%。

CSS代码：

div.empty-div {
position: relative;
height: 100px;
width: 100px;
margin: 30px;
padding: 10px;
border: 1px solid black;
}
div.green-div {
padding: 50px;
position: absolute;
background-color: #8bc34a;
border: 1px solid white;
transform: rotate(15deg);
transform-origin: 30% 80%;
}

执行结果：

0 0与左上相同，100%100%与右下相同。

transform-origin属性必须与transform属性一起使用。

translate()

translate()方法从当前位置移动一个元素（根据给定的x轴和y轴的参数）。正值会将元素向下推到其默认位置的右侧，而负值则会将元素向上并拖至其默认位置的左侧。

在下面的例子中，div元素向右移动120px，向下移动60px：

CSS代码：

div {
padding: 50px;
position: absolute;
background-color: red;
transform:translate(120px, 60px);
}

执行结果：

skew()

skew()通过给元素设置X轴和Y轴的倾斜角度值来实现倾斜。

以下示例沿着X轴将

元素倾斜45度：

CSS代码：

div {
padding: 50px;
position: absolute;
background-color: #32CD32;
transform: skew(45deg);
-webkit-transform: skew(45deg);
}

执行结果：

 如果没有指定第二个参数，则它的默认值为零。

scale()

scale()方法根据已设定的宽度和高度参数来增加或减少元素的大小。 1代表原始尺寸，2代表原始尺寸的两倍，依此类推。

在下面的例子中，我们在水平和垂直方向上将第一个div减小0.6倍，并将第二个div在水平和垂直方向上增加1.6倍。

CSS代码：

div.first {
width: 200px;
height: 100px;
background-color: red;
transform: scale(0.7, 0.7);
color:white;
}
div.second {
margin: 60px;
width: 200px;
height: 100px;
background-color: red;
transform: scale(1.5,1.5);
color:white;
}

执行结果：

 如果只传递了一个参数，则默认宽度和高度都使用该参数

多重转换

一次可以使用多个转换。同时旋转和缩放元素的大小就是一个例子。

对元素应用多个变换很简单，只是用空格分开它们。

这是一个定义了两个转换的例子：

div{
width: 200px;
height: 100px;
background-color: red;
transform: rotate(35deg) translate(120px);
-webkit-transform: rotate(35deg) translate(120px);
color:white;
}

执行结果：

CSS3动画

动画让一个元素从一种风格逐渐变为另一种风格。

您可以根据需要更改任意数量的CSS属性。

关键帧将保存元素在特定时间的样式

@keyframes规则

当您在@keyframes规则中指定CSS样式时，动画将在某些时间从当前样式逐渐变为新样式。

要使动画起作用，必须将动画绑定到元素。

以下示例将更改元素的背景颜色三次：动画完成50%，完成70%，动画完成100%时。

div {
width: 100px;
height: 100px;
background-color: red;
animation-name: w3cschool;
animation-duration: 1s;
}
@keyframes w3cschool {
0% {background-color: red;}
50% {background-color: yellow;}
70% {background-color: blue;}
100% {background-color: green;}
}

执行结果：

csc1-2

 w3cschool是为动画设置的名字，您可以设置任意的名字

@keyframes规则

作为使用百分比的替代方法，您可以使用from和to关键字，其中：

from - 为0%的起始点
to - 为100％的结束点

下面的两个例子是等价的，并产生相同的结果：

@keyframes w3cschool {
0% {background-color: red;}
100% {background-color: green;}
}

@keyframes w3cschool {
from {background-color: red;}
to {background-color: green;}
}

执行结果：

csc1-3

@keyframes规则

要使动画起作用，必须将动画绑定到元素。

在下面的例子中，动画持续一秒钟，并将红色div的背景颜色更改为绿色和蓝色。

执行结果：

css1-1

animation-name 属性指定要用于元素的动画。
animation-duration 属性指定所选动画的持续时间。

 如果未指定animation-duration属性，则动画将不起作用，因为默认值为0。

animation-name属性

animation-name属性定义要使用哪个动画。

在此示例中，动画的名称设置为w3cschool，它与定义的关键帧相匹配。

CSS代码：

div {
animation-name: w3cschool;
animation-duration: 10s;
}
@keyframes w3cschool {
from { width: 0px; }
to { width: 120px; }
}

执行结果：

csc1-4

animation-duration属性以秒为单位指定所选动画的持续时间。

如果动画名称与任何关键帧规则不匹配，则动画将不会执行。

动画属性

(animation-timing-function)动画定时功能指定动画的速度曲线。它可以有以下值：

ease - 指定一个慢启动的动画，然后快速，然后慢慢结束（默认值）
linear - 从开始到结束指定一个具有相同速度的动画
ease-in - 指定一个慢启动的动画
ease-out - 指定一个缓慢结束的动画
ease-in-out - 指定一个缓慢的开始和结束的动画
cubic-bezier(n,n,n,n) - 让你在一个cubic-bezier函数中定义你自己的值

CSS代码：

animation-timing-function: linear;

animation-delay 定义动画开始之前的延迟。

CSS代码：

animation-delay: 2s;

 animation-delay和animation-duration的属性值可以用秒(s)和毫秒(ms)来定义

更多的动画属性

animation-iteration-count属性确定动画重复的次数。

例如，您可以将动画设置为运行6次：

animation-iteration-count: 6;

为了使动画永久重复，只需使用无限值：

animation-iteration-count: infinite;

animation-direction属性指定如何应用关键帧，值可以设置为：

normal - 默认值，这意味着它从0%到100%前进。
reverse - 从100%到0%的相反方向播放关键帧
alternate - 动画首先向前，然后向后，然后向前。
alternate reverse - 动画首先倒退，然后前进，然后倒退。

 如果对animation-iteration-count的值使用0或负数，动画将永远不会启动。

动画属性

先研究一下下面的例子：

div {
animation-name: colorchange;
animation-duration: 4s;
animation-timing-function: ease-in;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: reverse;
}

可以简写上面的属性设置成同一个属性，将上面的所有效果进行合并。

div {
animation: colorchange 4s ease-in 2s infinite reverse;
}

 请注意简写后每一个属性的顺序，不能改变，否则将无法生效

3D转换

除了x轴和y轴，3D转换还引入了Z轴，这使得3D操作成为可能。

3D转换与2D转换非常相似：

通过rotateX(), rotateY() 和 rotateZ()函数以给定的度数(deg)围绕相应的轴旋转3D空间中的元素。

div.X {
transform: rotateX(160deg);
}
div.Y {
transform: rotateY(160deg);
}
div.Z {
transform: rotateZ(160deg);
}

执行结果：

 您可以使用 transform: none; 关闭元素的所有转换效果。

转换

3D转换方法允许您使用任何CSS长度单位（px,em,%等）

translateX - 水平移动元素

translateY - 垂直移动

translateZ - 移入或移出屏幕。（正值将元素移入，将负值移出）

CSS代码：

.first {
width:250px;
height:100px;
color:white;
background-color:red;
transform: translateX(29px)
translateY(5em)
translateZ(-13px);
}

执行结果：

translate3d()方法允许我们按照以下顺序同时传递x，y和z偏移量：

.first {
transform: translate3d(-25px, 4em, 15px);
}

像translate3d()方法一样，还有scale3d()和rotate3d()，它们适用于3D中的缩放和旋转元素。

perspective

perspective定义了如何渲染3D场景的深度。将视角看作从观众到物体的距离。值越大，距离越远，视觉效果越不强烈，子元素所呈现的边缘越小。

在为一个元素定义perspective属性时，它是获取perspective视图的子元素，而不是元素本身。

CSS代码：

div.empty-div {
position: relative;
height: 200px;
width: 200px;
margin: 30px;
padding: 10px;
border: 1px solid black;
perspective: 100px;
-webkit-perspective: 100px;
}
div.red-div {
padding: 60px;
position: absolute;
background-color: red;
border: 1px solid white;
transform: rotateX(45deg);
-webkit-transform: rotateX(45deg);
}

执行结果：

 perspective属性只影响3D转换的元素。

CSS3

#1. CSS3是啥啊啊啊？

W3CSCHOOL

w3cschool

动画属性

你可能感兴趣的:(Web前端)