div+css实现热气腾腾咖啡动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现热气腾腾咖啡动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #607d8b; } .container { position: relative; top: 50px; } .cup { position: relative; width: 280px; height: 300px; background: linear-gradient(to right, #f9f9f9, #d9d9d9); 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, #d9d9d9); border-radius: 50%; } .circle { position: absolute; top: 5px; left: 10px; width: calc(100% - 20px); height: 50px; background: linear-gradient(to left, #f9f9f9, #d9d9d9); border-radius: 50%; box-sizing: border-box; overflow: hidden; } .tea { position: absolute; top: 20px; left: 0; width: 100%; height: 100%; background: linear-gradient(#c57e65, #e28462); border-radius: 50%; } .handle { position: absolute; top: 40px; right: -70px; 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: radial-gradient(rgba(0, 0, 0, 0.2), 25%, transparent, transparent); } .vapour { position: relative; display: flex; z-index: 1; padding: 0 20px; } .vapour span { position: relative; bottom: 50px; display: block; margin: 0 2px 50px; min-width: 8px; height: 120px; background: #fff; border-radius: 50%; animation: animate 5s line.........完整代码请登录后点击上方下载按钮下载查看
网友评论0