HTML+CSS+JS实现 ❤️照相机快门图片动画特效❤️

港控/mmm° 2022-09-10 06:28 225阅读 0赞

> ##  效果演示：   ##
> 
> ![20210906095920867.gif][]

> ## 代码目录： ##

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamF2YeadjumYs-WLhw_size_20_color_FFFFFF_t_70_g_se_x_16][]

> ## 主要代码实现： ##

### 部分CSS样式： ###

html {
        height: 100%;
        overflow: hidden;
    }
    
    body {
        min-height: 100%;
    }
    
    .container {
        cursor: pointer;
        background-position: center center;
        background-size: cover;
        background-image: url("../img/1.jpg");
        width: 100vw;
        height: 100vh;
        position: relative;
    }
    
    .container:focus {
        display: none;
    }
    
    .flap {
        width: 150vmax;
        height: 150vmax;
        position: absolute;
        bottom: 50%;
        right: 50%;
        pointer-events: none;
        will-change: transform;
        background: hsl(calc(1turn * var(--p)), 80%, 80%);
        background: linear-gradient(35deg, #555, black);
        border: solid 4px #999;
        --p: calc(var(--i) / var(--flaps));
        -webkit-animation: click 0.9s cubic-bezier(0.5, 0, 0.5, 1) 0.1s;
        animation: click 0.9s cubic-bezier(0.5, 0, 0.5, 1) 0.1s;
        transform-origin: bottom right;
        transform: rotate(-0.5turn) rotate(calc(1turn * var(--p))) skewX(30deg) translateX(-100%) translateY(90%);
    }
    
    @-webkit-keyframes click {
        48%,
        52% {
            transform: rotate(-0.25turn) rotate(calc(1turn * var(--p))) skewX(30deg) translateX(0%) translateY(0%);
        }
    }
    
    @keyframes click {
        48%,
        52% {
            transform: rotate(-0.25turn) rotate(calc(1turn * var(--p))) skewX(30deg) translateX(0%) translateY(0%);
        }
    }
    
    .photo {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-position: center center;
        background-size: cover;
        box-shadow: 0 10px 40px #000;
        margin: -1rem;
        margin-bottom: -5rem;
        border: solid 1rem #fff;
        border-bottom-width: 5rem;
        -webkit-animation: photo 5s cubic-bezier(0.5, 0, 0.5, 1) 0.9s both;
        animation: photo 5s cubic-bezier(0.5, 0, 0.5, 1) 0.9s both;
    }
    
    @-webkit-keyframes photo {
        30%,
        60%,
        70% {
            filter: sepia(30%) saturate(140%) contrast(120%);
            transform: scale(0.5) rotate(-4deg);
        }
        61% {
            opacity: 1;
        }
        71% {
            opacity: 0;
            transform: none;
        }
        100% {
            filter: none;
            opacity: 1;
        }
    }
    
    @keyframes photo {
        30%,
        60%,
        70% {
            filter: sepia(30%) saturate(140%) contrast(120%);
            transform: scale(0.5) rotate(-4deg);
        }
        61% {
            opacity: 1;
        }
        71% {
            opacity: 0;
            transform: none;
        }
        100% {
            filter: none;
            opacity: 1;
        }
    }
    
    .instructions {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        padding: 1rem;
        font-family: monospace;
        text-transform: uppercase;
        text-shadow: 0 1px 8px #fff;
    }

### HTML代码 : ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>CSS only Camera Shutter</title>
    
        <link rel="stylesheet" href="css/normalize.min.css">
        <link rel="stylesheet" href="css/style.css">
    
    </head>
    
    <body>
    
        <div class="container" tabIndex="0">
    
            <div class="photo" style="background-image:url('img/2.jpg');"></div>
    
            <div class="instructions">网页双击图片演示</div>
    
            <div class="shutter" style="--flaps: 6">
    
                <div class="flap" style="--i: 0"></div>
                <div class="flap" style="--i: 1"></div>
                <div class="flap" style="--i: 2"></div>
                <div class="flap" style="--i: 3"></div>
                <div class="flap" style="--i: 4"></div>
                <div class="flap" style="--i: 5"></div>
    
            </div>
    
        </div>
    
    
    </body>
    
    </html>

需要引入截图找中的CSS样式和选择自己喜欢的图片即可

> ## 源码获取 ##
> 
> 查看博主主页或私信博主获取
> 
> 精彩推荐更新中：
> 
> ### [HTML5大作业实战100套][HTML5_100] ###

>   打卡 文章 更新**  40  **/  100天
> 
> 大家可以**点赞、收藏、关注、评论**我啦 、需要完整文件随时联系我或交流哟~！

![在这里插入图片描述][8e6bebf6b7cd409abc03ca5fcb83f826.gif_pic_center]

[20210906095920867.gif]: /images/20220829/7d6fc66041b84bd5a1dbdd70f1d582c5.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamF2YeadjumYs-WLhw_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/51b465ea1a5b483e91c38f54418635a5.png
[HTML5_100]: https://blog.csdn.net/weixin_39709134/category_11287267.html
[8e6bebf6b7cd409abc03ca5fcb83f826.gif_pic_center]: /images/20220829/25add6e2f1654337899024fae01f28b1.png