网页切换之间的加载动画方案
first 一般情况下,页面打开的时候,初始化的是一个css的动画,比如一个不断变化的图形或者漏斗。
<html> <div class="loading"> <div class="loader"></div> This is a large page. May be it will take a few seconds to load. </div> <style> .loading { position: fixed; z-index: 50; width: 100%; height: 100%; top: 0; left: 0; background: #f1f1f1; display: flex; justify-content: center; align-items: center; } .loader { --webkit-perspective: 120px; --moz-perspective: 120px; --ms-perspective: 120px; perspective: 120px; height: 100px; } .loader:before { content: ""; position: absolute; left: 25px; top: 25px; width: 50px; height: 50px; background-color: #9bffaf; animation: flip 1s infinite; } @keyframes flip { 0% { transform: rotate(0);} 50%{ transform: rotateY(180deg);} 100%{ transform: rotateY(180deg) rotateX(180deg);} } </style> </html>
下面是一个沙漏的css动画。
<!DOCTYPE html> <html lang="en"> <body> <div class="loading"> <span class="top"></span> <span class="bottom"></span> </div> </body> <style> body { /* 取消页面内外边距 */ margin: 0; padding: 0; /* 渐变背景 */ background: linear-gradient(200deg, #b5aee4, #505285); } .loading { width: 86px; height: 196px; /* 相对定位 */ position: relative; /* 弹性布局 */ display: flex; /* 将元素垂直显示 */ flex-direction: column; /* 将元素靠边对齐 */ justify-content: space-between; align-items: center; animation: rotating 2s linear infinite; } /* 沙漏上下两个容器 */ .top, .bottom { width: 70px; height: 70px; position: relative; /* 这里把溢出的部分隐藏 */ overflow: hidden; } /* 容器里的沙 */ .top::before, .bottom::before { content: ""; /* 绝对定位 */ position: absolute; /* inherit表示继承父元素(这里指宽高) */ width: inherit; height: inherit; background-color: #cabbe9; /* 执行动画,先设置动画的参数,暂时不指定动画名称,我们在下面再来指定 */ animation: 2s linear infinite; } .top::before { /* 通过设置圆角来改变沙的形状 */ border-radius: 0 100% 0 0; /* 执行指定的动画 */ animation-name: drop-sand; } .bottom::before { /* 通过设置圆角来改变沙的形状 */ border-radius: 0 0 0 25%; /* 这里我们将下面的沙移出可视范围 */ transform: translate(50px, -50px); /* 执行指定的动画 */ animation-name: fill-sand; } /* 到这里我们还少了个沙子流下来的效果 */ /* 添加流下的元素 */ .loading::after { content: ""; width: 5px; height: 96px; background-color: #cabbe9; /* 绝对定位 */ position: absolute; top: 20px; /* 执行动画:动画 时长 线性的 无限次播放 */ animation: flow 2s linear infinite; } </style> </html>
阅读量: 839
发布于:
修改于:
发布于:
修改于: