css布局实现热腾腾的咖啡效果代码
代码语言:html
所属分类:动画
代码描述:css布局实现热腾腾的咖啡效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background: #8acdeb; } #container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .steam { position: absolute; height: 150px; width: 150px; border-radius: 50%; background-color: #fff; margin-top: -75px; margin-left: 75px; z-index: 0; opacity: 0; } #steam1 { -webkit-animation: steam1 4s ease-out infinite; animation: steam1 4s ease-out infinite; } #steam3 { -webkit-animation: steam1 4s ease-out 1s infinite; animation: steam1 4s ease-out 1s infinite; } @-webkit-keyframes steam1 { 0% {transform: translateY(0) translateX(0) scale(0.25); opacity: 0.2;} 100% {transform: translateY(-200px) translateX(-20px) scale(1); opacity: 0;} } @keyframes steam1 { 0% {transform: translateY(0) translateX(0) scale(0.25); opacity: 0.2;} 100% {transform: translateY(-200px) translateX(-20px) scale(1); opacity: 0;} } #steam2 { -webkit-animation: steam2 4s ease-out 0.5s infinite; animation: steam2 4s ease-out 0.5s infinite; } #steam4 { -webkit-animation: steam2 4s ease-out 1.5s infinite; animation: steam2 4s ease-out 1.5s infinite; } @-webkit-keyframes steam2 { 0% {transform: translateY(0) translateX(0) scale(0.25); opacity: 0.2;} 100% {transform: translateY(-200px) translateX(20px) scale(1); opacity: 0;} } @keyframes steam2 { 0% {transform: translateY(0) translateX(0) scale(0.25); opacity: 0.2;} 100% {transform: translateY(-200px) translateX(20px) scale(1); opacity: 0;} } #cup { z-index: 1; } #cup-body { position: ab.........完整代码请登录后点击上方下载按钮下载查看
网友评论0