1. 圆角_阴影_透明度
CSS3实现圆角有两种方法.,
第一种是背景图像,传统的CSS每个元素只能有一个背景图像,但是CSS3可以允许一个元素有多个背景图像.这样给一个元素添加4个1/4圆的背景图像,分别位于4个角上就可以实现圆角。
.box {
/* 首先定义要使用的4幅图像为背景图 */
background-image: url(/img/top-left.gif), url(/img/top-right.gif), url(/img/bottom-left.gif), url(/img/bottom-right.gif);
/* 然后定义不重复显示 */
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
/* 最后定义4幅图分别显示在4个角上 */
background-position: top left, top right, bottom left, bottom right;
}
第二种方法就简洁了,直接用CSS实现,不需要用图片.
.box {
/* 直接定义圆角的半径就可以了 */
border-radius: 1em;
}
当前Firefox和Safari(同一个核心的Chrome也可以)支持,若要得到IE和Opera的支持，需要使用前缀
.box {
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
}
CSS3的box-shadow属性可以直接实现阴影：
.div {
box-shadow: 2px 2px 10px #909090;
}
box-shadow有5个属性box-shadow: h-shadow v-shadow blur spread color inset;
如果要支持其它浏览器：
.div{
filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);/*ie*/
-moz-box-shadow: 2px 2px 10px #909090;/*firefox*/
-webkit-box-shadow: 2px 2px 10px #909090;/*safari或chrome*/
box-shadow:2px 2px 10px #909090;/*opera或ie9*/
}
CSS本来就是支持透明的,IE以外的浏览器是opacity属性,IE是filter:alpha.但是,这个透明度有个缺点,就是它会使应用元素的内容也会继承它,比如有一个DIV,
<div style="opacity:0.8;filter:alpha(opacity=80); font-weight: bold;">>
内容
</div>
如果像上面这样DIV的背景是透明了,但是内容两个字也透明了,这时可以用RGBa。
.alert {
rgba(0,0,0,0.8);
}
这个属性前3个属性表示颜色红,绿,蓝,第四个是透明度.红绿蓝都是0代表黑色,所以rgba(0,0,0,0.8)就是将黑色的透明度设置为0.8。
2. 运动曲线
<style type="text/css">
div{
width: 50px;
height: 50px;
background-color: gold;
margin-bottom: 20px;
}
div:nth-child(1){
/*匀速*/
transition: all 1s linear;
}
div:nth-child(2){
/*开始和结束慢速，中间加速*/
transition: all 1s ease;
}
div:nth-child(3){
/*开始慢速，结尾突然停止*/
transition: all 1s ease-in;
}
div:nth-child(4){
/*突然开始，结束时慢速*/
transition: all 1s ease-out;
}
div:nth-child(5){
/*开始和结束时慢速*/
transition: all 1s ease-in-out;
}
div:nth-child(6){
/*贝塞尔（贝兹）曲线*/
/*transition: all 1s cubic-bezier(0.250,0.250,0.750,0.750);匀速*/
/*超出再缩回的弹性效果*/
transition: all 1s cubic-bezier(0.470, -0.485, 0.460, 1.435);
}
div:hover{
width: 1000px;
}
</style>
3. 图片文字遮盖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片文字遮罩</title>
<style type="text/css">
.box{
width: 200px;
height: 300px;
margin: 50px auto 0;
border: 1px solid #000;
position: relative;
/*默认文字不可见*/
overflow: hidden;
}
.box img{
width: 200px;
height: 300px;
}
.box .pic_info{
width: 200px;
height: 200px;
background-color: rgba(0,0,0,0.5);
color: #fff;
/*定位使色块在图片正下方*/
position: absolute;
left: 0;
top: 300px;
transition: all 500ms cubic-bezier(0.470, -0.485, 0.460, 1.435);
}
.box:hover .pic_info{
/*色块上移*/
top:150px;
}
/*间距用p标签的margin，而不直接给.pic_info用padding，因为padding会改变盒子大小*/
.box .pic_info p{
margin: 20px;
line-height: 30px;
}
</style>
</head>
<body>
<div class="box">
<img src="img/location_bg.jpg" alt="玫瑰花">
<div class="pic_info">
<p>图片说明：这是一朵玫瑰花图片说明：这是一朵玫瑰花图片说明：这是一朵玫瑰花图片说明：这是一朵玫瑰花</p>
</div>
</div>
</body>
</html>
4. 二级菜单
首先在html中写出一级菜单列表，然后在每个一级菜单中再嵌套一个列表即可创建一个二级菜单。
index.html。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Title</title>
</head>
<body>
<div class="menu">
<ul>
<li><a href="">一级菜单</a>
<ul>
<li><a href="">二级菜单</a></li>
<li><a href="">二级菜单</a></li>
<li><a href="">二级菜单</a></li>
<li><a href="">二级菜单</a></li>
<li><a href="">二级菜单</a></li>
</ul> </li>
<li><a href="">一级菜单</a>
<ul> <li><a href="">二级菜单</a></li>
<li><a href="">二级菜单</a></li>
<li><a href="">二级菜单</a></li>
<li><a href="">二级菜单</a></li>
<li><a href="">二级菜单</a></li>
</ul> </li>
<li><a href="">一级菜单</a>
<ul> <li><a href="">二级菜单</a></li>
<li><a href="">二级菜单</a></li>
<li><a href="">二级菜单</a></li>
<li><a href="">二级菜单</a></li>
<li><a href="">二级菜单</a></li>
</ul> </li> </ul> </div>
</body>
</html>
接着写样式文件，主要是对列表样式和位置进行修改
*{
padding:0;
margin:0;
}
.menu ul li{
list-style: none;
background-color: burlywood;
width:120px;text-align: center;
height: 40px;position: relative
}
.menu ul li a{
text-decoration: none;
display: block;
line-height: 40px
}
.menu ul li:hover{
background-color: aqua
}
.menu ul li ul{display: none;
position: absolute;
left:120px;top:0
}
.menu ul li:hover ul{
display: block
}
5. 变形
<style type="text/css">
.box,.box2,.box3,.box4{
width: 200px;
height: 200px;
background-color: gold;
margin: 50px auto 0;
transition: all 1s ease;
}
.box:hover{
/*box的动画不会影响到box2*/
/*位移*/
transform: translate(50px,50px);
}
.box2:hover{
/*沿Z轴旋转360度*/
transform: rotate(360deg);
}
.box3:hover{
/*缩放*/
transform: scale(0.5,0.2);
}
.box4:hover{
/*斜切*/
/*transform: skew(45deg,0);*/
transform: skew(0,45deg);
}
</style>
6. 三维旋转
默认沿Z轴旋转
transform: rotate(45deg);
perspective设置透视距离，经验数值800比较符合人眼的透视效果
transform: perspective(800px) rotateX(45deg);
/*旋转方向判断
1、X轴向右、Y轴向下、Z轴向屏幕外
2、让轴向对着自己，顺时针方向就是该轴向的旋转方向*/
.box{
width: 300px;
height: 300px;
background-color: gold;
margin: 50px auto 0;
transition: all 500ms ease;
/*设置盒子按3D空间显示*/
transform-style: preserve-3d;
transform: perspective(800px) rotateY(0deg);
}
.box:hover{
/*默认沿Z轴旋转*/
/*transform: rotate(45deg);*/
/*perspective设置透视距离，经验数值800比较符合人眼的透视效果*/
/*transform: perspective(800px) rotateX(45deg);*/
transform: perspective(800px) rotateY(-45deg);
}
</style>
7. 变形中心点
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: gold;
float: left;
margin: 30px;
transition: all 500ms ease;
}
div:hover{
transform: rotate(-90deg);
}
div:nth-child(1){
/*设置变形的中心点*/
transform-origin: left center;
}
div:nth-child(2){
transform-origin: left top;
}
div:nth-child(3){
transform-origin: 50px 50px;
}
</style>
8. 背面可见
<style type="text/css">
.con{
width: 300px;
height: 300px;
margin: 50px auto 0;
border: 1px solid #000;
}
.box{
width: 300px;
height: 300px;
background-color: gold;
text-align: center;
line-height: 300px;
font-size: 50px;
transition: all 500ms ease;
/*设置盒子按3d空间显示*/
transform-style: preserve-3d;
/*设置透视距离、三维旋转的初始角度*/
transform: perspective(800px) rotateY(0deg);
/*设置盒子背面是否可见*/
backface-visibility: hidden;
}
.con:hover .box{
transform: rotateY(180deg);
}
</style>
9. 图片翻面
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>图片翻面</title>
<styletype="text/css">
.con{
width:300px;
height:272px;
margin:100px auto 0;
position:relative;
/*
以下两句是为了演示图片和文字层重叠的效果
transform-style: preserve-3d;
transform: perspective(800px) rotateY(45deg);
初始旋转45度
*/
}
.pic,.info{
width:300px;
height:272px;
position:absolute;
left:0;top:0;
/*
图片和文字背面不可见，文字初始已翻转，所以隐藏露出底层图片*/
backface-visibility:hidden;
transform-style:preserve-3d;
transform:perspective(800px)rotateY(0deg);
transition:all 500ms ease;
}
.info{
background-color:gold;
text-align:center;
line-height:272px;
/*
transform: translateZ(10px);
初始文字浮起10像素方便查看图片与文字分层的效果
*//*
初始文字翻转，鼠标移入时才翻正显示*/
transform:translateZ(2px)rotateY(180deg);
}
/*鼠标移入时图片翻为背面隐藏*/
.con:hover .pic{
transform:perspective(800px)rotateY(180deg);
}
/*鼠标移入时文字翻为正面显示*/
.con:hover .info{
transform:perspective(800px)rotateY(0deg);
}
</style>
</head>
<body>
<divclass="con">
<divclass="pic"><imgsrc="img/1.jpg"alt="玫瑰花"></div>
<divclass="info">玫瑰花的文字说明</div>
</div>
</body>
</html>
10. animation动画
动画名称、时间、曲线、延迟、播放次数、结束后是否返回、动画前后的状态
infinite不限制次数
alternate动画结束后返回，返回也算次数
animation-fill-mode 动画前后的状态
forwards动画完成保持在最后一帧
backwards在延迟时间内，在动画显示之前，应用from开始属性值（例如box宽100，from宽200，在延迟1s内显示200）
both向前和向后填充模式都被应用（例如起始按200，结束停在最后一帧）
动画暂停
animation-play-state: paused;
动画运行
animation-play-state: running;
/*定义一个动画，名称为moving*/
@keyframes moving{
/*初始状态*/
from{
width: 200px;
}
/*结束状态*/
to{
width: 500px;
}
