HTML+CSS实现动态效果相册

纯HTML+CSS实现的动画效果

楚钧艾克

1286人浏览 · 2022-09-04 21:24:14

楚钧艾克 · 2022-09-04 21:24:14 发布

利用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,所以点击单选按钮并将该按钮放大在页面中呈现的效果便是图片的弹出,切换.