ホームページ > 記事 > ウェブフロントエンド > H5 と CSS3 を使用して全画面背景回転を作成するチュートリアル
今回は、H5 と CSS3 を使用して全画面の背景回転を作成する方法を紹介します。 H5 を使用して特殊効果を作成するにはどうすればよいですか? H5 と CSS3 を使用する場合の 注意事項 は何ですか? 以下は実際のケースです。見てみましょう。
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>全屏背景轮换播放</title> <meta name="keywords" content="全屏背景轮换播放" /> </head> <body> <style> #bg{ position:fixed; top:0; left:0; bottom:0; right:0; z-index:-1; filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity: 1; opacity: 1; } #bg > img { height:100%; width:100%; border:0; } </style> <body> <div id="bg"> <img src="./bg/3.jpg"> </div> <script src="./js/jquery.js"></script> <script type="text/javascript"> var num = 0; var bg_src = new Array("./bg/1.jpg", "./bg/2.jpg","./bg/4.jpg", "./bg/6.jpg", "./bg/7.jpg","./bg/8.jpg"); //这个数组就是背景图的地址 setInterval("showTime()", 5000);//定时时间,5秒 function showTime() { if (num == bg_src.length) { num = 0; } $("#bg").fadeOut(1000,function(){ $("#bg").html('<img src="' + bg_src[num] + '">'); $("#bg").fadeIn(1000); }) num = num + 1; } </script> <div style="width: 100%; height: 50px; line-height: 50px; text-align: center; color: #fff; position: absolute; bottom: 0px;"> </div> <div style="width: 300px; height: 235px; background: #fff; position: fixed; top: 0px; z-index: 10000; right: 0px;"> <script type="text/javascript"> var cpro_id = "u2580454"; </script> <script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script> </div> </body> </html>
これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
関連書籍:
以上がH5 と CSS3 を使用して全画面背景回転を作成するチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。