一、圆角、rgba
设置某一个角的圆角，比如设置左上角的圆角：
border-top-left-radius:30px 60px;
border-top-left-radius: 60px;
同时分别设置四个角：
border-radius:30px 60px 120px 150px;
设置四个圆角相同：
border-radius:50%;
①盒子透明度表示法：
.box { opacity:0.1; /* 兼容IE */ filter:alpha(opacity=10); }
②rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>透明度</title> <style type="text/css"> body{ background: url(images/banner01.jpg); } .box{ width: 300px; height: 100px; background-color: #000; color: #fff; text-align: center; line-height: 100px; font-size: 30px; /*设置透明度*/ opacity: 0.3; /*兼容IE*/ filter: alpha(opacity=30); } .box2{ width: 300px; height: 100px; /*设置盒子透明但文字不会变透明*/ background-color: rgba(0,0,0,0.3); color: #fff; text-align: center; line-height: 100px; font-size: 30px; margin-top: 50px; } </style> </head> <body> <div class="box">这是一个div</div> <div class="box2">这是一个div</div> </body> </html>
二、transition动画
1、transition-property 设置过渡的属性，比如：width height background-color
2、transition-duration 设置过渡的时间，比如：1s 500ms
3、transition-timing-function 设置过渡的运动方式，常用有 linear(匀速)|ease(缓冲运动)
4、transition-delay 设置动画的延迟
5、transition: property duration timing-function delay 同时设置四个属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transition动画</title> <style type="text/css"> .box{ width: 100px; height: 100px; background-color: gold; transition: width 1s ease,height 1s ease 1s,background-color 1s ease 2s; } .box:hover{ width: 600px; height: 600px; background-color: red; } </style> </head> <body> <div class="box"></div> </body> </html>
如果是多个属性同时的动画，可以合并成下面语句：
.box{ width: 100px; height: 100px; background-color: gold; /*transition: width 1s ease,height 1s ease,background-color 1s ease;*/ transition: all 1s ease; } .box:hover{ width: 600px; height: 600px; background-color: red; }
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片说明</title> <style type="text/css"> .pic_con{ width: 200px; height: 300px; margin: 50px auto 0; position: relative; overflow: hidden; } .pic_info{ position: absolute; left: 0; top: 300px; width: 180px; height: 100px; background-color: rgba(0,0,0,0.3); color: #fff; padding: 10px; transition: all 500ms ease; } .pic_con:hover .pic_info{ top:180px; } </style> </head> <body> <div class="pic_con"> <a href=""><img src="images/banner01.jpg" alt=""></a> <div class="pic_info"> <h3>标题</h3> <p>文字说明的内容文字说明的内容</p> </div> </div> </body> </html>
三、transform变换
1、translate(x,y) 设置盒子位移
2、scale(x,y) 设置盒子缩放
3、rotate(deg) 设置盒子旋转
4、skew(x-angle,y-angle) 设置盒子斜切
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>变换</title> <!-- 变换不是动画 --> <style type="text/css"> .box{ width: 200px; height: 200px; border: 3px solid #000; background-color: gold; margin: 50px auto 0; /*translate位移的性能比定位要高*/ transform: translate(0px,0px); transition: all 1s ease; } .box:hover{ transform: translate(30px,30px); } .box2{ width: 200px; height: 200px; border: 3px solid #000; background-color: gold; margin: 50px auto 0; /*放大一倍*/ transform: scale(1,1); transition: all 1s ease; } .box2:hover{ transform: scale(2,2); } .box3{ width: 200px; height: 200px; border: 3px solid #000; background-color: gold; margin: 50px auto 0; /*旋转 默认绕着z轴旋转*/ transform: rotate(0deg); transition: all 1s ease; } .box3:hover{ transform: rotate(45deg); } .box4{ width: 200px; height: 200px; border: 3px solid #000; background-color: gold; margin: 50px auto 0; /*斜切 不好控制一般不用*/ transform: skew(0,0); transition: all 1s ease; } .box4:hover{ transform: skew(45deg,0deg); } </style> </head> <body> <div class="box"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> </body> </html>
5、tranform-origin 设置变形的中心点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transform</title> <style type="text/css"> div{ width: 200px; height: 200px; border: 3px solid #000; background-color: pink; margin: 30px; float: left; transition: all 500ms ease; } .box2{ transform-origin: left center; } .box3{ transform-origin: left top; } .box4{ transform-origin: 50px 50px; } div:hover{ transform: rotate(45deg); } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> </body> </html>
6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示
7、translateX、translateY、translateZ 设置三维移动
8、rotateX、rotateY、rotateZ 设置三维旋转
9、scaleX、scaleY、scaleZ 设置三维缩放
10、perspective 设置透视距离
11、backface-visibility 设置盒子背面是否可见