纯CSS完成照片百叶窗帘展■现实际效果实例

日期:2021-03-24 类型:科技新闻 

关键词:在线网页制作,建网页,个人简介网页制作,简单网页,建立网页

最先给大伙儿看一下进行实际效果

关键构思:实际上这一百叶窗帘還是运用了一种障眼法,大家看起来是电脑鼠标移动上来以后,照片进行了,实际上这种照片在原地不动压根沒有动,只不过是就是我们把这种照片放到了一个目录里,互相累加,电脑鼠标移动的同时更改目录的总宽。

第一步:搭建一个百叶窗帘架构

html编码:

<div class="container">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

css编码:

 *{
            margin: 0;
            padding: 0;
        }
        .container{
            margin: 100px auto;
            border:  2px solid #568bc7;
            width: 800px;
            height: 300px;
        }
        .container ul{
            display: flex;
        }
        .container li{
            width: 160px;
            height: 300px;
            list-style: none;
            border-left: 1px solid #194b8d;
        }
        .container li img{
            display: block;
            width: 800px;
            height: 300px;
        }

必须留意一下:这儿的li将会必须手动式测算等分的总宽,尽管能够用延展性小盒子完成全自动等分,可是我后边加了hover以后发觉会出现BUG,大伙儿能够试一下,这儿也不应用延展性小盒子了
如今获得以下架构:

第二步:插进照片,应用hover作出动画特效

我这儿插进了五张水彩画

这儿大家能够发觉照片超出了大家器皿的范畴

这时大家出外器皿中加上,做一个外溢掩藏
overflow: hidden;

那样一个百叶窗帘就出示经营规模了
怎样让照片和演试GIF一样动一动呢?
这儿涉及到到一段关键编码

  .container ul:hover li{
            width: 40px;
        }
    .container ul li:hover{
            width: 600px;
        }

这一Demo 实际上是对:hover特性灵便应用的一个训练,
最先要留意,二行编码的次序不能以拆换
最先电脑鼠标移入 ul 的大器皿内时,大家最先要让 li 的总宽缩小,随后开启下一行的hover ,移入到每个 li 的情况下,让 li 的总宽增大

第三步:关键点解决

进行之上以后,大家见到全部全过程十分的生涩
这儿能够添加衔接特性,让转变越来越更为光滑 ,同时给每个 li 的左侧框再加一点黑影实际效果,使他看上去更为的立体式

  box-shadow: 0 0 25px #000;
	transition: all 0.5s;

最终就进行啦

这儿是详细编码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            margin: 100px auto;
            border:  2px solid #568bc7;
            width: 800px;
            height: 300px;
            overflow: hidden;
        }
        .container ul{
            display: flex;
        }
        .container li{
            width: 160px;
            height: 300px;
            list-style: none;
            border-left: 1px solid #194b8d;
            box-shadow: 0 0 25px #000;
			transition: all 0.5s;
        }
        .container li img{
            display: block;
            width: 800px;
            height: 300px;
        }
        .container ul:hover li{
            width: 40px;
        }
        .container ul li:hover{
            width: 600px;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul>
            <li><img src="./img/tq1.jpg" alt=""></li>
            <li><img src="./img/tq2.jpg" alt=""></li>
            <li><img src="./img/tq3.jpg" alt=""></li>
            <li><img src="./img/tq4.jpg" alt=""></li>
            <li><img src="./img/tq5.jpg" alt=""></li>
        </ul>
    </div>
</body>
</html>

到此这篇有关纯CSS完成照片百叶窗帘展现实际效果的文章内容就详细介绍到这了,大量有关CSS 照片百叶窗帘內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!