165.百叶窗特效

Posted 前端小智@大迁世界

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了165.百叶窗特效相关的知识,希望对你有一定的参考价值。

效果 (源码网盘地址在最后)

源码

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>百叶窗特效</title>
    <link href="./style.css" rel="stylesheet" />
  </head>
  <body>
    <div class="btn">
      <div class="bg"></div>
      <span class="noselect">关闭百叶窗</span>
      <div class="string"></div>
      <div class="string-end"></div>
      <div class=&#

以上是关于165.百叶窗特效的主要内容,如果未能解决你的问题,请参考以下文章

如何使用WPF 实现百叶窗切换动画

css3 怎么把图片分成百叶窗

WPF Clip实现百叶窗

HTML中 CSS+DIV+JS 怎么实现图片切换的特效呢, 百叶窗,淡出淡进之类的呢?

jQuery ui 百叶窗blind方向设置

pixijs shader 制作百叶窗效果