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

java奥斯卡
1,666 阅读2分钟

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。 ​

  效果演示：  主页免费获取源码

​

代码目录：

​

主要代码实现：

部分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样式和选择自己喜欢的图片即可 

源码获取

查看博主主页回复暗号007获取

  打卡 文章 更新 67 /  100天

大家可以点赞、收藏、关注、评论我啦 、需要完整文件随时联系我或交流哟~！

在这里插入图片描述​

​

avatar
文章
阅读
粉丝