js实现幽灵打字消失效果代码
代码语言:html
所属分类:动画
代码描述:js实现幽灵打字消失效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap'> <style> /* General */ body { margin: 0; background: #0C0C0C; color: #f2f2f2; font-family: 'IBM Plex Mono', monospace; } main { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .deactivated { display: none; } /* Intro Animation */ #intro { position: absolute; width: 20vw; height: 20vw; } #intro.fade path, #intro.fade polyline { stroke: #0C0C0C !important; transition: stroke 500ms ease-in; } #intro.fade circle { fill: #0C0C0C !important; transition: fill 500ms ease-in; } /* Info */ .title { position: absolute; left: 32px; top: 8px; } #show { position: absolute; right: 32px; bottom: 8px; } #clear { position: absolute; left: 32px; bottom: 8px; } /* Console */ #hosaka { width: 70%; height: 70%; perspective: 10px; font-size: 1.5em; } #hosaka span { transition: all 500ms ease-in; } #hosaka span:not(.letter) { filter: blur(100px); } .letter { display: inline-block; } #hosaka span.res-let { filter: blur(0px); } /* Fireflies */ .fly { position: absolute; background: #D98E73; opacity: 0; border-radius: 50%; animation: drift 4s ease-out; } @keyframes drift { 0% {opacity: 0; margin: 0;} 25% {opacity: 1; margin-top: -5%;} 100% {opacity: 0; margin-top: -10%;} } </style> </head> <body > <main id="frame"> <!--Console--> <div id="hosaka"></div> <!--Info--> <p class="title">Ghost Writer</p> <p id="show">Press SPACE to start typing</p> <p id="clear"></p> <!--The Ghost--> <svg viewBox="0 0 100 100" id="intro"> <path d="M 10,90 Q 50,-50 90,90" stroke="#555" fill="none"> <animate attributeName="stroke" values="#555;#999;#555" dur="3s" repeatCount="indefinite" /> </path> <polyline points="10,90 20,85 30,90 40,85 50,90 60,85 70,90 80,85 90,90" stroke="#555" fill="none"> <animate attributeName="stroke" values="#555;#999;#555" dur="3s" repeatCount="indefinite" /> </polyline> <circle cx="40" cy="50" r="2" fill="#D98E73"> <animate attributeName="r" values="2;3;2" dur="3s" repeatCount="indefinite" /> </circle> <circle cx="60" cy="50" r="2" fill="#D98E73"> <animate attributeName="r" values="2;3;2" dur="3s" repeatCount="indefinite" /> </circle> </svg> </main> <script> // Variables const hosaka = document.getElementById('hosaka'); const letters = document.getElementsByClassName('letter'); const active = document.getElementsByClassName('activated'); const show = document.getElementById('show'); const resetter = document.getElementById('clear'); const resurrected = document.getElementsByClassName('resurrected'); const resLets = document.getElementsByClassName('res-let'); const frame = document.getElementById(.........完整代码请登录后点击上方下载按钮下载查看
网友评论0