最近仿造了小米官网写了一遍，可以说是完全把官网给写完了。
官网中有一个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>
使用的图片
敲完此次案例对于代码的理解和熟练程度更加的清晰
个人学习，内容简略