——CSS3新特性（阴影、动画、渐变）
2017-09-06 16:56
447 查看
一、阴影
1.1、文字阴影
text-shadow<length>①： 第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②： 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③： 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<color>： 设置对象的阴影的颜色。
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.text{
font: bold 100px/1.5 georgia, sans-serif;
color: dodgerblue;
text-shadow: 10px 10px 50px #000;
/*text-shadow: 20px 30px 50px #000,-20px -30px 50px #f00;*/
}
</style>
</head>
<body>
<div class="text">
Shadow Text
</div>
</body>
</html>运行效果：
1.2、盒子阴影
box-shadow<length>①： 第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②： 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③： 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<length>④： 如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值
<color>： 设置对象的阴影的颜色。
inset： 设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.shadow1{
margin: 30px;
border: 10px solid #fff;
box-shadow: 10px 10px 30px 0 #1E90FF,-10px -10px 30px 0 #1E90FF;
}
.shadow2{
margin: 30px;
border: 10px solid #fff;
box-shadow: 0 0 40px 0 #1E90FF;
}
img{
width: 600px;
height: 80%;
}
</style>
</head>
<body>
<p>
<img src="img/1.jpg" class="shadow2"/>
</p>
</body>
</html>运行效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 400px;
height: 200px;
border: 20px solid rgba(0,0,255,.2);
margin: 100px;
padding: 20px;
background: url(img/7.jpg) no-repeat;
background-size:100% 100%;
background-origin:padding-box;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>运行效果：
三、伪元素
伪元素不是真的元素是通过CSS虚拟出的一个元素，CSS3的语法为了区分伪元素与伪类，使用“：：”表示，但是前期为了兼容“：”仍然可以使用。
3.1、before
在应用样式的元素内的前部虚拟一个元素可以指定元素的内容与样式。示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1 {
width: 300px;
height: 140px;
border: 5px solid lightcoral;
}
a{
color:#2e6da4;
text-decoration: none;
}
#div1:before {
content: '这是before伪元素的内容';
display: block;
color: white;
background: lightgreen;
}
#link1:before {
content: attr(href);
}
#link2:before {
content: url(img/4.jpg);
}
</style>
</head>
<body>
<div id="div1">
<hr />
</div>
<p>
<a href="http://www.cnblogs.com" id="link1">博客园</a>
</p>
<p>
<a href="http://www.cnblogs.com/zhangyongl/" id="link2">张永林 - 博客园</a>
</p>
</body>
</html>效果：
注意：
a)、本质上并不支持伪元素的双冒号(::)写法，而是忽略掉了其中的一个冒号，仍以单冒号来解析，所以等同变相支持了E::after。
b)、不支持设置属性position, float, list-style-*和一些display值，Firefox3.5开始取消这些限制。
c)、IE10在使用伪元素动画有一个问题：
.test:hover {}
.test:hover::after { /* 这时animation和transition才生效 */ }需要使用一个空的:hover来激活
3.3、清除浮动
方法一：.clearfix:before, .clearfix:after {
content:"";
display:table;
}
.clearfix:after{
clear:both;
overflow:hidden;
}
.clearfix{
*zoom:1;
}方法二：
.clearfix {
*zoom: 1;
/*在旧版本的IE浏览器缩放大小，触发haslayout（类似BFC）*/
}
.clearfix:after {
/*伪元素，在应用该元素后添加一个伪元素*/
content: "";
/*内容为空*/
display: table;
/*BFC，清除内部浮动*/
clear: both;
/*清除外部浮动*/
}
4.1、border-radius 圆角
示例代码：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>border-radius</title>
<style type="text/css">
#div1 {
width: 300px;
height: 180px;
margin: 100px;
padding: 10px;
border: 5px solid lightgreen;
/*border-radius: 20px; /*4个角水平与垂直都为10px*/
/* border-radius: 30px 0 30px 0; 上右下左4个角*/
/*border-radius: 190px; 4个角圆角是高宽一半*/
border-radius: 165px 105px;
}
</style>
</head>
<body>
<div id="div1">
border-radius: 165px 105px;
</div>
</body>
</html>运行效果：
五、变形 transform
5.1、rotate()2D旋转
transform:rotate(<angle>)angle是角度的意思，单位可以是：
deg 度（Degrees）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box-wrapper {
width: 200px;
height: 200px;
border: 5px dashed lightgreen;
padding: 5px;
margin: 50px;
}
.box {
width: 200px;
height: 200px;
background: lightblue;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="box-wrapper">
<div class="box">
</div>
</div>
transform: rotate(45deg);
</body>
</html>效果：
5.2、设置原点 transform-origin
transform-origin用于设置变形时的原点，从5.1可以看出转动时默认的原点在中心，这里使用该属性修改原点位置。
View
Code
5.3、平移 translate()
transform：translate(x,y) = translate(<translation-value>[,<translation-value>]?)，指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0 。示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box-wrapper {
width: 200px;
height: 200px;
border: 5px dashed lightgreen;
padding: 5px;
margin: 50px 0 0 150px;
}
.box {
width: 200px;
height: 200px;
background: lightblue;
transform: translate(50%,-50px);
}
</style>
</head>
<body>
<div class="box-wrapper">
<div class="box">
</div>
</div>
</body>
</html>
5.4、缩放 scale
transform:scale(x,y)scale()： 指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box-wrapper {
width: 200px;
height: 200px;
border: 5px dashed lightgreen;
padding: 5px;
margin: 50px 0 0 150px;
}
.box {
width: 200px;
height: 200px;
background: lightblue;
transform: scale(0.5,1.5); /*宽度缩小到1半，高度放大到1.5倍*/
}
</style>
</head>
<body>
<div class="box-wrapper">
<div class="box">
</div>
</div>
</body>
</html>
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#demo{
margin:200px auto;
background-color: #FFFFFF;
border-width:2px;
border:2px solid #000;
height: 110px;
width: 90px;
position: relative;
}
#demo:after {
content: '';
display: block;
position: absolute; /*在这里要使用绝对定位*/
top: 20px;
width: 20px;
height: 20px;
border: 1px solid;
right: -12px;
border-bottom-color: white;
border-left-color: white;
transform: rotate(45deg);
background-color: #FFFFFF;
}
</style>
</head>
<body>
<div id="demo">
</div>
</body>
</html>
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box {
width: 500px;
height: 200px;
background: lightblue;
font: 43px/200px "microsoft yahei";
color: darkblue;
text-align: center;
margin: 0 auto;
text-shadow: 0 1px 1px #fff;
position: relative;
}
.box:before,
.box:after {
content: ' ';
position: absolute;
bottom: 10px;
left: 5px;
width: 50%;
height: 20%;
box-shadow: 0 10px 20px #ccc;
transform: rotate(-3deg);
z-index: -1;
}
.box:after {
left: auto;
right: 5px;
transform: rotate(3deg);
}
</style>
</head>
<body>
<div class="box">
Hello World By CSS3
</div>
</body>
</html>运行效果：
六、渐变
示例代码：<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>linear-gradien
4000
t</title>
<style>
.box {
height: 200px;
width: 200px;
float: left;
margin: 20px;
}
#div1{
background: linear-gradient(orange,navy);
/*从上到下橙色到蓝色渐变*/
}
#div2{
background: linear-gradient(lightgreen,lightcoral 40%,lightblue);
/*绿红蓝从上到下渐变，中间的40%表示红出现的位置，如果不指定则均匀分配*/
}
#div3{
background: linear-gradient(0deg,red 20%,yellow 50%,green 80%);
/*0度角方向（从下向上）*/
}
#div4{
background: linear-gradient(45deg,blue,pink);
/*目标方向45度角方向*/
}
#div5{
background: linear-gradient(to top left,#000,#fff);
/*从右下到左上的渐变*/
}
span{
font: 50px/50px "microsoft yahei";
color: linear-gradient(to left,red,blue);
/*前景色无效,背景有效*/
}
</style>
</head>
<body>
<div class="box" id="div1">
</div>
<div class="box" id="div2">
</div>
<div class="box" id="div3">
</div>
<div class="box" id="div4">
</div>
<div class="box" id="div5">
</div>
<span>
Hello Linear-Gradient
</span>
</body>
</html运行效果:
如果要考虑兼容IE浏览器，可以使用IE中特有的滤镜。
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr="orange", EndColorStr="navy"); /*老IE中的渐变*/
七、透明
7.1、opacity
设置对象的不透明度。opacity：<number>
<number>： 使用浮点数指定对象的不透明度。值被约束在[0.0-1.0]范围内，如果超过了这个范围，其计算结果将截取到与之最相近的值。 0表示完全透明，1表示完全不透明。
示例：
View
Code
作业：
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script>
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
<style>
#div1{
position:fixed;
z-index:-1;
}
#div1 > img {
height:100%;
width:100%;
border:0;
}
body{ font-family: 'Heiti SC', 'Microsoft YaHei';
width: 1350px;
height: 560px;
position: relative;
text-align: center;
}
#alert{
display: none;
position: absolute;
width: 80%;
height: 50%;
background: white;
margin-top: 10%;
margin-left: 10%;
}
#harder{
height: 30%;
line-height: 80px;
font-size: 30px;
color: white;
width: 100%;
background: #ff5f19;
}
#harder span{
float: right;
margin-top: 10px;
margin-right: 10px;
cursor: pointer;
}
#center{
height: 40%;
line-height: 80px;
font-size: 25px;
width: 100%;
}
button,input{
background: #ff5f19;
border: 0;
border-radius: 38px;
color: white;
font-size: 20px;
width: 170px;
height: 60px;
}
button:hover{
opacity: 0.8;
}
input{
height: 40px;
width: 160px;
}
</style>
</head>
<body>
<div id="div1"><img src="img/14.jpg" id="img"/></div>
<input type="button" value="登陆" id="Login" />
<div class="alert">
<div id="alert">
<div id="harder">
提示
<span class="glyphicon glyphicon-remove-circle" id="span"></span>
</div>
<div id="center">
账户或密码输入错误
</div>
<div id="bottom">
<button type="button" id="btn" >确定</button>
</div>
</div>
</div>
<script>
var Login =document.getElementById("Login");
var span =document.getElementById("span");
var alert =document.getElementById("alert");
var img =document.getElementById("img");
var btn =document.getElementById("btn");
Login.onclick=function () {
img.style.opacity='0.8';
alert.style.display='block';
}
span.onclick=function btn() {
img.style.opacity='1';
alert.style.display='none';
}
btn.onclick=function btn() {
img.style.opacity='1';
alert.style.display='none';
}
</script>
</body>
</html>运行效果：
八、动画
8.1、过渡动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动画</title>
<style>
body {
padding: 100px;
}
#img1 {
/*所有过渡动画的时间都为1秒*/
transition: all 1s;
}
#img1:hover {
transform: rotate(360deg);
}
#img2 {
/*当动画针对width时时间为0.5秒，高度为2秒*/
transition: width 0.5s, height 2s ease-in;
}
#img2:hover {
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<img src="img/7.jpg" id="img1" />
<img src="img/7.jpg" id="img2" width="300" height="200" />
</body>
</html>运行效果：
8.2、帧动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动画</title>
<style>
/*定义动画 名称为animate1*/
@keyframes animate1 {
/*第一帧样式*/
from {
margin-left: 100%;
background: orangered;
}
/*动画执行到30%时样式*/
30% {
background: lightblue;
width: 200px;
height: 200px;
border-radius: 100px;
}
/*动画执行到60%时样式*/
60% {
background: lightgreen;
width: 300px;
height: 300px;
border-radius: 150px;
}
/*结束时样式*/
to {
margin-left: 0;
}
}
#div1 {
width: 100px;
height: 100px;
border-radius: 50px;
background: lightcoral;
/*调用定义的动画，infinite无限制执行，linear动画函数线性动画*/
animation: animate1 2s infinite linear;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>运行效果：
infinite表示动画一直执行，如果只想执行一次，可以删除该关键字。虽然多数动画使用CSS3可以完成，但是动画非常耗资源，特别是在移动端，不建议多用。更加复杂的动画可以使用Canvas。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS3与页面布局学习总结（六）——CSS3新特性（阴影、动画、渐变、变形、伪元素等）
- [持续更新]CSS3学习笔记（二）渐变&圆角&阴影&变换&动画
- CSS3 Pie工具可以让IE6至IE8版本实现大多数的CSS3修饰特性，如圆角、阴影、渐变等
- CSS3--多列布局、边框颜色、圆角、渐变效果、阴影反射
- css3实现渐变、阴影、超出指定文本省略号显示等一些效果
- Chrome 39 CSS3 渐变动画BUG
- css3选择器、背景、边框、渐变、阴影以及文本效果的介绍及实现
- css3-渐变，动画过度，2d基础
- [转]使IE浏览器支持CSS3属性（圆角、阴影、渐变）
- css3新特性 过渡 动画 2d 3d转换
- 中文前端UI框架Kit（五）支持Css全属性/Css Hack/Css3属性/颜色渐变的Javascript动画，相比JQuery和Mooltools，功能更为强大，这不是标题党!
- css3 阴影box-shadow transition渐变 transform变换
- css3渐变，圆角，阴影
- 浅谈CSS3新特性——文字阴影text-shadow、阴影box-shadow和倒影box-reflect
- CSS3 font-feature-settings特性减除字体动画震颤效果实例分享
- PIE使IE支持CSS3圆角盒阴影与渐变渲染（转载）
- css3文字渐变和阴影、图片边框和边框阴影
- css3的动画特性
- Westciv Tools主要为CSS3提供了渐变gradients、盒子阴影box-shadow、变形transform和文字描边四种在线生成效果的工具
- 创建CSS3警示框渐变动画