滑鼠點選反饋效果(基於css3動畫)
阿新 • • 發佈：2019-02-12
網上多是基於js-setTimeout及setInterval實現的動畫效果，此篇基於css3-transition實現。
浮出符號效果：
<!DOCTYPE html> <html> <head> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> </head> <body></body> <script> var clickCount = 0; document.onclick = function(e) { /** * 根據滑鼠點選座標初始化dom，通過過渡屬性實現動畫效果 * dom渲染完成後設定目標偏移位置及目標透明度 * 過渡結束後移除dom * @author:slzs */ var symbol = document.createElement("b"); symbol.style.position = "absolute"; symbol.style.left = (e.pageX - 10) + "px"; symbol.style.top = (e.pageY - 15) + "px"; symbol.style.zIndex = 9999; symbol.style.userSelect = "none"; // 禁止文字被選中，影響美觀 symbol.style.fontSize = "18px"; symbol.style.color = `rgb(${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)})`; // 隨機顏色 symbol.style.transition="all 1.5s"; symbol.addEventListener("transitionend",function(et){ // 動畫結束移除dom if(et.propertyName == "opacity" && et.srcElement.style.opacity==0) et.srcElement.remove(); }); // 輪換幾個預製字元 switch(++clickCount){ case 1: symbol.innerText = "✔"; break; case 2: symbol.innerText = "❤"; break; default: symbol.innerText = "☺"; clickCount = 0; } document.body.appendChild(symbol); requestAnimationFrame(()=>{ symbol.style.top = (e.pageY - 100) + "px"; symbol.style.opacity = 0; }); }; </script> </html>
水波紋效果：
<!DOCTYPE html> <html> <head> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> </head> <body></body> <script> document.onclick = function(e) { /** * 根據滑鼠點選座標初始化dom，通過過渡屬性實現動畫效果 * dom渲染完成後設定目標偏移位置及目標透明度 * 過渡結束後移除dom * @author:slzs */ var symbol = document.createElement("div"); symbol.style.position = "absolute"; symbol.style.left = (e.pageX) + "px"; symbol.style.top = (e.pageY) + "px"; symbol.style.zIndex = 9999; symbol.style.transition="all 1.5s"; symbol.style.border="1px red solid"; symbol.style.borderColor = `rgb(${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)})`; // 隨機顏色 symbol.style.borderRadius="100%"; symbol.style.width = "0px"; symbol.style.height = "0px"; symbol.addEventListener("transitionend",function(et){ // 動畫結束移除dom if(et.propertyName == "opacity" && et.srcElement.style.opacity==0) et.srcElement.remove(); }); document.body.appendChild(symbol); requestAnimationFrame(()=>{ symbol.style.width = "80px"; symbol.style.margin = "-7px -40px"; symbol.style.height = "14px"; symbol.style.opacity = 0; }); }; </script> </html>