点击图片弹窗查看组件

css:

    <link rel="stylesheet" type="text/css" href="css/viewer.min.css" />

<style>

                    .playbtn{position: absolute;width: 70px;height: 70px;text-align: center;display: flex;align-items: center;justify-content: center;}

                .playbtn i{color: #fff;font-size: 22px;}

                .playbtn{background: rgba(255,255,255,0.2);-webkit-backdrop-filter: blur(20px);backdrop-filter: blur(20px); z-index: 3;position: absolute;left:50%;top:50%;transform: translate(-50%,-50%);}

                .playbtn{border-radius: 50%;cursor: pointer;}

                .playbtn{transition: all .2s cubic-bezier(.165,.84,.44,1);}

                .playbtn-bg-fff{background: #fff;}

                .playbtn-bg-fff i{color: var(--color);}

                /* .playbtn:hover{background: var(--color);}

                .playbtn:hover i{color: #fff;}

                .playbtn:hover{border-color: var(--color);} */

                .playbtn:hover{width: 100px;height: 100px;background: #fff;line-height: 170px;}

                .playbtn:hover i{color: var(--color);}

                .vrbtn{background: rgba(255,255,255,0);}

                .vrbtn i{font-size: 28px;}

                .playbtn,.playbtn i,.xs2appdavideo img{transition: all 0.3s ease;}

                .m529d{padding-bottom: 150px;}

               

</style>

html

 <div class="viewer">

          <p class="playbtn"><img src="" /></p>

</div>

 

js

    <script src="js/viewer.min.js"></script>