子比美化 – 开屏动画遮罩加载仿Apple开屏hello效果

免费资源可免费查看本次效果为hello遮罩动画,若使用这个请把子比主题中的全局动画按钮关闭,否则会产生冲突。本 […]

免费资源可免费查看

本次效果为hello遮罩动画,若使用这个请把子比主题中的全局动画按钮关闭,否则会产生冲突。本次的也不是什么新鲜东西,之前所谓的原神开屏改的。都是通用逻辑。css加一下代码就行了,长话短说

下面看效果图

教程开始

将下面代码加入子比主题设置-全局-自定义代码-自定义css里面即可。其中的hello的svg动态描边文件自行上传即可

body:after {
    content: " ";
    position: fixed;
    inset: 0;
    background-color: white;
    z-index: 999;
    background-image: url(自行替换路径/Hello-apple.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30%;
    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;
  }
}

描边svg素材
本站资源大多来自网络,如有侵犯权益请联系管理员,我们会第一时间审核删除。站内资源仅供学习测试,未经许可禁止商用,请在24小时内删除。

相关推荐

更多教程

评论