Open coleava opened 1 year ago
<!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>transition</title> <style> .button { width: 30%; height: 80px; border-radius: 50px; border: 1px solid beige; background-color: cadetblue; position: relative; left: 30px; display: flex; justify-content: center; align-items: center; } .button1 { margin-bottom: 50px; width: 30%; height: 80px; border-radius: 50px; border: 1px solid beige; background-color: coral; position: relative; left: 30px; transition: left 0.8s; display: flex; align-items: center; justify-content: center; } .button1:hover { left: 0; } </style> <script> function expand() { let button = document.getElementById('button') if (button.style.height === '300px') { button.style.height = '80px' button.style.transition = 'height .8s' button.children[0].innerHTML = '点击变大' } else { button.style.height = '300px' button.style.transition = 'height .8s' button.children[0].innerHTML = '点击还原' } } function enter() { let node = document.getElementById('button1') let text = '哞哞哞~'; let spans = node.children for (let i = 0; i < spans.length; i++) { setTimeout(() => { spans[i].innerHTML = text[i]; }, i * 200) } } function leave() { let node = document.getElementById('button1') let spans = node.children let text = '添加文件' for (let i = 0; i < spans.length; i++) { setTimeout(() => { spans[i].innerHTML = text[i]; }, i * 200) } } </script> </head> <body> <div class="button1" id="button1" onmouseenter="enter()" onmouseleave="leave()"> <span>添</span> <span>加</span> <span>文</span> <span>件</span> </div> <div class="button" onclick="expand()" id="button"> <span>点击变大</span> </div> <script></script> </body> </html>