原文地址:https://segmentfault.com/a/1190000014734039
感想:伪元素::before ::after 真的很强大,动画也是。
HTML代码:
<div class="coffee"> <div class="vapor"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div class="cup"></div> <div class="plate"></div> </div>
CSS代码:
html, body { margin: 0; padding: 0; height: 100%; display: flex; justify-content: center; align-items: center; background-color: brown; } .coffee { display: flex; flex-direction: column; align-items: center; height: calc(9em + 1em +2em); position: relative; } /* 画出杯子主体 */ .coffee .cup{ position: relative; width: 10em; height: 9em; background-color: white; border-bottom-left-radius: 1.5em; border-bottom-right-radius: 1.5em; } /* 用伪元素画出杯口 */ .coffee .cup::before{ content: ''; position: absolute; width: 100%; height: 2em; background-color: chocolate; border: 0.5em solid white; box-sizing: border-box; border-radius: 50%; top: -1em; box-shadow: inset 0 0 1em rgba(0,0,0,0.5); } /* 用伪元素画出杯子把手 */ .coffee .cup::after{ content:''; position: absolute; width: 3em; height: 3.5em; border: 0.8em solid white; border-radius: 50%; top: 20%; left: 80%; } /* 画出托盘 */ .coffee .plate { width: 16em; height: 1em; background-color: white; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; position: absolute; bottom: -1px; } /* dom元素增加杯中冒出的热气 */ /* 冒出的热气 */ .coffee .vapor{ width: 7em; display: flex; justify-content: space-between; } .coffee .vapor span{ width: 0.1em; min-width: 1px; height: 2em; background-color: white; animation: evaporation 2s linear infinite; filter: opacity(0); } @keyframes evaporation{ from{ transform: translateY(0); filter: opacity(1) blur(0.2em); } to{ transform: translateY(-4em); filter: opacity(0) blur(0.4em); } } /* 最后,调整每条热气的延迟时间,使动感更强 */ .coffee .vapor span:nth-child(1) { animation-delay: 0.5s; } .coffee .vapor span:nth-child(2) { animation-delay: 0.1s; } .coffee .vapor span:nth-child(3) { animation-delay: 0.3s; } .coffee .vapor span:nth-child(4) { animation-delay: 0.4s; } .coffee .vapor span:nth-child(5) { animation-delay: 0.2s; }