分享学习记录
互联网技术知识

给网站添加一个启动开屏动画的教程

直接教程开始:

图片需要清晰可见,然后去自定义css里填入下方的代码:

/*开屏动画*/
body:after {
    content: " ";
    position: fixed;
    inset: 0;
    background-color: white;
    z-index: 999;
    background-image: url(图片链接);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    animation: fadeOut 3s;
    animation-fill-mode: forwards;
    -webkit-transition: fadeOut 3s;
    transition: fadeOut 3s;
    pointer-events: none;
}
@keyframes fadeOut {
  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

background-size是调大小的,我设置成100%,是铺满整个屏幕的意思。

赞(0)
文章名称:《给网站添加一个启动开屏动画的教程》
文章链接:https://www.bailuze.com/14525.html
本站所有文章,如无特殊说明或标注,均为本站原创发布。任何在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
本站专注于百度、搜狗、360、谷歌、bing等常见搜索引擎的优化,关键词排名的提高,诚意咨询邮箱526009505@qq.com
分享到