最近仿造了小米官网写了一遍，可以说是完全把官网给写完了。
官网中有一个log切换的动态效果，有点把我卡住了找方法找了许久，然后用一个简单的方法实现了：
先了解一下before和after两个属性选择器：
before：在元素之前插入内容；
after：在元素之后插入内容；
两个属性可以添加图片类型，可以添加文字，可以添加div块，所以在网页的应用范围很广。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css3小米log切换</title>
<style>
.log{
/*
设置外部盒子高55宽55文本居中。背景颜色为橙色，溢出隐藏，居中
*/
text-align: center;
cursor: pointer;
overflow: hidden;
width: 55px;
height: 55px;
background-color:rgb(255,103,0);
margin:40px auto;
}
/*
在div前插入一个宽为49 高49 top 3 left -49 将home.png移出log盒子，
设置过度时间0.2s，背景图片为home.png
*/
.log::before{
width: 49px;
height: 49px;
content: "";
position: relative;
top: 3px;
left:-49px;
background: url('img/mi-home.png') center;
display: inline-block;
transition:all .2s ease 0s;
}
/*
在div前插入一个宽为49 高49 top -49 left 0 将log.png移出log盒子，
设置过度时间0.2s，背景图片为log.png
*/
.log::after{
width: 49px;
height: 49px;
content: "";
position: relative;
top: -49px;
left: 0;
background: url('img/mi-logo.png') center;
display: inline-block;
transition:all .2s ease 0s;
}
/*
悬浮对两张图片进行偏移，达到切换效果
*/
.log:hover::before{
left: 0;
}
.log:hover::after{
left: 50px;
}
</style>
</head>
<body>
<div class="log"></div>
</body>
</html>在使用这两个属性时：content 是必不可少的。
除此之外：在写这个的过程中我对选择器有了更深一层的理解：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
设置div1的样式
*/
.div1 {
width: 400px;
height: 200px;
background-color: lawngreen;
}
/*
设置div2的样式
*/
.div2 {
width: 400px;
height: 200px;
background-color: lightcoral;
}
/*
设置div3的样式
*/
.div3{
width: 400px;
height: 200px;
background-color: olivedrab;
}
/*
设置div1的子div样式并隐藏
*/
.div1>div{
width: 200px;
height: 100px;
background-color: rgb(18, 53, 150);
display: none;
}
/*
设置div2的子div样式并隐藏
*/
.div2>div {
width: 200px;
height: 100px;
background-color: rgb(165, 24, 24);
display: none;
}
/* 第一个悬浮父元素修改其子元素div样式使子div显现 */
.div1:hover>div{
display: inline-block;
}
/* 悬浮第一个div1修改其兄弟元素div2的背景颜色*/
.div1:hover + .div2{
background-color: mediumvioletred;
}
/* 悬浮第一个div1修改其同级的div3的boder */
.div1:hover ~ .div3{
border: 10px solid rgb(138, 46, 46);
}
/*
将css选择器一层层嵌套使用就可以实现简单的动画效果，也可以添加过度效果就会更加生动，
css3的属性可以实现部分js功能，但不建议这样使用，复杂的动画效果使用js将会更加方便快捷
*/
</style>
</head>
<body>
<div class="div1">
我是第一个div1
<div>
我是第一个div1的子div
</div>
</div>
<div class="div2">
我是第二个div2
<div>
我是第二个div2的子div
</div>
</div>
<div class="div3">
我是第三个div3
<div>
我是第三个div3的子div
</div>
</div>
</body>
</html>使用的图片
敲完此次案例对于代码的理解和熟练程度更加的清晰
个人学习，内容简略
https://www.w3school.com.cn/cssref/css_selectors.asp
来源：oschina
链接：https://my.oschina.net/u/4319463/blog/4366138