blackteay/ray-template
1
0
Fork 0
mirror of https://github.com/XiaoDaiGua-Ray/ray-template.git synced 2025-04-05 19:42:07 +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;
}
#pre-loading-animation
.pre-loading-animation__wrapper
.pre-loading-animation__wrapper-loader {
margin: 0 0 2em;
height: 100px;
width: 20%;
text-align: center;
padding: 1em;
margin: 0 auto 1em;
display: inline-block;
vertical-align: top;
.pre-loading-animation__wrapper-loading {
display: block;
position: relative;
width: 6px;
height: 10px;
animation: rectangle infinite 1s ease-in-out -0.2s;
background-color: #ff6700;
}
#pre-loading-animation
.pre-loading-animation__wrapper
.pre-loading-animation__wrapper-loader
svg
path,
#pre-loading-animation
.pre-loading-animation__wrapper
.pre-loading-animation__wrapper-loader
svg
rect {
fill: #ff6700;
.pre-loading-animation__wrapper-loading:before,
.pre-loading-animation__wrapper-loading:after {
position: absolute;
width: 6px;
height: 10px;
content: '';
background-color: #ff6700;
}
#pre-loading-animation
.pre-loading-animation__wrapper
.pre-loading-animation__wrapper-loader
svg {
transform: scale(2);
.pre-loading-animation__wrapper-loading:before {
left: -14px;
animation: rectangle infinite 1s ease-in-out -0.4s;
}
.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>
<body>
@ -76,55 +89,7 @@
<div id="pre-loading-animation">
<div class="pre-loading-animation__wrapper">
<div class="pre-loading-animation__wrapper-title">Ray Template</div>
<div class="pre-loading-animation__wrapper-loader">
<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 class="pre-loading-animation__wrapper-loading"></div>
</div>
</div>
<script type="module" src="/src/main.ts"></script>