Auto nội dung

Nội dung Tự đổi mổi lầ truy cập

<script type="text/javascript"> quotes = new Array() quotes[0] = "Nội dung đoạn text 1" quotes[1] = "Nội dung đoạn text 2" quotes[2] = "Nội dung đoạn text 3" quotes[3] = "Nội dung đoạn text 4" quotes[4] = "Nội dung đoạn text 5" quotes[5] = "Nội dung đoạn text 6" randomquote = Math.random() * (quotes.length) randomquote = Math.floor(randomquote) document.write(quotes[randomquote]) </script>
Tự đông

<script type="text/javascript">var index = 0;quotes = new Array();quotes[0] = "Nội dung đoạn Text 1";quotes[1] = "Nội dung đoạn Text 2";quotes[2] = "Nội dung đoạn Text 3";quotes[3] = "Nội dung đoạn Text 4";quotes[4] = "Nội dung đoạn Text 5";quotes[5] = "Nội dung đoạn Text 6";index = Math.random()*(quotes.length);index = Math.floor(index);function rotator() {if (index == quotes.length) {index = 0;}document.getElementById("rotation").innerHTML = quotes[index];index++;setTimeout("rotator();",5000);}</script><div id="rotation" style="width:500px;height:50px;background:#;padding:5px 5px 5px 5px;margin:0px auto"></div><script type="text/javascript">rotator();</script>

Hiệu ứng ảnh rung

<style> img:hover { animation: shake 0.5s; animation-iteration-count: infinite; } @keyframes shake { 0% { transform: translate(1px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(3px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(1px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } } </style> <p>Hiệu ứng ảnh rung</p> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDUM9dVtOdFCSS-5nQS4r3dvdFsapVuG7I_7PGLi7AtfKnIYJz84Nbl7s10J4g2S13aZ4oQnckHz9D3Erlg749JGugEpsRqDTO1BB2nb3JgVLJdeh4VKoJQwkMJukssLR5ywfa7fd4c_k/w98-h140-p/00.jpg" alt="Pineapple" width="300" height="300">