html+css 热茶效果

本文主要是介绍html+css 热茶效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>热茶特效</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {display: flex;align-items: center;justify-content: center;min-height: 100vh;background: #607d8b;}.container {position: relative;top: 50px;}.cup {position: relative;width: 280px;height: 300px;background: linear-gradient(to right, #f9f9f9, #f9f9f9);border-bottom-left-radius: 45%;border-bottom-right-radius: 45%;}.top {position: absolute;top: -30px;left: 0;width: 100%;height: 60px;background: linear-gradient(to right, #f9f9f9, #f9f9f9);border-radius: 50%;}.circle {position: absolute;top: 5px;left: 10px;width: calc(100% - 20px);height: 50px;background: linear-gradient(to left, #f9f9f9, #f9f9f9);border-radius: 50%;overflow: hidden;}.tea {position: absolute;top: 20px;left: 0;width: 100%;height: 100%;background: linear-gradient(#c57e65, #e28462);border-radius: 50%;}.handle {position: absolute;right: -70px;top: 40px;width: 160px;height: 180px;border: 25px solid #dcdcdc;border-left: 25px solid transparent;border-bottom: 25px solid transparent;border-radius: 50%;transform: rotate(42deg);}.plate {position: absolute;bottom: -50px;left: 50%;transform: translateX(-50%);width: 500px;height: 200px;background: linear-gradient(to right, #f9f9f9, #e7e7e7);border-radius: 50%;box-shadow: 0 35px 35px rgba(0, 0, 0, 0.2);}.plate::before {content: '';position: absolute;top: 10px;left: 10px;right: 10px;bottom: 10px;border-radius: 50%;background: linear-gradient(to left, #f9f9f9, #e7e7e7);}.plate::after {content: '';position: absolute;top: 30px;left: 30px;right: 30px;bottom: 30px;border-radius: 50%;background: linear-gradient(rgba(0, 0, 0, 0.2) 25%, transparent, transparent);}.vapour {position: relative;display: flex;z-index: 1;padding: 0 20px;}.vapour>div {position: relative;bottom: 50px;margin: 0 2px 50px;min-width: 8px;height: 120px;border-radius: 50%;background: #fff;animation: vapours 5s linear infinite;opacity: 0;filter: blur(8px);animation-delay: calc(var(--i)*-0.5s);}@keyframes vapours {0% {transform: translateY(0) scaleX(1);opacity: 0;}15% {opacity: 1;}50% {transform: translateY(-150px) scaleX(5);}95% {opacity: 0;}100% {transform: translateY(-300px) scaleX(10);}}</style>
</head><body><div class="container"><div class="plate"></div><div class="cup"><div class="top"><div class="vapour"><div style="--i: 1"></div><div style="--i: 2"></div><div style="--i: 3"></div><div style="--i: 4"></div><div style="--i: 5"></div><div style="--i: 6"></div><div style="--i: 7"></div><div style="--i: 8"></div><div style="--i: 9"></div><div style="--i: 10"></div><div style="--i: 11"></div><div style="--i: 12"></div><div style="--i: 13"></div><div style="--i: 14"></div><div style="--i: 15"></div><div style="--i: 16"></div><div style="--i: 17"></div><div style="--i: 18"></div><div style="--i: 19"></div><div style="--i: 20"></div></div><div class="circle"><div class="tea"></div></div></div><div class="handle"></div></div></div>
</body></html>