1、伪元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪元素选择器</title>
<style>
span::before{
content: "楚乔是";
}
span::after{
content: "的";
}
</style>
</head>
<body>
<span>燕洵</span>
<span>燕洵</span>
<div></div>
</body>
</html>
2、文字对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字对齐</title>
<style>
div{
width: 300px;
height: 30px;
border: 1px solid red;
line-height: 30px;
}
span{
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
background-color: pink;
}
</style>
</head>
<body>
<div>
<span></span>文字
</div>
</body>
</html>
3、体会过渡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>体会过渡</title>
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
/* transition: width 0.5s ease 0s,height 0.3s;多组属性用逗号分隔 */
transition:all 0.5s;/* 过渡写到本身上 谁做过渡动画,写到谁身上 */
}
div:hover{
width: 800px;
height: 300px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
注:transition属性是用来设置多长时间来达到指定的长度与宽度
4、京东效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>京东效果</title>
<style>
div{
width: 183px;
height: 130px;
border: 1px solid red;
overflow: hidden;
/* hidden内容会被修剪,并且其余内容是不可见的 */
}
div img{
width: 193px;
height: 130px;
transition:all 0.4s;
}
div:hover img{
margin-left: -10px;
}
</style>
</head>
<body>
<div>
<img src="../img/1.jpg" alt="loading" />
</div>
</body>
</html>
5、京东侧边
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>京东侧边</title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.subnav{
margin: 100px auto;
width: 20px;
}
.subnav li{
width: 20px;
height: 20px;
margin: 3px 0;
background-color: pink;
position: relative;
}
.subnav div{
position: absolute;
right: 0;
top: 0;
height: 20px;
width: 0;
background-color: purple;
transition: all 0.6s;
z-index: -1;
}
.subnav li:hover div{
width: 100px;
}
</style>
</head>
<body>
<div class="subnav">
<ul>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
</ul>
</div>
</body>
</html>
6、变形之位移
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变形之位移</title>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
/* transition过渡 */
/* transition:translate(100px,0) x 100 y 是 0 */
transition: all 0.4s;
}
div:hover{
transform: translate(100px,100px);
/* 转移后的新位置 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
7、让定位的盒子水平居中和垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>让定位的盒子水平居中和垂直居中</title>
<style>
div{
position: absolute;
width: 200px;
height: 200px;
background-color: pink;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
/* transition 如果x-50% 跟父亲没关系,是走自己盒子宽度的一半 */
/* transition 如果y-50% 跟父亲没关系,是走自己盒子高度的一半 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
8、变形之缩放
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变形之缩放</title>
<style>
div{
width:200px;
height:200px;
background-color: pink;
}
div:hover{
transform: scale(0.8);//高度省略默认和宽度一起
/* transform: scale(0.8,1); */
/* transform: scale(1.0.8); */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
9、新浪图片放大效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>新郎图片放大效果</title>
<style>
div{
width: 386px;
height: 260px;
overflow: hidden;
}
div img{
transition: all;0.5s
}
div:hover img{
transform: scale(1.1);
}
</style>
</head>
<body>
<div>
<img src="../img/1.jpg" height="260" width="386" alt="loading"/>
</div>
</body>
</html>
10、变形之旋转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变形之旋转</title>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transition: all 0.6s;
}
div:hover{
transform: rotate(360deg);
}
img{
transition: all 0.6s;
}
img:hover{
transform: rotate(360deg);
}
</style>
</head>
<body>
<div>123</div>
<img src="../img/1.jpg" width="585" height="585" alt="loading" />
</body>
</html>
11、变形之旋转原点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变形之旋转原点</title>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transition: all 0.6s;
transform-origin: right bottom;
/* 设置旋转中心点为右下角 */
}
div:hover{
transform: rotate(360deg);
}
</style>
</head>
<body>
<div>123</div>
</body>
</html>
12、旋转的楚乔
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>旋转的楚乔</title>
<style>
div{
width: 250px;
height: 170px;
border: 1px solid red;
margin: 150px auto;
position: relative;
}
div img{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: all 0.6s;
transform-origin: top right;
}
div:hover img:first-child{
transform: rotate(60deg);
}
div:hover img:nth-child(2){
transform: rotate(120deg);
}
div:hover img:nth-child(3){
transform: rotate(180deg);
}
div:hover img:nth-child(4){
transform: rotate(240deg);
}
div:hover img:nth-child(5){
transform: rotate(300deg);
}
div:hover img:nth-child(6){
transform: rotate(360deg);
}
</style>
</head>
<body>
<div>
<img src="../img/2.jpg" alt="loading"/>
<img src="../img/3.jpg" alt="loading"/>
<img src="../img/4.jpg" alt="loading"/>
<img src="../img/5.jpg" alt="loading"/>
<img src="../img/6.jpg" alt="loading"/>
<img src="../img/11.jpg" alt="loading"/>
</div>
</body>
</html>
13、过渡给颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>过渡给颜色</title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
transition: all 2s;
}
div:hover{
background-color: blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
14、变形-倾斜
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变形-倾斜</title>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
transform: skew(30deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
15、鼠标经过显示阴影
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标经过显示阴影</title>
<style>
div{
width: 150px;
height: 300px;
border: 1px solid #ccc;
background-color: pink;
transition: all 0.6s;
}
div:hover{
box-shadow: 0 10px 20px rgba(0,0,0,0.5);
transform: translateY(-20px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>