CSS特效--图像悬停效果

最新推荐文章于 2024-04-19 15:57:51 发布

步踟蹰于码海

最新推荐文章于 2024-04-19 15:57:51 发布

阅读量1.4k

点赞数 2

分类专栏： css特效文章标签： css css3 javascript

本文链接：https://blog.csdn.net/Prototype__God/article/details/122914537

版权

十分钟快速完成的酷炫css特效,快速练手,谁会拒绝给我妻善逸设计一个酷炫的背景呢?

摘要由CSDN通过智能技术生成

在youtube上发现的比较有意思的图标卡显示效果.效果如下:

在这里插入图片描述
觉得有意思的同学可以试着和我一起制作一下!

需要:
·基础的html,css
·VScode用来编写代码
·漫长岁月的十分钟
·一个小小的赞👍

事不宜迟,赶紧开始吧!

1.结构层

<body>
    <div class="container">
        <div class="box1">
            <img src="./图片1.png" alt="">
        </div>
        <div class="box2">
            <img src="./图片2.png" alt="">
        </div>
    </div>
</body>

2.CSS

*{
   
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
body{
   
background-color: #262626;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.container{
   
    position: relative;
    display: flex;
    /* 倒影确定 */