html css 实现图片扫描特效

Posted jsper

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html css 实现图片扫描特效相关的知识,希望对你有一定的参考价值。

 

实现这个特效需要做3个层,所以要用到CSS绝对定位和层级z-index以及设置top、left、bottom、right的值。
大体结构是一个容器,容器里放3个层,底层是4个角的边框效果容器,中间层是要扫描的图片容器,顶层是扫描线容器,这3个层通过z-index来实现层级,它们的高宽度都取父容器的高宽度inherit。
由于图片尺寸可能不同,所以<img>标签的样式设置了object-fit: contain;这样始终能显示图片所有内容并自动按高宽度充满父容器。
扫描效果通过动画实现,定义动画为4秒,并且循环。一次循环扫描线从顶部移动到底部,再从底部移回顶部。

版本一:

<!DOCTYPE html>
<html>
    <head>
        <mate charset="UTF-8"/>
        <title>扫描特效</title>
        <style type="text/css">
            @keyframes scan 
                0% 
                    margin-top: 0px;
                
                50% 
                    margin-top: 300px;
                
                100% 
                    margin-top: 0px;
                
            
        </style>
    </head>    
    <body>
        <h1>扫描动画</h1>
        <h3>https://www.cnblogs.com/jsper</h3>
        <div style="display:flex;">
            <div style="width:100px;height:100px;background-color: yellow;margin:20px;">网页其他元素块</div>
            <!-- 扫描特效组件 -->
            <div style="width:400px;height:300px;border:1px solid green;">
                <div style="position:absolute;z-index:0;width:inherit;height:inherit;">
                    <div style="position:absolute;width:100px;height:100px;background-color:green;top:-4px;left:-4px;"></div>
                    <div style="position:absolute;width:100px;height:100px;background-color:green;top:-4px;right:-4px;"></div>
                    <div style="position:absolute;width:100px;height:100px;background-color:green;bottom:-4px;left:-4px;"></div>
                    <div style="position:absolute;width:100px;height:100px;background-color:green;bottom:-4px;right:-4px;"></div>
                </div>
                <div style="position:absolute;z-index:10;width:inherit;height:inherit;background-color:white;">
                    <img src="dianzifapiao.png" style="width:inherit;height:inherit;object-fit: contain;"/>
                </div>
                <div style="position:absolute;z-index:20;width:inherit;height:2px;background:greenyellow;box-shadow: 0 0 10px 3px green;animation: scan 4s ease-in-out infinite;"></div>
            </div>
            <div style="width:100px;height:100px;background-color: yellow;margin:20px;">网页其他元素块</div>
        </div>
    </body>
</html>

 

HTML+CSS+JS实现 ❤️H5图片列表滑动特效❤️

🍅 作者主页:Java李杨勇 

🍅 简介:Java领域优质创作者🏆、【java李杨勇】公号作者✌  简历模板、学习资料、面试题库、技术互助【关注我,都给你】

🍅 欢迎点赞 👍 收藏 ⭐留言 📝   

效果演示: 文末获取源码

代码目录:

主要代码实现:

CSS样式:

html,
body 
    height: 100%;
    width: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;


.slider 
    cursor: -webkit-grab;
    cursor: grab;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 85vw;
    height: 100vh;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;


.slider__slides 
    display: -webkit-box;
    display: flex;


.slide 
    --h: 35vw;
    --w: calc(var(--h) * var(--m));
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    margin-right: 6rem;
    overflow: hidden;


.slide__inner 
    position: relative;
    height: var(--h);
    width: var(--w);
    overflow: hidden;


.slide__img 
    position: absolute;
    top: 0;
    left: -50px;
    right: -50px;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.1);


.slide__img img 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    pointer-events: none;

JavaScript代码 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>H5图片列表滑动特效</title>


    <link rel="stylesheet" href="css/style.css">

</head>

<body>

    <div class="slider | js-slider">
        <div class="slider__slides | js-slides">

            <div class="slide | js-slide" style="--m: 1.6;">
                <div class="slide__inner">
                    <div class="slide__img | js-slide-img"><img src="img/1.jpg" alt=""></div>
                </div>
            </div>

            <div class="slide | js-slide" style="--m: 1;">
                <div class="slide__inner">
                    <div class="slide__img | js-slide-img"><img src="img/2.jpg" alt=""></div>
                </div>
            </div>

            <div class="slide | js-slide" style="--m: 0.85;">
                <div class="slide__inner">
                    <div class="slide__img | js-slide-img"><img src="img/3.jpg" alt=""></div>
                </div>
            </div>

            <div class="slide | js-slide" style="--m: 1.5;">
                <div class="slide__inner">
                    <div class="slide__img | js-slide-img"><img src="img/2.jpg" alt=""></div>
                </div>
            </div>

            <div class="slide | js-slide" style="--m: 1.25;">
                <div class="slide__inner">
                    <div class="slide__img | js-slide-img"><img src="img/1.jpg" alt=""></div>
                </div>
            </div>

            <div class="slide | js-slide" style="--m: 1.6;">
                <div class="slide__inner">
                    <div class="slide__img | js-slide-img"><img src="img/3.jpg" alt=""></div>
                </div>
            </div>

            <div class="slide | js-slide" style="--m: 1;">
                <div class="slide__inner">
                    <div class="slide__img | js-slide-img"><img src="img/1.jpg" alt=""></div>
                </div>
            </div>

            <div class="slide | js-slide" style="--m: 0.85;">
                <div class="slide__inner">
                    <div class="slide__img | js-slide-img"><img src="img/2.jpg" alt=""></div>
                </div>
            </div>

            <div class="slide | js-slide" style="--m: 1.5;">
                <div class="slide__inner">
                    <div class="slide__img | js-slide-img"><img src="img/3.jpg" alt=""></div>
                </div>
            </div>

            <div class="slide | js-slide" style="--m: 1.25;">
                <div class="slide__inner">
                    <div class="slide__img | js-slide-img"><img src="img/1.jpg" alt=""></div>
                </div>
            </div>

        </div>
    </div>

    <script src='js/gsap.min.js'></script>
    <script src='js/lodash.min.js'></script>
    <script src="js/script.js"></script>

</body>

</html>

上面的图片可以自己替换成喜欢的样子

源码获取

大家点赞、收藏、关注、评论我啦 、查看博主主页或下方微信公众号获取更多~!

打卡 文章 更新 51  /  100天

精彩推荐更新中:

HTML5大作业实战案例《100套》

Java毕设项目精品实战案例《100套》 

以上是关于html css 实现图片扫描特效的主要内容,如果未能解决你的问题,请参考以下文章

HTML+CSS+JS实现 ❤️3D旋转魔方图片相册特效❤️

HTML+CSS+JS实现 ❤️3D万花筒图片相册展示特效❤️

HTML中 CSS+DIV+JS 怎么实现图片切换的特效呢, 百叶窗,淡出淡进之类的呢?

HTML+CSS+JS实现 ❤️H5图片列表滑动特效❤️

HTML+CSS+JS实现 ❤️H5图片列表滑动特效❤️

HTML+CSS+JS实现 ❤️鼠标悬停性感美女图片特效❤️