【html+css】端午快乐

阡小年

已于 2022-08-08 17:00:34 修改

阅读量177

点赞数

分类专栏： bilibili视频源码文章标签：前端 html

于 2022-07-07 21:29:15 首次发布

本文链接：https://blog.csdn.net/weixin_45562037/article/details/125667506

版权

bilibili视频源码专栏收录该内容

18 篇文章 0 订阅

订阅专栏

效果视频展示：

端午快乐-2022-6-3

全部代码（放心粘贴）：

<!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>Document</title>
    <style>
        body{
            position: relative;
            background: skyblue;
        }
        .box{
            margin: 100px auto 0 auto;
            width: 700px;
            height: 700px;
            background: rgba(243, 238, 239, 0.5);
            overflow: hidden;
            opacity: 0.7;
        }
        .befor>.img1{
            position:absolute;
            width: 200px;
            height: 200px;
            top: 100px;
            animation: img1 5s 2s ease;
        }
        @keyframes img1 {
            80%{
                filter: blur(2px);
                transform: translateY(400px) translateX(250px) scale(0.6);
            }
            90%,95%{
                filter: blur(7px);
                transform: translateY(400px) translateX(250px) scale(1);
                opacity: 1;
            }
            95%,100%{
                filter: blur(200px);
                transform: translateY(400px) translateX(250px) scale(2);
                opacity: 1;
            }
        }
        .befor>.img2{
            position:absolute;
            width: 200px;
            left: 50%;
            margin-left: -100px;

            animation: img2 5s 2s ease;
        }
        @keyframes img2 {
            80%{
                filter: blur(2px);
                transform: translateY(500px) scale(0.6);
            }
            90%,95%{
                filter: blur(9px);
                transform: translateY(500px) scale(1);
                opacity: 1;
            }
            95%,100%{
                filter: blur(200px);
                transform: translateY(500px) scale(2);
                opacity: 1;
            }
        }
        .befor>.img3{
            position: absolute;
            width: 200px;
            height: 200px;
            top: 100px;
            left: 1100px;

            animation: img3 5s 2s ease;
        }
        @keyframes img3 {
            80%{
                filter: blur(2px);
                transform: translateY(400px) translateX(-250px) scale(0.6);
            }
            90%,95%{
                filter: blur(9px);
                transform: translateY(400px) translateX(-250px) scale(1);
                opacity: 1;
            }
            95%,100%{
                filter: blur(200px);
                transform: translateY(400px) translateX(-250px) scale(2);
                opacity: 1;
            }
        }
        .after{
            position: absolute;
            top: 400px;
            left: 50%;
            margin-left: -125px;
            width: 250px;
            height: 250px;
        } 
        .after>img{
            width: 250px;
            height: 250px;
            opacity: 0;
            animation: see 3.5s 5s ease;
        }
        @keyframes see {
            0%,50%{
                opacity: 0;
            }
            60%,100%{
                opacity: 1;
            }
        }
    </style>
</head>
<body>
    <div class="box">

        <div class="befor">
            <img class="img1" src="https://img.599ku.com/element_min_new_pic/27/88/53/25/81ef2ff2bf2f497d88ce13e505b3bc36.png" alt="">
            <img class="img2" src="https://img.599ku.com/element_min_new_pic/54/97/50/69/94d3f1df7a8906319e6d638a56417795.png" alt="">
            <img class="img3" src="https://img.599ku.com/element_min_new_pic/85/78/86/3/9cd3f43e57f539d4809dd1a02daa306f.png" alt="">

             
        <div class="after">
            <img src="https://bdn.135editor.com/files/images/editor_styles/66485519d7aecae65b03360cba3e4d39.jpg" alt="">
        </div>
        </div>
    </div>
   
    
</body>
</html>