效果体验：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>

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

更多特效：http://www.cnblogs.com/roucheng/p/texiao.html

css3全屏背景图片切换特效的更多相关文章

  1. CSS之生成全屏背景图片

    在CSS中背景图片的填充方法: background-position:x,y(背景图片x,y轴的定位) background-repeat:no-repeat(不平铺) background-rep ...

  2. css2如何设置全屏背景图片

    每次在做一个网站后台登陆页面的时候,当UI给我一张背景是不规律的背景图片,但是在设置为背景时,总会遇到屏幕大小的问题,导致背景图片有可能平铺.这样UI的效果达不到也会很难看. 本来我想用body{ba ...

  3. [css]全屏背景图片设置,django加载图片路径

    <head><style type="text/css"> #bg { position:fixed; top:; left:; width:100%; h ...

  4. css 设置全屏背景图片

    <div id="div1"><img src="img.jpg" /></div> div#div1{ position: ...

  5. css3全屏背景显示

    background:url(zhongyi2.png) no-repeat center center fixed;/* -webkit-background-size:cover; -moz-ba ...

  6. H5-设置全屏背景图片样式

    .bgimg{ width: 100%; height: 95vh; margin: 0; padding: 0 .32rem; background-image: url('../image/ld. ...

  7. 基于HTML5 SVG和CSS3炫酷蹦床式图片切换特效

    今天给大家分享一款效果非常炫酷的HTML5 SVG和CSS3蹦床式图片切换特效插件.该图片切换插件在进行图片切换时,整个屏幕就像一张大蹦床一样,将图片弹射出去,切换到另一张图片,效果非常有创意.效果图 ...

  8. 全屏背景：15个jQuery插件实现全屏背景图像或媒体

    动态网站通常利用背景图像或预加载屏幕,以保证所有资源都加载到页面上,在浏览器中充分呈现.现在很多网站都炫耀自己的图像作为背景图像全屏背景,追溯到旧的Flash网站却用自己的方式在HTML资源重布局. ...

  9. jquery背景自动切换特效

    查看效果网址:http://keleyi.com/a/bjad/4kwkql05.htm 本特效的jquery版本只支持1.9.0以下. 代码如下: <!DOCTYPE html PUBLIC ...

随机推荐

  1. 免费图片存储和图话【提供demo下载】

    我们不管是做博客系统还是其他网站,图片是免不了要使用到的.但是,我们都知道图片的访问是很耗资源的,同时也是很占磁盘空间的,且还特别占带宽. 所以,我们一般都会用到特定的图片服务器.不过,像我等屌丝平时 ...

  2. Linux2 在Linux(CentOS)上配置SSH免登陆

    前言:      本文主要是我在安装hadoop之前,需要先配置SSH免登陆.通过网上搜索,发现不少类似的资料,但多少都有些小问题,所以结合自己的实践,记录在此,作为参考.如果能帮助到其他人,自然是更 ...

  3. 迷你MVVM框架 avalonjs 实现上的几个难点

    经过两个星期的性能优化,avalon终于实现在一个页面绑定达到上万个的时候不卡顿的目标(angular的限制是2000).现在稍作休息,总结一下avalon遇到的一些难题. 首先是如何监控的问题.所有 ...

  4. 老司机学新平台 - Xamarin开发之我的第一个MvvmCross跨平台插件：SimpleAudioPlayer

    大家好,老司机学Xamarin系列又来啦!上一篇MvvmCross插件精选文末提到,Xamarin平台下,一直没找到一个可用的跨平台AudioPlayer插件.那就自力更生,让我们就自己来写一个吧! ...

  5. EF：oracle的number类型映射为C#的boolean类型

    一开始用下面的方法映射, Property(p => p.IsFixed).HasColumnName("IS_FIXED").HasColumnType("num ...

  6. SqlServer英文单词全字匹配

    环境:Vs2013+Sql Server2012 问题:现在数据库记录如下: Sentence列保存的是英文的句子,我现在想找出所有包含“I”(单词)的句子,如果我用 Sentence like '% ...

  7. npm不是以管理身份运行遇到的问题

    环境:win10+npm3.10.5 问题:在npm install lodash时,出现下列错误("npm-debug.log"文件内容) 0 info it worked if ...

  8. maven profile的使用

    作为一名程序员,在开发的过程中,经常需要面对不同的运行环境(开发环境.测试环境.生产环境.内网环境.外网环境等等),在不同的环境中,相关的配置一般不一样,比如数据源配置.日志文件配置.以及一些软件运行 ...

  9. CSS3学习总结3-3D与动画

    前言:这是篇CSS3中关于3D效果与动画相关的内容. (1)在CSS3的3D效果中,需要结合透视perspective的属性才能看到3d的效果,这个属性在屏幕上实现了元素近大远小的效果,所以要使用CS ...

  10. Kali信息收集系列：（都是我以前的笔记整理了一下，就没加水印，习惯就好）

    好几天没发微信公众号了,今天一起发下.(最近有点事情) 前些天老业界的一位朋友问我一些Safe新时代信息收集的问题 逆天虽然好多年不干老本行,但隔段时间都会关注一下 于是就花了点时间整理了一下,你们就 ...