HTML+CSS实现动态效果相册

利用HTML的input表单定义单选按钮 <input type=radious>

可实现特殊的动态相册.

html代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>手风琴相册</title><link rel="stylesheet" href="../手风琴相册/css/index.css"><link rel="stylesheet" href="../小米商城/css/base.css">
</head><body><ul class="list"><li><input type="radio" name="swith" checked="checked"><div class="bg"></div></li><li><input type="radio" name="swith"><div class="bg"></div></li><li><input type="radio" name="swith"><div class="bg"></div></li><li><input type="radio" name="swith"><div class="bg"></div></li></ul>
</body></html>

css样式代码

.w {width: 1200px;margin: 0 auto;
}.list {width: 1009px;height: 507px;border: 4px solid transparent;margin: 200px auto 0;
}.list li {float: left;height: 500px;box-shadow: 0 0 20px #ccc;
}.list li input[name="swith"] {opacity: 0;width: 100px;height: 500px;transition: 0.4s;cursor: pointer;
}/* 选中撑开li盒子 */
.list li input[name="swith"]:checked {width: 700px;
}.list li:nth-child(1),
.list li:nth-child(1) .bg {background: url(../img/宋3.jpg) no-repeat center;background-size: cover;
}.list li:nth-child(2),
.list li:nth-child(2) .bg {background: url(../img/宋1.jpg) no-repeat center;background-size: cover;
}.list li:nth-child(3),
.list li:nth-child(3) .bg {background: url(../img/宋.jpg) no-repeat center;background-size: cover;
}.list li:nth-child(4),
.list li:nth-child(4) .bg {background: url(../img/宋4.jpg) no-repeat center;background-size: cover;
}.list li .bg {opacity: 0;position: absolute;top: 0px;left: 0px;/* 1vw=1%可视窗口高度 */width: 100vw;height: 100vh;z-index: -1;filter: blur(2px);
}.list li input[name="swith"]:checked ~ .bg{opacity: 1;
}

以及一些基础的CSS样式

@font-face {font-family: 'icomoon';src: url('../fonts/icomoon.eot?7kkyc2');src: url('../fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),url('../fonts/icomoon.ttf?7kkyc2') format('truetype'),url('../fonts/icomoon.woff?7kkyc2') format('woff'),url('../fonts/icomoon.svg?7kkyc2#icomoon') format('svg');font-weight: normal;font-style: normal;
}/* 把我们所有标签的内外边距清零 */
* {margin: 0;padding: 0;/* css3盒子模型 */box-sizing: border-box;
}/* em 和 i 斜体的文字不倾斜 */
em,
i {font-style: normal;
}/* 去掉li 的小圆点 */
li {list-style: none;
}img {/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */border: 0;/* 取消图片底侧有空白缝隙的问题 */vertical-align: middle;
}button {/* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */cursor: pointer;
}a {color: #666;text-decoration: none;
}/* a:hover {color: #c81623;
} */button,
input {/*宋体 */font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;/* 去除默认边框 */border: 0;outline: none;
}body {/* CSS3 抗锯齿形 让文字显示的更加清晰 */-webkit-font-smoothing: antialiased;background-color: #fff;font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;color: #666
}.hide,
.none {display: none
}/* 清除浮动 */
.clearfix:after {visibility: hidden;clear: both;display: block;content: ".";height: 0
}.clearfix {*zoom: 1
}

可以选一些自己喜欢的照片,修改背景照片的路径.

利用input标签中的type=radious,定义单选按钮,并且给其中一个单选按钮设置checked属性,让页面打开时就默认选中该按钮.由于单选按钮通过opacity将其透明度调为0,所以点击单选按钮并将该按钮放大在页面中呈现的效果便是图片的弹出,切换.

HTML+CSS实现动态效果相册相关推荐

html相册浏览页面怎么做,ul结合CSS制作网页相册滑动浏览效果
ul结合CSS制作网页相册滑动浏览效果互联网发布时间:2008-10-17 19:25:02 作者:佚名我要评论英文原文:Sliding Photograph Galleries ...
轻量的、可自定义 CSS 的 Lightbox 相册插件
jQuery LightGallery是一个轻量级的,可定制的,模块化的,响应式的 jQuery 相册插件.它采用 CSS 来实现图像和视频的大小调整.因此,这将是非常灵活的,并且比使用 JavaSc ...
html图片滚动浏览,ul结合CSS制作网页相册滑动浏览效果
别开生面纯CSS实现相册预览 ximicc.com body{ font-size:12px; color: #CC0000; } p { background-color: #F1FAFE; } # ...
html做相册浏览,ul结合CSS制作网页相册滑动浏览效果
别开生面纯CSS实现相册预览 ximicc.com body{ font-size:12px; color: #CC0000; } p { background-color: #F1FAFE; } # ...
html+css实现3D相册
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
html5 3d音乐相册模板,CSS 3D音乐相册（带悬停打开动画）
HTML 导入代码模板: css-3d旋转相册该浏览器不支持audio属性 //--创建页面监听,等待微信端页面加载完毕触发音频播放 document.addEventListener('DOMC ...
html css 3D 立体相册
<body><div class="wrap">< ...
html5旋转相册源码,css实现旋转相册代码
html cssdiv { width:200px; height:400px; position:relative; margin:500px auto; } div img { width:200 ...
一行代码教你七夕情人节如何告白❤—动漫3D相册(音乐+文字)HTML+CSS+JavaScript
❤ 一行代码教你七夕情人节如何告白-动漫3D相册(音乐+文字)HTML+CSS+JavaScript 七夕是中国的情人节,七夕520情人节也是一个非常适合表白的日子,可以把自己平常害怕说出来的话,在这 ...
3D立体相册不过是冷锋蓝plus版 html+css
一.话不多,先看效果: 转念一想,好像很久很久没出css特效的文章了,特别是工作之后,更少了.偶然翻看电脑内存的时候,发现这个自己1年多以前写的特效,甚美,又勾起我一段尘封的回忆...我原来也发过3D ...

HTML+CSS实现动态效果相册

HTML+CSS实现动态效果相册相关推荐

最新文章

热门文章