1.transform变形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform变形</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: red;
margin:50px auto 0;
transition: all 500ms ease;
}
.box1:hover{
transform: rotate(360deg);
}
.box2:hover{
transform: scale(0.5,0.2);
}
.box3:hover{
transform: skew(0,45deg);
}
.box4:hover{
transform: translate(50px,50px);
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
2. 变形的中心点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变形中心点</title>
<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(2){
transform-origin: left top;
}
div:nth-child(3){
transform-origin:50px 50px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
3. 元素的旋转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素旋转</title>
<style type="text/css">
.box{
width:300px;
height: 300px;
background-color: gold;
margin: 50px auto 0;
transition: all 500ms ease;
}
.box{
/*transform:rotate(45deg); 默认沿z轴旋转*/
/*perspective设置透视距离，经验数800px比较符合人眼的透视效果*/
/*transfor:*/
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
4.图片文字的遮罩
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片文字的遮罩</title>
<style type="text/css">
.img{
width: 122px;
height: 122px;
border: solid 1px black;
position: relative;
overflow: hidden;
}
.img:hover{
}
.pic{
width: 122px;
height:122px;
}
.pic-info{
width:122px;
/*height: 100px;*/
background-color: rgba(234,234,234,0.5);
position: absolute;
left: 0;
top: 122px;
transition: all 500ms ease;
}
.img:hover .pic-info{
top: 60px;
}
p{
margin: 5px;
line-height: 30px;
}
</style>
</head>
<body>
<div class="img">
<img src="img/拳头.jpg" alt="这是一张拳头的图片" class="pic">
<div class="pic-info">
<p>图片说明：这是一张画的图片</p>
</div>
</div>
</body>
</html>
5. 背面可见
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背面可见</title>
<style type="text/css">
.box{
width: 300px;
height: 300px;
background-color: gold;
text-align: center;
line-height: 50px;
font-size: 50px;
transition: all 500ms ease;
transform-style: preserve-3d;
transform:perspective(800px) rotateY(0deg);
/*设置盒子备件是否可见*/
backface-visibility: hidden;
}
.con{
width: 300px;
height: 300px;
margin: 50px auto 0;
border:1px solid black;
}
.con:hover .box{
}
</style>
</head>
<body class="con">
<div class="box">div元素</div>
</body>
</html>
6. css3 过渡动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3过渡动画</title>
<style type="text/css">
.box{
width:100px;
height: 100px;
background-color: gold;
/*transition: width 500ms ease,height 500ms ease 500ms,background-color 500ms ease 1s,border-radius 500ms ease,border-radius 500ms ease 1s;*/
/*产生动画的位置 动画消耗的时间 运动的曲线 延迟的时间(不写就是不延迟) 用逗号分隔，写下一个*/
transition: all 500ms ease;
}
.box:hover{
width: 500px;
height: 300px;
background-color: #abf;
border-radius: 50px; /*圆角*/
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
7. 简单的制作了一个 loading 的动态图
图片.png
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>loading标志</title>
<style type="text/css">
.big{
width: 700px;
height: 300px;
border: solid 1px black;
text-align: center;
position: relative;
margin: 50px auto 40px;
}
.one{
display: inline-block;
margin: 50px auto 40px;
width: 20px;
height: 90px;
margin-right: 30px;
border-radius: 50px;
background-color: red;
animation: loading 1s ease infinite alternate;
transform: scaleY(1);
}
.two{
background-color: orange;
animation: loading 1s ease 0.2s infinite alternate;
}
.three{
background-color: yellow;
animation: loading 1s ease 0.6s infinite alternate;
}
.four{
background-color: green;
animation: loading 1s ease 0.8s infinite alternate;
}
.five{
background-color: blue;
animation: loading 1s ease 1s infinite alternate;
}
@keyframes loading{
from{
transform: scaleY(1);
}
to{
transform: scaleY(0.38);
}
}
p{
position: absolute;
top: 180px;
left: 310px;
}
</style>
</head>
<body>
<div class="big">
<div class="one"></div>
<div class="one two"></div>
<div class="one three"></div>
<div class="one four"></div>
<div class="one five"></div>
<p>loading……</p>
</div>
</body>
</html>
