CSS3图片跳动效果

最新推荐文章于 2025-04-27 13:59:36 发布

A孙大壮

最新推荐文章于 2025-04-27 13:59:36 发布

阅读量1.9k

点赞数 1

文章标签： css3 css html

原文链接：https://www.jianshu.com/p/007d24371c9e

版权

该博客介绍了如何利用CSS3的动画属性创建一个有趣的图片跳动和投影动画效果。作者首先搭建了HTML结构，然后通过设置内边距、背景颜色和投影来实现静态效果。接着，通过`@keyframes`定义动画，为图片添加位移和拉伸效果，同时为投影部分设置缩放和虚化。最后，提供了完整的HTML和CSS代码示例，适合前端开发者参考学习。

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

文章作者: AriesMiki
文章連結: https://www.jianshu.com/p/007d24371c9e
版權聲明: 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

分享一个有意思的图片弹跳小动画，效果如下图：

在这里插入图片描述

因为gif图片问题，投影部分显示会有点小瑕疵，实际效果会比较高清。

第一步：

搭建结构，结构使用ul>li>img布局，并给body设置背景图，投影使用伪元素after实现。

代码如下：

<ul class="jump">
  <li><img src="icon1.png" alt=""></li>
  <li><img src="icon4.png" alt=""></li>
  <li><img src="icon2.png" alt=""></li>
</ul>

第二步

书写页面静态效果，给图片设置内边距和背景颜色，并设置投影，底下阴影使用伪元素定位实现。

代码如下：

        <style>
            *{padding: 0; margin: 0; border: 0; list-style: none;}
            body{
                background: url(icon-bg.png); 
                background-size:cover;
            }
            .jump{
                width: 1200px;
                margin: 300px auto;
            }
            .jump li{
                width: 340px;
                height: 340px;
                float: left;
                position: relative; 
            }
            .jump li:nth-child(2){
                margin: 0 90px;     
            }
            .jump li img{
                padding:20px;
                background:rgba(255,255,255,0.6);           
                box-shadow:0 0 10px rgba(0,0,0,0.3);
            }
            .jump li:after{
                content:"";
                position: absolute;
                width: 100%;
                height:100px;
                left: 0; bottom:-100px;
                z-index: -1;
                background:rgba(0,0,0,0.7);
                filter:blur(10px);
                border-radius:50%;
            }
        </style>

第三步：

给图片img设置位移和拉伸动画，并且给低部阴影设置缩放和虚化。

代码如下：

        <style>
            .jump li img{
                padding:20px;
                background:rgba(255,255,255,0.6);           
                box-shadow:0 0 10px rgba(0,0,0,0.3);
                /* 设置图片跳动动画 */
                animation: jump 3s ease infinite;
            }
            @keyframes jump{
                0%{ transform:translateY(0) scale(1,1);}
                /* 中间状态图片位移并且拉伸 */
                50%{transform:translateY(-50px) scale(0.97,1.03);}
                100%{transform:translateY(0) scale(1,1);}
            }
            .jump li:after{
                content:"";
                position: absolute;
                width: 100%;
                height:100px;
                left: 0; bottom:-100px;
                z-index: -1;
                background:rgba(0,0,0,0.7);
                filter:blur(10px);
                border-radius:50%;
                /* 设置投影动画 */
                animation:shadow 3s ease infinite;
            }
            @keyframes shadow{
                0%{transform: scale(1); opacity: 1; filter:blur(10px);}
                /* 投影缩放+虚化 */
                50%{transform: scale(0.8); opacity:0.7; filter:blur(20px);}
                100%{transform: scale(1); opacity: 1; filter:blur(10px);}
            }       
        </style>

最后

完整版代码如下，需要的可以打包走~~~

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS3图片跳动效果</title>
        <style>
            *{padding: 0; margin: 0; border: 0; list-style: none;}
            body{
                background: url(icon-bg.png); 
                background-size:cover;
            }
            .jump{
                width: 1200px;
                margin: 300px auto;
            }
            .jump li{
                width: 340px;
                height: 340px;
                float: left;
                position: relative; 
            }
            .jump li:nth-child(2){
                margin: 0 90px;     
            }
            .jump li img{
                padding:20px;
                background:rgba(255,255,255,0.6);           
                box-shadow:0 0 10px rgba(0,0,0,0.3);
                /* 设置图片跳动动画 */
                animation: jump 3s ease infinite;
            }
            @keyframes jump{
                0%{ transform:translateY(0) scale(1,1);}
                /* 中间状态图片位移并且拉伸 */
                50%{transform:translateY(-50px) scale(0.97,1.03);}
                100%{transform:translateY(0) scale(1,1);}
            }
            .jump li:after{
                content:"";
                position: absolute;
                width: 100%;
                height:100px;
                left: 0; bottom:-100px;
                z-index: -1;
                background:rgba(0,0,0,0.7);
                filter:blur(10px);
                border-radius:50%;
                /* 设置投影动画 */
                animation:shadow 3s ease infinite;
            }
            @keyframes shadow{
                0%{transform: scale(1); opacity: 1; filter:blur(10px);}
                /* 投影缩放+虚化 */
                50%{transform: scale(0.8); opacity:0.7; filter:blur(20px);}
                100%{transform: scale(1); opacity: 1; filter:blur(10px);}
            }       
        </style>
    </head>
    <body>  
        <ul class="jump">
            <li><img src="icon1.png" alt=""></li>
            <li><img src="icon4.png" alt=""></li>
            <li><img src="icon2.png" alt=""></li>
        </ul>   
    </body>
</html>