手机端网站首页开屏启动图代码的两种方式

原创小魏先生 2023-10-02 23:28 上海

文章的分类代码乐园

前言

看到 QQ 群里有人想要这个代码，那就果断分享出来吧！！

Html

<div class="cpm-box">
<a class="cpm" href="链接">
<div class="preview pop" style="/* visibility: hidden; */">    
    <img src="头像">
    <span class="txt-item" style="top:calc(15% + 150px)">标题</span>
    <span class="txt-item" style="top:calc(15% + 190px)">描述</span>
    </div>
    </a>
    <div class="cpm-time"><span></span> 立即跳过</div>
</div>

CSS

/*首页启动图*/
.cpm-box {overflow-x:hidden; position: fixed;z-index: 9999;left: 0;right: 0;top: 0;bottom: 0;width: 100%;height: 100%;display: none; background-color: white;}
.cpm-img {width: 100%;height: 100%;display: block;overflow: hidden;}
.cpm-img img {width: 100%;height: 100%;object-fit: cover;}
.cpm-time {right:15px;top:15px;padding:5px 10px;background:rgba(0, 0, 0, 0.4);color:rgba(255, 255, 255, 0.9);font-size:14px;border-radius:3px;}
.cpm-box_logo {height:15%;background:rgba(255, 255, 255, 0.9);}
.cpm-box_logo img {height:30%;margin-top:5.5%;}  
.cpm-time {position: absolute; cursor: pointer; position: fixed;z-index: 999999999999999;}
/****** 载入封面 *******/
.pop{position:fixed;top:0;left:0;z-index:9999999;display:flex;visibility:visible;overflow:hidden;width:100%;height:100%;background-image:url(背景图片);background-position:center 0;background-size:cover;background-repeat:no-repeat;text-align:center;flex-direction:column;justify-content:center;align-items:center;}
.pop img{position:absolute;top:15%;left:calc(50% - 50px);width:100px;height:100px;border-radius:100%;object-fit:cover;}
.pop .txt-item{position:absolute;left:0;z-index:12;overflow:hidden;width:100%;height:auto;max-width:100%;min-height:15px;color:#fff;text-align:center;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;font-weight:700;font-size:18px;}
/**/
.preview .post{
    cursor: pointer;
}