本文主要是介绍百叶窗js特效——详细代码复制即可出效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
js特效做一个百叶穿效果如下：
百叶窗
代码如下：（准备好照片素材，复制后更改照片路径可直接使用）
<!DOCTYPE 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>这篇关于百叶窗js特效——详细代码复制即可出效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
