如何使用css3实现图片的自动轮播特效（附完整代码）
本文在介绍如何使用css3实现图片的轮播特效的基础上，重点探讨了其具体步骤，本文内容紧凑，希望大家可以有所收获。
大家在浏览网页的过程中，会遇见一种名叫图片轮播的特殊效果：在同样的位置不同的图片会根据时间的变化循环播放，达到一种类似于播放幻灯片的效果。那么我们在网页开发的过程中如何实现图片的轮播特效呢？本文将向大家展示一下如何使用css3实现图片的轮播特效。
使用css3实现轮播特效的主体思想
我们会在同样的位置准备好多个大小相同的图片，并且横放在div容器内，然后在div容器之上设置一个展示容器，其中展示容器的大小和图片大小相同，最后给图片容器添加自定义动画，并且在动画不同阶段设置递增的偏移值。
注意
动画效果分为两部分：切换和停留。
动画的偏移值和图片大小相关。
使用css3实现轮播特效的原理
首先必须保证展示容器大小与图片大小相同，再为图片添加float效果，然后确定插入的图片数量并且为每个图片设置动画阶段，其中每个阶段都是通过使用keyframes设置递增的margin-left值达到切换的效果。
使用css3实现图片轮播特效的步骤（代码）
步骤一：使用HTML添加图片
<div id="container">
<div id="photo">
<img src="1.png" />
<img src="2.png" />
<img src="3.png" />
</div>
</div>步骤二：使用css3设置动画阶段
#container {
width: 400px;
height: 300px;
overflow: hidden;
}
#photo {
width: 1200px;
animation: switch 5s ease-out infinite;
}
#photo > img {
float: left;
width: 400px;
height: 300px;
}
@keyframes switch {
0%, 25% {
margin-left: 0;
}
35%, 60% {
margin-left: -400px;
}
70%, 100% {
margin-left: -800px;
}
}实现图片轮播的效果图
更多炫酷CSS3、javascript特效代码，尽在：js特效大全
绛旓細浣跨敤css3瀹炵幇鍥剧墖杞挱鐗规晥鐨勬楠わ紙浠ｇ爜锛夋楠や竴锛氫娇鐢℉TML娣诲姞鍥剧墖 姝ラ浜岋細浣跨敤css3璁剧疆鍔ㄧ敾闃舵#container {width: 400px;height: 300px;overflow: hidden;}#photo {width: 1200px;animation: switch 5s ease-out infinite;}#photo > img {float: left;width: 400px;height: 300px;}@keyfr...
绛旓細鍙互浣跨敤CSS涓殑animation灞炴у拰@keyframes瑙勫垯鏉ュ疄鐜板浘鐗囪嚜涓婅屼笅钀戒笅鏉ョ殑鍔ㄧ敾鏁堟灉銆備緥濡傦細image { position: relative; //鍥剧墖鐨勭浉瀵逛綅缃 animation: falling 1s linear; //鍔ㄧ敾鍚嶇О涓篺alling锛屾寔缁椂闂1s锛屽姩鐢婚熷害鍙樺寲绾挎 } keyframes falling { 0% { top: 0px; } //鍒濆鏃跺浘鐗囦綅浜庨《閮 100% {...
绛旓細妗嗘瀹介珮姣斾緥涓嶅彉锛氱洿鎺ヨ缃 img 鐨 max-width:100%; 灏卞彲浠ヤ簡銆傛瘮渚嬭鍙橈紝瑕佸浘鐗囪嚜鍔ㄨ div 鍒囨帀涓浜涘啀灞呬腑鐨勮瘽锛屾亹鎬曞彧鏈夌敤js缁撳悎鎵嶈兘瀹炵幇浜嗐
绛旓細浣跨敤img鏍囩锛岀粰瀹冪殑width灞炴ц瀹氫竴涓粷瀵规暟閲忓硷紝鍏堕珮搴﹀氨浼鑷姩鎸夌収width鐨勫艰繘琛岀缉鏀句簡銆傚锛
绛旓細鐒跺悗鐢╟ss3鐙湁鐨刵th-child閫夋嫨鍣ㄦ潵閫夋嫨浣犺鍒囨崲鐨鍥剧墖 img:nth-child(4){animation-delay:0s;} img:nth-child(3){animation-delay:5s;} img:nth-child(2){animation-delay:10s;} img:nth-child(1){animation-delay:15s;} 鎺ヤ笅鏉ヤ綘灏卞彲浠ュ啓html浜嗭細<!DOCTYPE html> ... 鐣ユ帀鏉備竷鏉傚叓...
绛旓細涓嬮潰鏄竴涓緥瀛愶紝鍏蜂綋鐨勯渶瑕佷綘鑷繁鎱㈡參瀛︿範銆<!DOCTYPE html> div{width:100px;height:100px;background:red;position:relative;animation:myfirst 5s linear 2s infinite alternate;/* Firefox: */-moz-animation:myfirst 5s linear 2s infinite alternate;/* Safari and Chrome: */-webkit-animation:...
绛旓細涓冦佸浘鐗囩殑鑷傚簲锛坒luid image锛夐櫎浜嗗竷灞鍜屾枃鏈紝"鑷傚簲缃戦〉璁捐"杩樺繀椤瀹炵幇鍥剧墖鐨勮嚜鍔缂╂斁銆傝繖鍙涓琛CSS浠ｇ爜锛歩mg { max-width: 100%;} 杩欒浠ｇ爜瀵逛簬澶у鏁板祵鍏ョ綉椤电殑瑙嗛涔熸湁鏁堬紝鎵浠ュ彲浠ュ啓鎴愶細img, object { max-width: 100%;} 鑰佺増鏈殑IE涓嶆敮鎸乵ax-width锛屾墍浠ュ彧濂藉啓鎴愶細img { width: 100...
绛旓細1銆侀鍏鐢dw缂栬緫鍣ㄥ缓绔嬩簡涓涓潤鎬侀〉闈 2銆佸皢寤哄ソ鐨勯潤鎬侀〉鍛藉悕涓篶ss.html锛屾爣棰樹负浜嗏css濡備綍璁剧疆鍥剧墖澶у皬鑷傚簲鈥3銆佸湪body涓坊鍔犱袱涓猟iv锛岃缃笉鑳界殑瀹藉害锛屽苟璁綾lass 涓篸iv1鍜宒iv2锛岀洰鐨勬槸鐢ㄤ竴鏍风殑css鎺у埗鍥剧墖鐨瀹藉害鍦ㄤ笉鍚岀殑瀹藉害瀹瑰櫒涓兘鑳藉緢濂界殑鏄剧ず 4銆佸湪涓や釜div鐨刢lass 涓坊鍔犵浉鍚岀殑鎺у埗鍥剧墖鐨...
绛旓細鑷姩绉诲姩锛岀洰鍓css3鏄湁杩欐牱鐨勬晥鏋滅殑锛屽彨鍋歝ss3鍔ㄧ敾 缁欎綘涓涓ず渚 浣犺娉ㄦ剰鐨勪竴鐐规槸鐩墠杩欎釜鍙兘鏀寔鏈浣庝负IE10鍙婁互涓婄増鏈墠鑳藉杩愯鐨勫摝 Chrome 鍜 Safari 闇瑕佸墠缂 -webkit-銆傛湰绛旀鍑鸿嚜鈥滄垜瑕佺紪绋嬧濊蒋浠跺紑鍙戝笀璁粌骞冲彴鍏嶈垂璇剧▼銆<!DOCTYPE html> div{width:100px;height:100px;background:red;posi...
绛旓細1銆侀鍏堟垜浠垱寤轰竴涓畝鍗曠殑椤圭洰锛屽鍥炬墍绀哄寘鎷琱tml锛css鍜宨mg涓変釜銆2銆佽繖閲屾槸html鏂囦欢锛屽紩鍏ss鍜宧tml浠ｇ爜鏂囦欢锛屽鍥炬墍绀恒3銆佽繖閲屾槸css鏂囦欢浠ｇ爜锛屼笂闈㈡槸div鍜鍥剧墖鏄剧ず鐨勬晥鏋滀唬鐮侊紝鍚庨潰鏄姩鐢绘晥鏋溿4銆佽繖閲屾槸浜嬩欢锛岃繖閲屽畾涔変簡鍥涗釜鏃堕棿娈电殑鐘舵侊紝鍏煎浜唅e鐨勩5銆佸鍥炬墍绀鸿繖閲屾槸鏁堟灉鍥撅紝浼氭牴鎹椂闂磋疆鎾樉绀...
