blackteay/ray-template
1
0
Fork 0
mirror of https://github.com/XiaoDaiGua-Ray/ray-template.git synced 2025-04-06 03:57:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

修复加载动画小问题

Browse Source
This commit is contained in:
ray_wuhao 2023-04-04 15:41:04 +08:00
parent 850d9cb2d5
commit 41d037b09d
1 changed files with 41 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
index.html
View File

@ -38,37 +38,50 @@
padding-bottom: 48px; padding-bottom: 48px;
} }
#pre-loading-animation .pre-loading-animation__wrapper-loading {
.pre-loading-animation__wrapper display: block;
.pre-loading-animation__wrapper-loader { position: relative;
margin: 0 0 2em; width: 6px;
height: 100px; height: 10px;
width: 20%;
text-align: center; animation: rectangle infinite 1s ease-in-out -0.2s;
padding: 1em;
margin: 0 auto 1em; background-color: #ff6700;
display: inline-block;
vertical-align: top;
} }
#pre-loading-animation .pre-loading-animation__wrapper-loading:before,
.pre-loading-animation__wrapper .pre-loading-animation__wrapper-loading:after {
.pre-loading-animation__wrapper-loader position: absolute;
svg width: 6px;
path, height: 10px;
#pre-loading-animation content: '';
.pre-loading-animation__wrapper background-color: #ff6700;
.pre-loading-animation__wrapper-loader
svg
rect {
fill: #ff6700;
} }
#pre-loading-animation .pre-loading-animation__wrapper-loading:before {
.pre-loading-animation__wrapper left: -14px;
.pre-loading-animation__wrapper-loader
svg { animation: rectangle infinite 1s ease-in-out -0.4s;
transform: scale(2); }
.pre-loading-animation__wrapper-loading:after {
right: -14px;
animation: rectangle infinite 1s ease-in-out;
}
@keyframes rectangle {
0%,
80%,
100% {
height: 20px;
box-shadow: 0 0 #ff6700;
}
40% {
height: 30px;
box-shadow: 0 -20px #ff6700;
}
} }
</style> </style>
<body> <body>
@ -76,55 +89,7 @@
<div id="pre-loading-animation"> <div id="pre-loading-animation">
<div class="pre-loading-animation__wrapper"> <div class="pre-loading-animation__wrapper">
<div class="pre-loading-animation__wrapper-title">Ray Template</div> <div class="pre-loading-animation__wrapper-title">Ray Template</div>
<div class="pre-loading-animation__wrapper-loader"> <div class="pre-loading-animation__wrapper-loading"></div>
<svg
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
width="24px"
height="30px"
viewBox="0 0 24 30"
style="enable-background: new 0 0 50 50"
xml:space="preserve"
>
<rect x="0" y="0" width="4" height="10" fill="#333">
<animateTransform
attributeType="xml"
attributeName="transform"
type="translate"
values="0 0; 0 20; 0 0"
begin="0"
dur="0.6s"
repeatCount="indefinite"
/>
</rect>
<rect x="10" y="0" width="4" height="10" fill="#333">
<animateTransform
attributeType="xml"
attributeName="transform"
type="translate"
values="0 0; 0 20; 0 0"
begin="0.2s"
dur="0.6s"
repeatCount="indefinite"
/>
</rect>
<rect x="20" y="0" width="4" height="10" fill="#333">
<animateTransform
attributeType="xml"
attributeName="transform"
type="translate"
values="0 0; 0 20; 0 0"
begin="0.4s"
dur="0.6s"
repeatCount="indefinite"
/>
</rect>
</svg>
</div>
</div> </div>
</div> </div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>