svg+css实现桌面动画效果
代码语言:html
所属分类:动画
代码描述:svg+css实现桌面动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { width: 100%; height: 100vh; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; background-color: #EBE7E7; } svg { width: 256px; height: 256px; } /* SMOKE */ #smoke-1 { stroke-dasharray: 0, 10; -webkit-animation: smoke 6s ease infinite; animation: smoke 6s ease infinite; } #smoke-2 { stroke-dasharray: 0, 10; -webkit-animation: smoke 6s 0.5s ease infinite; animation: smoke 6s 0.5s ease infinite; } @-webkit-keyframes smoke { 0% { stroke-dasharray: 0, 10; } 50% { stroke-dasharray: 10, 0; } 100% { stroke-dasharray: 10, 0; opacity: 0; } } @keyframes smoke { 0% { stroke-dasharray: 0, 10; } 50% { stroke-dasharray: 10, 0; } 100% { stroke-dasharray: 10, 0; opacity: 0; } } /* WRITING */ #line-1 { opacity: 0; -webkit-animation: writing 0.5s linear forwards; animation: writing 0.5s linear forwards; } #line-2 { opacity: 0; -webkit-animation: writing 0.5s 1s linear forwards; animation: writing 0.5s 1s linear forwards; } #line-3 { opacity: 0; -webkit-animation: writing 0.5s 1.5s linear forwards; animation: writing 0.5s 1.5s linear forwards; } #line-4 { opacity: 0; -webkit-animation: writing 0.5s 2s linear forwards; animation: writing 0.5s 2s linear forwards; } @-webkit-keyframes writing { 0% { width: 0px; opacity: 1;} 100% { width: 14px; opacity: 1;} } @keyframes writing { 0% { width: 0px; opacity: 1;} 100% { width: 14px; opacity: 1;} } </style> </head> <body translate="no"> <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg"> <g id="study"> <rect width="64" height="64" /> <g id="smoke"> <path id="smoke-2" d="M9 21L9.55279 19.8944C9.83431 19.3314 9.83431 18.6686 9.55279 18.1056L9 17L8.44721 15.8944C8.16569 15.3314 8.16569 14.6686 8.44721 14.1056L9 13" stroke="#797270" /> <path id="smoke-1" d="M6.5 22L7.05279 20.8944C7.33431 20.3314 7.33431 19.6686 7.05279 19.1056L6.5 18L5.94721 16.8944C5.66569 16.3314 5.66569 15.6686 5.94721 15.1056L6.5 14" stroke="#797270" /> </g> <g id="laptop"> <rect id="laptop-base" x="17" y="28" width="20" height="3" fill="#F3F3F3" stroke="#453F3C" stroke-width="2" /> <rect id="laptop-screen" x="18" y="17" width="18" height="11" fill="#5A524E" stroke="#453F3C" stroke-width="2" /> <rect id="line-1" x="20" y="19" width="14" height="1" fill="#F78764" /> <rect id="line-2" x="20" y="21" width="14" height="1" fill="#F9AB82" /> <rect id="line-3" x="20" y="23" width="14" height="1" fill="#F78764" /> <rect id="line-4" x="20" y="25" width="14" height="1" fill="#F9AB82" /> </g> <g id="cup"> <rect id="Rectangle 978" x="5" y="24" width="5" height="7" fill="#CCC4C4" stroke="#453F3C" stroke-width="2" /> <path id="Ellipse 416" d="M11 28C12.1046 28 13 .........完整代码请登录后点击上方下载按钮下载查看
网友评论0