百叶窗js特效——详细代码复制即可出效果

js特效做一个百叶穿效果如下：

百叶窗

代码如下：（准备好照片素材，复制后更改照片路径可直接使用）


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小孙姐姐/百叶窗title>
    <style>
        
        *{
            padding: 0;
            margin: 0;
        }
        body{
            background-color: rgb(60, 60, 70);
            display: flex;
            justify-content: center;
        }
        .a{
            width: 900px;
            height: 300px;
            position: relative;
            top: 200px;
            overflow: hidden;
            display: flex;
            justify-content: center;
            box-shadow: 5px 5px 15px #000;
        }
        .b{
            transition: .7s;
            overflow: hidden;
        }
        .b:hover{
            flex-shrink: 0;
            flex-grow: 0;
        }
        img{
            width: 400px;
        }
    style>
head>
<body>
    <div class="a">
        <div class="b"><img src="1.gif">div>
        <div class="b"><img src="2.gif">div>
        <div class="b"><img src="3.gif">div>
        <div class="b"><img src="4.gif">div>
        <div class="b"><img src="5.gif">div>
        <div class="b"><img src="6.gif">div>
        <div class="b"><img src="7.gif">div>
    div>
body>
html>

相关阅读:
CSS3 按钮
mapreduce中的MapTask工作机制（Hadoop）
【ROS机器人】Autolabor Pro RTK室外厘米级导航
蓝牙Mesh系统开发五 ble mesh设备增加与移除
Leetcode 805. 数组的均值分割
《重构代码设计》
Docker安装canal、mysql进行简单测试与实现redis和mysql缓存一致性
5分钟攻略Spring-Retry框架实现经典重试场景
LinkedList和链表
springboot+基于web的传染病信息管理系统的设计与实现毕业设计-附源码221124

原文地址：https://blog.csdn.net/qq_41067077/article/details/139466678