百叶窗切换

多片竖板依次翻折，像百叶窗开合的切换效果

上方为纯 CSS 实时演示，直接将鼠标移上去 / 点击感受效果

CSS 代码

CSS

.fx .bls{display:flex;gap:4px;justify-content:center;padding:40px 0;perspective:700px}
.fx .bls .s{width:50px;height:110px;border-radius:8px;background:linear-gradient(135deg,#4a9eff,#a371f7);transform-style:preserve-3d;transition:transform .6s;transform-origin:left;cursor:pointer}
.fx .bls .s:nth-child(2){background:linear-gradient(135deg,#f778ba,#e5534b);transition-delay:.08s}
.fx .bls .s:nth-child(3){background:linear-gradient(135deg,#57ab5a,#4a9eff);transition-delay:.16s}
.fx .bls .s:nth-child(4){background:linear-gradient(135deg,#e78a3e,#f7c873);transition-delay:.24s}
.fx .bls .s:nth-child(5){background:linear-gradient(135deg,#a371f7,#f778ba);transition-delay:.32s}
.fx .bls:hover .s{transform:rotateY(110deg)}

HTML 结构

HTML

<div class="fx">
<div class="bls"><div class="s"></div><div class="s"></div><div class="s"></div><div class="s"></div><div class="s"></div></div>
</div>

实现要点：perspective + 逐片 delay 的 rotateY 翻折

其它入场与交互动画类特效

入场与交互动画滚动渐入动画入场与交互动画视差滚动背景入场与交互动画悬停放大列表入场与交互动画抖动特效入场与交互动画摇摆特效入场与交互动画弹跳放大特效

回到前端Wiki 首页 · CSS 特效合集