挑战一个盒子实现小米logo_万丈高楼平地起

irpas 02-07 5578

大家好呀！学习完spring感觉神清气爽，今天突发奇想试试使用一个盒子来实现小米的logo，主要学习伪元素的使用，以及阴影的妙用，话不多说，看下最终实现效果🚀

1，首先是 html 部分，只是用一个div

2，css样式首先是基础样式，全局取消内外边距以及使用的盒子模型给body设置flex布局 display: flex; align-items: center; justify-content: center; min-height: 100vh;，使得内容水平垂直居中，这个动画就是旋转，可有可无然后就是对div盒子写一下基本样式了，宽高背景颜色，因为子绝父相，所以添加了相对定位 position: relative;,border-radius: 110px;处理圆角，🆗，look look

*{ margin: 0; padding: 0; box-sizing: border-box; } body{ display: flex; align-items: center; justify-content: center; min-height: 100vh; animation: d3 15s infinite; perspective: 2000px; } div{ position: relative; width: 300px; height: 300px; background-color: #ff6a00; border-radius: 110px; }

关于这个一个盒子实现logo，就是通过这一个盒子的伪元素来实现，所以主要学习内容就是伪元素的使用，以及阴影的妙用，好，🆗 注意： html都可以使用伪元素，使用伪元素时必须有content: "";，没有内容就写空，这句必不可少，否则不生效阴影box-shadow: offset-x offset-y blur spread color position; 当不给blur spread 这两个参数时，就像一个有宽高有背景颜色的盒子一样，利用这点对它进行叠加微调，就能实现啦！🚀

div::before{ content: ""; display: block; position: absolute; width: 88px; height: 110px; top: 84px; left: 45px; border:solid #fff; border-left-width: 30px; border-right-width: 30px; border-top-width: 26px; border-radius: 3px; border-top-right-radius: 42px; border-bottom-width: 0; } div::after{ content: ""; display: block; position: absolute; width: 30px; height: 35px; top: 125px; left: 105px; background-color: #fff; border-radius: 3px; box-shadow: 0 30px #fff, 0 56px #fff, 120px -30px #fff, 120px -43px #fff, 120px 0 #fff, 120px 30px #fff, 120px 56px #fff; } @keyframes d3{ 0%,100%{ transform: rotate3d(0,1,0,0deg); } 50%{ transform: rotate3d(0,1,0,360deg); } }

完整代码

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小米 logo</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; align-items: center; justify-content: center; min-height: 100vh; animation: d3 15s infinite; perspective: 2000px; } div { position: relative; width: 300px; height: 300px; background-color: #ff6a00; border-radius: 110px; } div::before { content: ""; display: block; position: absolute; width: 88px; height: 110px; top: 84px; left: 45px; border: solid #fff; border-left-width: 30px; border-right-width: 30px; border-top-width: 26px; border-radius: 3px; border-top-right-radius: 42px; border-bottom-width: 0; } div::after { content: ""; display: block; position: absolute; width: 30px; height: 35px; top: 125px; left: 105px; background-color: #fff; border-radius: 3px; box-shadow: 0 30px #fff, 0 56px #fff, 120px -30px #fff, 120px -43px #fff, 120px 0 #fff, 120px 30px #fff, 120px 56px #fff; } @keyframes d3 { 0%, 100% { transform: rotate3d(0, 1, 0, 0deg); } 50% { transform: rotate3d(0, 1, 0, 360deg); } } </style> </head> <body> <div></div> </body> </html>

到这就结束了，感谢您的观看！！！??