首页 >web前端 >js教程 >使用 HTML 和 CSS 创建令人惊叹的弯曲并显示具有幻觉背景的悬停效果

使用 HTML 和 CSS 创建令人惊叹的弯曲并显示具有幻觉背景的悬停效果

DDD原创: 2024-12-03 22:36:11667浏览

Create a Stunning Bend & Reveal Hover Effect with Illusionistic Background Using HTML & CSS

在 Instagram 上关注我们：https://www.instagram.com/webstreet_code/

<html lang="zh-cn">
<头>
  
  
  <title>弯曲和显示效果</title>
  
    * {
      保证金：0；
      填充：0；
      框大小：边框框；
    }
    身体 {
      显示：柔性；
      调整内容：居中；
      对齐项目：居中；
      高度：100vh；
      背景：线性渐变（135deg，#1e1e1e，#3c3c3c）；
      溢出：隐藏；
      字体系列：Arial、无衬线字体；
    }
    。容器 {
      位置：相对；
      宽度：300px；
      高度：400像素；
      视角：1200px；
      溢出：可见；
    }

    /* 虚幻的发光网格背景 */
    .illusion-bg {
      位置：绝对；
      顶部：-20px；
      左：-20px；
      宽度：计算（100% 40px）；
      高度：计算（100% 40px）；
      背景：重复线性渐变（45deg，
       rgba(255, 255, 255, 0.1) 0 5px, 透明 5px 10px);
      边框半径：15px；
      框阴影：插图 0 0 50px rgba(255, 255, 255, 0.05),
       0 0 30px rgba(0, 255, 255, 0.5);
      z 索引：-1；
      滤镜：模糊（5px）；
    }

    .image-wrapper {
      位置：相对；
      宽度：100%；
      高度：100%；
      变换原点：中心底部；
      过渡：变换 0.8s 缓动，box-shadow 0.8s 缓动，滤镜 0.6s 缓动；
      边框半径：15px；
      溢出：隐藏；
      z 索引：1；
    }
    .image-wrapper img {
      宽度：100%；
      高度：100%；
      对象适配：覆盖；
      边框半径：15px；
      滤镜：亮度（80%）；
      过渡：过滤0.8s缓和；
    }

    .reveal-png {
      位置：绝对；
      顶部：0；
      左：0；
      宽度：100%；
      高度：100%；
      背景： url('./removebg.png') 无重复中心；
      背景大小：封面；
      不透明度：0；
      变换：translateY(50px) 缩放(0.9)；
      过渡：不透明度 0.8s 缓动，变换 0.8s 缓动，滤镜 0.6s 缓动；
      过滤器： drop-shadow(0 0 15px rgba(255, 255, 255, 0.9));
    }

    /* 悬停效果 */
    .container:hover .image-wrapper {
      变换：旋转X（-70度）缩放（1.05）；
      盒子阴影：0 30px 60px rgba(0, 0, 0, 0.8);
      滤镜：色调旋转(30deg)；
    }

    .container:hover .image-wrapper img {
      滤镜：亮度（100%）饱和度（1.2）；
    }

    .container:悬停 .reveal-png {
      z 索引：1；
      不透明度：1；
      变换：translateY(0) 缩放(1.06)；
      过滤器： drop-shadow(0 0 20px rgba(0, 255, 255, 0.8));
    }

    .container:悬停 .illusion-bg {
      动画：脉冲 2s 无限交替缓入缓出；
    }

    @关键帧脉冲{
      0% {
        变换：缩放（1）；
        不透明度：0.8；
      }
      100% {
        变换：缩放（1.05）；
        不透明度：1；
      }
    }
  </风格>
</头>


<div>




          </div>

以上是使用 HTML 和 CSS 创建令人惊叹的弯曲并显示具有幻觉背景的悬停效果的详细内容。更多信息请关注PHP中文网其他相关文章！

css html Object Filter using display position overflow margin padding border viewport background transform transition animation flex https

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：How to Create a Simple Countdown Timer Using Only JavaScript?下一篇：Why Does `typeof null` Return "object" in JavaScript?

查看更多