HTML5是當前最新的HTML標準,提供了多種動畫效果來為網頁增添視覺效果。下面是一些HTML5動畫效果的簡單代碼示例:
// 1. 淡入淡出效果 <div id="fadeinout">Hello World!</div> <script> setInterval(function(){ $('#fadeinout').fadeOut(1000).fadeIn(1000); }, 2000); </script> // 2. 放大效果 <div id="zoom">Hello World!</div> <script> setInterval(function(){ $('zoom').animate({height:"+=50px", width:"+=50px"}); }, 2000); </script> // 3. 旋轉效果 <div id="rotate">Hello World!</div> <script> setInterval(function(){ $('#rotate').animate({deg: 360}, { duration: 2000, step: function(now) { $(this).css({ transform: 'rotate(' + now + 'deg)' }); } }); }, 2000); </script> // 4. 循環滾動效果 <div id="scroll">Hello World!</div> <style> #scroll { overflow:hidden; height:25px; line-height:25px; } #scroll span { float:left; margin-right:20px; } </style> <script> setInterval(function(){ $('#scroll span:first').animate( {marginLeft: '-=200px'}, 1000, function(){ $(this).appendTo('#scroll').css({marginLeft: '+=200px'}); }) },2000); </script>
以上是一些HTML5動畫效果的代碼示例,可以通過修改其中的參數來改變動畫的速度、旋轉角度、滾動距離等效果,為頁面增添不同的視覺體驗。