css - 显示带有淡出效果的 W
问题描述
当我的 W 将被完全写入时,我想显示一个具有淡出效果的 W。我不知道我是否纠结于我的Keyframes
.anim {
transform: rotate(90deg);
}
#global {
width: 70px;
margin: auto;
zoom: 1.9;
margin-top: 100px;
position: relative;
cursor: pointer;
height: 60px;
}
.mask {
position: absolute;
border-radius: 2px;
overflow: hidden;
perspective: 1000;
backface-visibility: hidden;
}
.plane {
background: #2a6fed;
width: 400%;
height: 100%;
position: absolute;
transform: translate3d(0px, 0, 0);
/*transition: all 0.8s ease; */
z-index: 100;
perspective: 1000;
backface-visibility: hidden;
}
.animation {
transition: all 0.3s ease;
}
#top .plane {
z-index: 2000;
animation: trans3 3s ease-out infinite 0s backwards;
}
#middle .plane {
transform: translate3d(0px, 0, 0);
background: #2358be;
animation: trans2 3s ease-out infinite 1.5s backwards;
}
#middle-top .plane {
transform: translate3d(0px, 0, 0);
background: #2358be;
animation: trans25 3s ease-out infinite 2s backwards;
}
#bottom .plane {
z-index: 2000;
animation: trans1 3s ease-out infinite 2.6s backwards;
}
#top {
width: 53px;
height: 20px;
left: 40px;
transform: skew(15deg, 0);
z-index: 100;
top: -26px;
}
#middle-top {
width: 33px;
height: 20px;
left: 60px;
top: -10px;
transform: skew(15deg, -45deg);
}
#middle {
width: 33px;
height: 20px;
left: 60px;
top: 15px;
transform: skew(-15deg, 40deg);
}
#bottom {
width: 53px;
height: 20px;
left: 40px;
top: 30px;
transform: skew(-15deg, 0);
}
#loading-texte {
color: white;
position: absolute;
top: 70px;
font-family: Arial;
text-align: center;
font-size: 12px;
}
@keyframes trans1 {
from {
transform: translate3d(-250px, 0, 0);
}
to {
transform: translate3d(53px, 0, 0);
}
}
@keyframes trans2 {
from {
transform: translate3d(33px, 0, 0);
}
to {
transform: translate3d(-250px, 0, 0);
}
}
@keyframes trans25 {
from {
transform: translate3d(-250px, 0, 0);
}
to {
transform: translate3d(33px, 0, 0);
}
}
@keyframes trans3 {
from {
transform: translate3d(53px, 0, 0);
}
to {
transform: translate3d(-250px, 0, 0);
}
}
<section id="global">
<div class="anim">
<div id="top" class="mask">
<div class="plane"></div>
</div>
<div id="middle-top" class="mask">
<div class="plane"></div>
</div>
<div id="middle" class="mask">
<div class="plane"></div>
</div>
<div id="bottom" class="mask">
<div class="plane"></div>
</div>
</div>
<p id="loading-texte"><i>LOADING...</i></p>
</section>
解决方案
#global {
width: 70px;
margin: auto;
margin-top: 100px;
position: relative;
cursor: pointer;
height: 60px;
}
.mask {
position: absolute;
border-radius: 2px;
overflow: hidden;
perspective: 1000;
backface-visibility: hidden;
}
.anim {
transform: rotate(90deg);
}
#top {
width: 53px;
height: 20px;
left: 40px;
transform: skew(15deg, 0);
z-index: 100;
top: -26px;
}
#middle-top {
width: 33px;
height: 20px;
left: 60px;
top: -10px;
transform: skew(15deg, -45deg);
}
#middle {
width: 33px;
height: 20px;
left: 60px;
top: 15px;
transform: skew(-15deg, 40deg);
}
#bottom {
width: 53px;
height: 20px;
left: 40px;
top: 30px;
transform: skew(-15deg, 0);
}
.plane {
background: #2a6fed;
width: 100%;
height: 100%;
position: absolute;
z-index: 100;
perspective: 1000;
backface-visibility: hidden;
animation-direction: alternate;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#bottom .plane {
z-index: 2000;
animation-name: trans1;
}
#middle .plane {
transform: translate3d(0, 0, 0);
background: #2358be;
animation-name: trans2;
}
#middle-top .plane {
transform: translate3d(0, 0, 0);
background: #2358be;
animation-name: trans3;
}
#top .plane {
transform: translate3d(0, 0, 0);
z-index: 2000;
animation-name: trans4;
}
@keyframes trans1 {
0% {
transform: translate3d(-100%, 0, 0);
}
25% {
transform: translate3d(0%, 0, 0);
}
100% {
transform: translate3d(0%, 0, 0);
}
}
@keyframes trans2 {
0% {
transform: translate3d(100%, 0, 0);
}
25% {
transform: translate3d(100%, 0, 0);
}
50% {
transform: translate3d(0%, 0, 0);
}
100% {
transform: translate3d(0%, 0, 0);
}
}
@keyframes trans3 {
0% {
transform: translate3d(-100%, 0, 0);
}
50% {
transform: translate3d(-100%, 0, 0);
}
75% {
transform: translate3d(0%, 0, 0);
}
100% {
transform: translate3d(0%, 0, 0);
}
}
@keyframes trans4 {
0% {
transform: translate3d(100%, 0, 0);
}
75% {
transform: translate3d(100%, 0, 0);
}
100% {
transform: translate3d(0%, 0, 0);
}
}
#loading-texte {
color: white;
position: absolute;
top: 70px;
font-family: Arial;
text-align: center;
font-size: 12px;
}
<section id="global">
<div class="anim">
<div id="top" class="mask">
<div class="plane"></div>
</div>
<div id="middle-top" class="mask">
<div class="plane"></div>
</div>
<div id="middle" class="mask">
<div class="plane"></div>
</div>
<div id="bottom" class="mask">
<div class="plane"></div>
</div>
</div>
<p id="loading-texte"><i>LOADING...</i></p>
</section>
推荐阅读
- javascript - react useHookForm hook中年龄小于5岁如何抛出错误
- html - 如何在时事通讯中的 CTA 按钮上创建悬停效果?
- logstash - 通信 filebeat --> logstash: 消息顺序错误
- c# - 带有 params 关键字的泛型重载导致递归调用
- spring - 具有重叠配置的 Spring Security 在多个检查授权
块 - scala - 数据集到数据帧的转换
- amazon-web-services - 如何从 Auto Scaling 组中删除公共 IP 自动设置?
- typescript - Typescript - 通过接口迭代
- asp.net - 如何使用 Linq where 条件检查字符串列表是否包含任何字符串
- code.org - 如何在应用实验室中使用自然语言处理 (AI)?