百叶窗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>

相关阅读:
苹果知名开发者怒“怼”：GitHub 不可信，俄罗斯开发者贡献的项目遭毁灭性打击
vue3 自动导入composition-apiI和组件
uniapp2023年微信小程序头像+昵称分别获取
一份小盒饭的“深圳创新密码”
365天挑战LeetCode1000题——Day 049 非递增顺序的最小子序列贪心
基础配置xml
java毕业设计校园资料在线分享网站mybatis+源码+调试部署+系统+数据库+lw
Flink SQL 子图复用逻辑分析
KEIL仿真 logic analyzer
Flask项目 - 01、项目有关知识 - flask路由查找

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