一、CSS3新特性_圆角(border-radius)
使用 CSS3 border-radius
属性,你可以给任何元素制作 "圆角"
border-radius
属性,可以使用以下规则:
- 四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角
- 三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角
- 两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角
- 一个值: 四个圆角值相同
注意:
当border-radius:50%; 的时候,正方形变成圆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
margin: 20px;
float: left;
}
.box1{
width: 100px;
height: 100px;
background-color: red;
border-radius: 10px 20px 30px 40px;
}
.box2{
width: 100px;
height: 100px;
background-color: red;
border-radius: 10px 20px 40px;
}
.box3{
width: 100px;
height: 100px;
background-color: red;
border-radius: 20px 40px;
}
.box4{
width: 100px;
height: 100px;
background-color: red;
border-radius: 20px;
}
/* 当border-radius:50%; 的时候,正方形变成圆 */
.box5{
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
<div class="box5">box5</div>
</body>
</html>
二、CSS3新特性_阴影
阴影分类:盒阴影(box-shadow)和字阴影(text-shadow)
盒阴影
box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow:10px 10px 5px 5px red;
inset:用在盒内阴影上
值 | 描述 |
---|---|
h-shadow | 必选,水平阴影的位置 |
v-shadow | 必选,垂直阴影的位置 |
blur | 可选,模糊距离 |
spread | 可选,阴影的尺寸 |
color | 可选,阴影的颜色 |
inset | 可选,外部引用修改为内部阴影 |
字阴影
text-shadow: h-shadow v-shadow blur color;
text-shadow:10px 10px 5px green;
值 | 描述 |
---|---|
h-shadow | 必选,水平阴影的位置 |
v-shadow | 必选,垂直阴影的位置 |
blur | 可选,模糊距离 |
color | 可选,阴影的颜色 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
margin: 0 auto;
overflow: hidden;
clear: both;
}
div{
margin: 30px;
float: left;
}
.box1{
width: 100px;
height: 100px;
background-color: red;
box-shadow: 10px 10px 10px 3px #c00;
}
.box2{
width: 100px;
height: 100px;
background-color: aqua;
box-shadow: 0px 0px 5px grey;
}
.box3{
width: 100px;
height: 100px;
background-color: chartreuse;
box-shadow: 0px 10px 10px yellow;
}
.box4{
width: 100px;
height: 100px;
background-color: pink;
box-shadow: 10px 0px 5px violet;
}
.box5{
width: 100px;
height: 100px;
background-color: chartreuse;
box-shadow: 0px 0px 10px 10px green inset;
}
h1{
font-size: 40px;
text-shadow: 10px 10px 5px rgba(0,0,0,0.5);
}
p{
font-size: 40px;
text-shadow: 10px 10px 5px #c00;
}
</style>
</head>
<body>
<div class="container">
<div class="box1">两个方向阴影</div>
<div class="box2">四个方向阴影</div>
<div class="box3">三个方向阴影</div>
<div class="box4">三个方向阴影</div>
<div class="box5">盒内阴影</div>
</div>
<h1>杜恒中-duhengzhong</h1>
<p>尚学堂-itbaizhan</p>
</body>
</html>
三、CSS3新特性_背景渐变
CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。
为了创建一个渐变,你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以设置一个起点和一个方向(或一个角度)
background: linear-gradient(direction,color-stop1,color-stop2, ...);
默认情况:从上到下过渡
第一种:background:linear-gradient(to right,red,green);第二种:background:lineargradient(135deg,red,orange);
使用角度:(单位deg)
如果你想要在渐变的方向上做更多的控制,你可以定义一个角度,而不用预定义方向(to bottom、to top、to right、to left、to bottom right,等等)
角度是指水平线和渐变线之间的角度,逆时针方向计算。换句话说,0deg 将创建一个从下到上的渐变,90deg 将创建一个从左到右的渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
margin: 0 auto;
overflow: hidden;
clear: both;
}
div{
margin: 20px;
float: left;
}
.box1{
width: 100px;
height: 100px;
background: linear-gradient(red,green);
}
.box2{
width: 100px;
height: 100px;
background: linear-gradient(to right,red,green);
}
.box3{
width: 100px;
height: 100px;
background: linear-gradient(45deg,pink,yellow);
}
.box4{
width: 100px;
height: 100px;
background: linear-gradient(-135deg,greenyellow,orange);
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
</body>
</html>
四、CSS3新特性_转换
transform
属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜
translate()方法,
根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动
值 | 描述 |
---|---|
translate(x,y) | 定义移动 |
移动:transform:translate(200px,100px);
rotate()
方法,在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。
值 | 描述 |
---|---|
rotate(angle) | 定义旋转,在参数中规定角度 |
旋转:transform: rotate(45deg)
scale()
方法,该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数
值 | 描述 |
---|---|
scale(x,y) | 定义缩放转换 |
缩放:transfrom:scale(1.5,1.5)
skew()方法,
包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜
值 | 描述 |
---|---|
skew(x,y) | 定义倾斜 |
倾斜:transform:skew(10deg,10deg)
3D转换(不常用)
CSS3 允许您使用 3D 转换来对元素进行格式化
- rotateX()
- rotateY()
rotateX方法
rotateX()
方法,围绕其在一个给定度数X轴旋转的元素
.box {
width: 100px;
height: 80px;
background-color: rgba(255, 0, 0, .8);
transform: rotateX(120deg);
}
rotateY方法
rotateY()
方法,围绕其在一个给定度数Y轴旋转的元素
.box {
width: 100px;
height: 80px;
background-color: rgba(255, 0, 0, .8);
transform: rotateY(120deg);
}
转换用的最多的页面效果就是鼠标悬停有向上或者向下的效果
transform:translate3d(0,-2px,0):鼠标悬停,向上移动2px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
margin: 0 auto;
}
div{
margin: 20px;
float: left;
}
.box1{
width: 100px;
height: 100px;
background-color: pink;
/* 移动:transform:translate(200px,100px); */
transform: translate(50px,100px);
}
.box2{
width: 100px;
height: 100px;
background-color: orange;
/* 旋转:transform: rotate(45deg) */
transform: rotate(45deg);
}
.box3{
width: 100px;
height: 100px;
background-color: greenyellow;
/* 缩放:transfrom:scale(1.5,1.5) */
transform: scale(1.5,1.5);
font-size: 40px;
}
.box4{
width: 100px;
height: 100px;
background-color: red;
/* 倾斜:transform:skew(10deg,10deg) */
transform: skew(10deg,10deg);
}
</style>
</head>
<body>
<div class="container">
<div class="box1">移动</div>
<div class="box2">旋转</div>
<div class="box3">缩放</div>
<div class="box4">倾斜</div>
</div>
</body>
</html>
五、CSS3新特性_过渡(transition)
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果
通过过渡transition
,可以让web前端开发人员不需要javascript
就可以实现简单的动画交互效果
使用:
transition:all .2s ease;
值 | 描述 |
---|---|
transition | 简写属性,用于在一个属性中设置四个过渡属性 |
transition-property | 过渡属性:all|transition-property |
transition-duration | 定义过渡效果花费的时间,默认是0 |
transition-timing-function | 过渡效果的时间曲线:ease|ease-in|ease-out|ease-in-out |
transition-delay | 规定过渡效果何时开始,默认是0 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 327px;
height: 250px;
background-color: #8ac007;
transition: all .2s ease;
}
.box:hover{
box-shadow: 0px 1px 5px 1px orange;
transform: translate3d(0,-2px,0);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
六、CSS3新特性_动画(animation)
动画是使元素从一种样式逐渐变化为另一种样式的效果
您可以改变任意多的样式任意多的次数
请用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%
0% 是动画的开始,100% 是动画的完成。
@keyframes创建动画
使用@keyframes
规则,你可以创建动画
@keyframes name {
from|0%{
css样式
}
percent{
css样式
}
to|100%{
css样式
}
}
name:动画名称,开发人员自己命名;
percent:为百分比值,可以添加多个百分比值;
animation执行动画
box{
animation: name duration timing-function delay iteration-count direction;
animation:breath 1s linear infinite alternate;}
值 | 描述 |
---|---|
name | 设置动画的名称 |
duration | 设置动画的持续时间 |
timing-function | 设置动画效果的速率(如下) |
delay | 设置动画的开始时间(延时执行) |
iteration-count | 设置动画循环的次数,infinite为无限次数的循环 |
direction | 设置动画播放的方向(如下) |
animation-play-state | 控制动画的播放状态:running代表播放,而paused代表停止播放 |
timing-function值 | 描述 |
---|---|
ease | 逐渐变慢(默认) |
linear | 匀速 |
ease-in | 加速 |
ease-out | 减速 |
ease-in-out | 先加速后减速 |
direction值 | 描述 |
---|---|
normal | 默认值为normal表示向前播放 |
alternate | 动画播放在第偶数次向前播放,第奇数次向反方向播放 |
使用动画实现跑马灯的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
width: 800px;
height: 200px;
margin: 40px auto;
overflow: hidden;
clear: both;
}
.box1{
width: 100px;
height: 100px;
background-color: greenyellow;
border-radius: 50%;
float: left;
margin-right: 30px;
animation: breath 1s linear infinite alternate;
}
.box2{
width: 100px;
height: 100px;
background-color: coral;
border-radius: 50%;
float: left;
margin-right: 30px;
animation: breath 1s linear infinite alternate;
}
.box3{
width: 100px;
height: 100px;
background-color: green;
border-radius: 50%;
float: left;
margin-right: 30px;
animation: breath 1s linear infinite alternate;
}
.box4{
width: 100px;
height: 100px;
background-color: yellow;
border-radius: 50%;
float: left;
margin-right: 30px;
animation: breath 1s linear infinite alternate;
}
.box5{
width: 100px;
height: 100px;
background-color: #cccc89;
border-radius: 50%;
float: left;
margin-right: 30px;
animation: breath 1s linear infinite alternate;
}
@keyframes breath {
10%{
box-shadow: 0px 0px 10px 10px violet;
}
20%{
box-shadow: 0px 0px 10px 10px greenyellow;
}
30%{
box-shadow: 0px 0px 10px 10px green;
}
40%{
box-shadow: 0px 0px 10px 10px orange;
}
50%{
box-shadow: 0px 0px 10px 10px pink;
}
60%{
box-shadow: 0px 0px 10px 10px red;
}
70%{
box-shadow: 0px 0px 10px 10px blue;
}
80%{
box-shadow: 0px 0px 10px 10px yellow;
}
90%{
box-shadow: 0px 0px 10px 10px fuchsia;
}
99%{
box-shadow: 0px 0px 10px 10px darkorchid;
}
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</div>
</body>
</html>
七、绘制特殊图形
绘制三角形(宽度和高度为零,绘制向右的箭头,给left加属性,transparent是透明的意思)
.box {
width: 0;
height: 0;
border-top: 50px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid blue;
}
绘制梯形(高度为0,设置宽度)
.box {
width: 100px;
height: 0;
border-bottom: 80px solid red;
border-left: 50px solid green;
border-right: 50px solid yellow;
}