CSS图片折叠效果

最新推荐文章于 2023-12-07 13:03:07 发布

紫微前端

最新推荐文章于 2023-12-07 13:03:07 发布

阅读量597

点赞数

CC 4.0 BY-SA版权

分类专栏：原生javascript制作各种酷炫组件文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/liuhao9999/article/details/125538208

原生javascript制作各种酷炫组件专栏收录该内容

157 篇文章 ¥89.90 ¥99.00

订阅专栏

本文介绍了如何使用CSS3实现一种独特的图片折叠效果，通过展示效果和提供相关代码，帮助读者理解并掌握这种视觉技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：

图片素材：

代码：

<span class="jaffee" style="--bg: url('./index.jpg');">
    <span class="a"></span>
<span class="bc">
      <span class="b"></span>
<span class="c"></span>
</span>
<img src="./index.jpg">
</span>

<style>
    .jaffee {
        margin: 100px;
        position: relative;
        display: inline-flex;
        transform: rotateX(10deg);
        transform-style: preserv

了解本专栏