CSS3圆角、阴影、rgba
-
CSS3圆角
-
设置某一个角的圆角，比如设置左上角的圆角：
- border-top-left-radius:30px 60px;
- 同时分别设置四个角： border-radius:30px 60px 120px 150px;
- 设置四个圆角相同：border-radius:50%;
-
CSS3阴影
- box-shadow：h-shadow v-shadow blur spread color inset;
- 分别设置阴影：水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影
<style type="text/css">
.box{
width:200px;
height:50px;
background-color:gold;
/* box-shadow:10px 10px 5px 2px pink inset; */
box-shadow:10px 10px 5px 2px pink;
}
</style>
......
<div class="box"></div>
rgba（新的颜色值表示法）
- 盒子透明度表示法：opacity:0.1;filter:alpha(opacity=10)（兼容IE）;
- rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度
CSS3 transition动画
-
transition-property 设置过渡的属性，比如：width height background-color
-
transition-duration 设置过渡的时间，比如：1s 500ms
-
transition-timing-function 设置过渡的运动方式
-
linear 匀速
-
ease 开始和结束慢速
-
ease-in 开始是慢速
-
ease-out 结束时慢速
-
ease-in-out 开始和结束时慢速
-
cubic-bezier(n,n,n,n)
- 比如：cubic-bezier(0.845, -0.375, 0.215, 1.335)
- 曲线设置网站：https://matthewlein.com/ceaser/
-
transition-delay 设置动画的延迟
-
transition: property duration timing-function delay 同时设置四个属性
举例：
<style type="text/css">
.box{
width:100px;
height:100px;
background-color:gold;
transition:width 300ms ease,height 300ms ease 300ms,background-color 300ms ease 600ms;
}
.box:hover{
width:300px;
height:300px;
background-color:red;
}
</style>
......
<div class="box"></div>
CSS3 transform变换
- translate(x,y) 设置盒子位移
.box:hover{
/*box的动画不会影响到box2*/
/*位移*/
transform: translate(50px,50px);
}
- scale(x,y) 设置盒子缩放
.box3:hover{
/*缩放*/
transform: scale(0.5,0.2);
}
- rotate(deg) 设置盒子旋转
.box2:hover{
/*沿Z轴旋转360度*/
transform: rotate(360deg);
}
- skew(x-angle,y-angle) 设置盒子斜切
.box4:hover{
/*斜切*/
/*transform: skew(45deg,0);*/
transform: skew(0,45deg);
}
- transform-style flat | preserve-3d 设置盒子是否按3d空间显示
/*设置盒子按3d空间显示*/
transform-style: preserve-3d;
- perspective 设置透视距离
- translateX、translateY、translateZ 设置三维移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素旋转</title>
<style type="text/css">
/*旋转方向判断
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>
</head>
<body>
<div class="box"></div>
</body>
</html>
- rotateX、rotateY、rotateZ 设置三维旋转
- scaleX、scaleY、scaleZ 设置三维缩放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背面可见</title>
<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;
/*设置透视距离、三维旋转的初始角度*/
transform: perspective(800px) rotateY(0deg);
}
.con:hover .box{
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="con">
<div class="box">div元素</div>
</div>
</body>
</html>
- tranform-origin 设置变形的中心点
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;
}
- backface-visibility 设置盒子背面是否可见
/*设置盒子背面是否可见*/
backface-visibility: hidden;
举例：（翻面效果）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>翻面</title>
<style type="text/css">
.box{
width:300px;
height:272px;
margin:50px auto 0;
transform-style:preserve-3d;
position:relative;
}
.box .pic{
width:300px;
height:272px;
position:absolute;
background-color:cyan;
left:0;
top:0;
transform:perspective(800px) rotateY(0deg);
backface-visibility:hidden;
transition:all 500ms ease;
}
.box .back_info{
width:300px;
height:272px;
text-align:center;
line-height:272px;
background-color:gold;
position:absolute;
left:0;
top:0;
transform:rotateY(180deg);
backface-visibility:hidden;
transition:all 500ms ease;
}
.box:hover .pic{
transform:perspective(800px) rotateY(180deg);
}
.box:hover .back_info{
transform:perspective(800px) rotateY(0deg);
}
</style>
</head>
<body>
<div class="box">
<div class="pic"><img src="images/location_bg.jpg"></div>
<div class="back_info">背面文字说明</div>
</div>
</body>
</html>
CSS3 animation动画
-
@keyframes 定义关键帧动画
-
animation-name 动画名称
-
animation-duration 动画时间
-
animation-timing-function 动画曲线
-
linear 匀速
-
ease 开始和结束慢速
-
ease-in 开始是慢速
-
ease-out 结束时慢速
-
ease-in-out 开始和结束时慢速
-
steps 动画步数
-
animation-delay 动画延迟
-
animation-iteration-count 动画播放次数 n|infinite
-
animation-direction
-
normal 默认动画结束不返回
-
Alternate 动画结束后返回
-
animation-play-state 动画状态
-
paused 停止
-
running 运动
-
animation-fill-mode 动画前后的状态
-
none 不改变默认行为
-
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
-
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）
-
both 向前和向后填充模式都被应用
-
animation:name duration timing-function delay iteration-count direction;同时设置多个属性
举例：（人物走路动画）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>走路动画</title>
<style type="text/css">
.box{
width:120px;
height:180px;
border:1px solid #ccc;
margin:50px auto 0;
position:relative;
overflow:hidden;
}
.box img{
display:block;
width:960px;
height:182px;
position: absolute;
left:0;
top:0;
animation:walking 1.0s steps(8) infinite;
}
@keyframes walking{
from{
left:0px;
}
to{
left:-960px;
}
}
</style>
</head>
<body>
<div class="box"><img src="images/walking.png"></div>
</body>
</html>
动画中使用的图片如下：
260
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
