Heim > Web-Frontend > HTML-Tutorial > css3全屏背景图片切换特效_html/css_WEB-ITnose

css3全屏背景图片切换特效_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:20:30
Original
1826 Leute haben es durchsucht

效果体验:http://hovertree.com/texiao/css3/10/

一般做图片切换效果,都会使用JS或者jQuery脚本,今天发现,其实只用CSS也可以实现。试试效果吧。


效果图:


代码如下:

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>纯CSS3实现全屏背景切换焦点图效果 - 何问起</title><link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/css3/10/css/style.css" media="all" /></head><body><div class="slider"><ul class="clearfix"><li><a href="http://hovertree.com/texiao/css3/10/#bg1">图片切换1</a></li><li><a href="http://hovertree.com/texiao/css3/10/#bg2">图片切换2</a></li><li><a href="http://hovertree.com/texiao/css3/10/#bg3">图片切换3</a></li><li><a href="http://hovertree.com/texiao/css3/10/#bg4">图片切换4</a></li><li><a href="http://hovertree.com/texiao/css3/10/#bg5">图片切换5</a></li></ul></div><div class="hovertreecontent"><h1>何问起 纯CSS3实现全屏背景切换焦点图效果</h1><a href="http://hovertree.com/h/bjaf/8c5uhche.htm" target="_blank">原文</a> <a href="http://hovertree.com/" target="_blank">首页</a> <a href="http://hovertree.com/texiao/" target="_blank">特效</a></div><img src="http://hovertree.com/texiao/css3/10/images/bg1.jpg" alt="美图" class="bg slideLeft" id="bg1" /> <img src="http://hovertree.com/texiao/css3/10/images/bg2.jpg" alt="美图" class="bg slideBottom" id="bg2" /> <img src="http://hovertree.com/texiao/css3/10/images/bg3.jpg" alt="美图" class="bg zoomIn" id="bg3" /> <img src="http://hovertree.com/texiao/css3/10/images/bg4.jpg" alt="美图" class="bg zoomOut" id="bg4" /> <img src="http://hovertree.com/texiao/css3/10/images/bg5.jpg" alt="美图" class="bg rotate" id="bg5" /></body></html>
Nach dem Login kopieren

转自:http://hovertree.com/h/bjaf/8c5uhche.htm

更多特效:

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage