search

背景图片轮播

hashtag
背景图片轮播

由于<img>标签不能实现固定高度的宽度不失真拉伸，采用CSS3background属性去实现! 如果是使用<img>的话，使用bootstrap的轮播器器！

hashtag
1、全屏背景切换

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全屏背景切换</title>
    <script src="http://api.asilu.com/cdn/jquery.js,jquery.backstretch.min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
    $.backstretch([
        'http://api.asilu.com/cdn/img/bg/444.jpg',
        'http://api.asilu.com/cdn/img/bg/445.jpg',
        'http://api.asilu.com/cdn/img/bg/446.jpg',
        'http://api.asilu.com/cdn/img/bg/447.jpg',
        'http://api.asilu.com/cdn/img/bg/448.jpg'
    ], {
        fade : 1000, // 动画时长
        duration : 2000 // 切换延时
    });
</script>
</body>
</html>

实现炫酷的页面整个背景覆盖切换

hashtag
自定义背景图片切换

html只有一个div

css样式

JS

显示效果不如fade淡入淡出，肯定在transition的样式没有设置好！

hashtag
其他示例

hashtag
参考

PreviousCSS揭秘NextCSS绘制序列帧动画

Last updated