<!doctype html>
<html lang="en">
<stype type=""text/css">
.box
width:100px;
height:100px;
background-color:gold;
/在哪产生动画的时间，运动曲线。延迟
/transition:border-radius 500ms ease.width 500ms ease height 500ms ease ls,backgrund-color 500ms ese 1.5*/
transition: all 500ms ease;
.box:hover{
width:hover{
height:300px
border-radiuspx
}
</stype>
</head>
<div class="box"<.div>
</body>
</html>
圆角阴影透明度HTML
<!doctype html>
<html lang="en>
<head>
<meat charset="utf8">
<style type="text/css">
.box{
width:200px;
height:200px;
border:2px solid #000
background-color:gold
margin:50px auto 0;
/border-top-left-radius: 100px 50px;左上角为椭圆圆角/
/border-top-left-radius: 100px;
border-top-right-radius: 100px;左、右上角为正圆圆角/
/border-radius: 40px;曲率半径为40的圆角矩形/
/border-radius: 20%;最大200px，20%即40px/
border-radius: 50%;/正圆/
.box1{
width:200px;
height:400px;
background-color:gold;
margin;100px auto 0;
}
.box2{
width:200px;
height:40px;
background-color:gold;
margin: 0px 0px 20px 2px red inset;
}
body{
background-color:cyan
}
.box3{
wodth:20px;
height:200px;
background-color;gold;
margin:50px auto 0;
border: 2px solid #000
boder-radius:50%
opactype:0.3
filter:alpha(opacity=30);
text-aling:center;
line-height:200px;
}
.box4{
width;200px;
height:200px;
/背景透明/
border：2px solid rgba(255,215,0,0,
text-aling;center;
ling-height；200px
}
</style>
</head>
<div class="box"1></div>
<div class="box2"></div>
<div class="box3"</div>
< div class="box4">窗前明月光</div>.
运动曲线
<!doctype html>
<html lang="em">
<head>
<meta charset=utf8">
<stype type="text/css">
div{
width:50px;
height: 50px;
background-color:gold
maarigin-bottom:20px;
}
div:ntt-child(1){
/均速/
transtion:all ls liner;
}
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>
</head>
<body>
<div>linear</div>
<div>ease</div>
<div>ease-in</div>
<div>ease-out</div>
<div>ease-in-out</div>
<div>bezier</div>
</body>
</html>
图片文字遮绕
<!DOCTYPE html>
<html lang="en">
<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>
变形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变形</title>
<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>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
网友评论