html - 动画与 Codepen 中的动画不同
问题描述
我网站上的 CSS动画缺少 Codepen 示例中的一些功能,例如烟雾,并且火车的某些部分之间存在间隙。使用的代码是相同的,只是我必须在将 SASS 放入 Shopify 之前将其反编译为 CSS。这是Codepen 链接
body {
background: linear-gradient(90deg, #1A2980 10%, #26D0CE 90%);
height: 100vh;
width: 100vw;
display: -webkit-box;
display: flex;
align-items: center;
justify-content: center;
}
.toy-train {
position: relative;
width: 11vw;
}
.engine {
float: right;
position: relative;
}
.window {
height: 2.8vw;
width: 3vw;
background-color: #194488;
position: relative;
border: .3vw solid #000;
}
.window:before,
.window:after {
content: "";
position: absolute;
left: 50%;
border: .3vw solid #000;
}
.window:before {
height: .7vw;
background-color: #F82510;
width: 4.5vw;
margin-top: -1.3vw;
margin-left: -2.6vw;
border-radius: .8vw;
}
.window:after {
margin-left: -.8vw;
margin-top: .3vw;
border-radius: 50%;
height: 1.1vw;
width: 1.1vw;
background-color: #fff;
}
.engine-main {
height: 1vw;
width: 3.5vw;
border: .3vw solid #000;
background-color: #3D9A01;
position: absolute;
border-radius: 0 .8vw .8vw 0;
right: -4.1vw;
bottom: -.3vw;
}
.engine-main:before {
content: "";
height: 1vw;
width: .8vw;
background-color: #000;
position: absolute;
top: -1.1vw;
left: .4vw;
transform: rotate(180deg);
border-radius: 50% 50% 50% 50% / 90% 90% 40% 40%;
}
.engine-main:after {
content: "";
height: 1.2vw;
width: .8vw;
position: absolute;
display: block;
right: .5vw;
top: -1.8vw;
border-radius: 50% 50% 50% 50% / 90% 90% 40% 40%;
transform: rotate(180deg);
z-index: -1;
background-color: #194488;
border: .3vw solid #000;
}
.engine-body {
height: 1.7vw;
width: 7.5vw;
position: absolute;
left: -.2vw;
top: 3.0vw;
background-color: #F69F00;
border: .3vw solid #000;
border-radius: .5vw;
}
.engine-body .big-wheel {
top: .3vw;
left: .2vw;
}
.engine-body .normal-wheel {
left: 4.5vw;
top: .5vw;
}
.engine-body:before {
content: "";
position: absolute;
height: .5vw;
width: .5vw;
left: -1.1vw;
bottom: .2vw;
z-index: -1;
background-color: #fff;
border-radius: 50%;
border: .3vw solid #000;
}
.wheels>div {
position: absolute;
background-color: #F82510;
border-radius: 50%;
border: .3vw solid #000;
animation: wheel-rotate 1s linear infinite;
}
.wheels>div:before {
content: "";
position: absolute;
width: 100%;
border-bottom: .1vw solid #000;
top: 50%;
margin-top: -.1vw;
}
.wheels>div:after {
content: "";
height: .8vw;
width: .8vw;
position: absolute;
background-color: #000;
border-radius: 50%;
left: 50%;
top: 50%;
margin-left: -.4vw;
margin-top: -.4vw;
}
.wheels .big-wheel {
width: 2.2vw;
height: 2.2vw;
animation-delay: -0.3s;
}
.wheels .normal-wheel {
height: 2.0vw;
width: 2.0vw;
animation-delay: -0.6s;
}
.locomotive {
height: 3.5vw;
width: 6.0vw;
border: .3vw solid #000;
background-color: #F69F00;
border-radius: .5vw;
position: relative;
float: left;
margin-top: 1.3vw;
}
.locomotive:before {
content: "";
width: 100%;
background: linear-gradient(to right, #000000 0%, #000000 8%, #f69f00 8%, #f69f00 15%, #000000 15%, #000000 28%, #000000 34%, #f69f00 34%, #f69f00 65%, #000000 65%, #000000 65%, #000000 100%);
height: .3vw;
position: absolute;
top: .6vw;
left: 0;
}
.locomotive:after {
content: "";
width: 100%;
background: linear-gradient(to right, #000000 0%, #000000 24%, #f69f00 24%, #f69f00 65%, #f69f00 65%, #000000 65%, #000000 85%, #f69f00 85%, #f69f00 90%, #000000 90%, #000000 100%);
height: .3vw;
position: absolute;
top: 1.4vw;
left: 0;
}
.locomotive .wheels>div {
top: 2.2vw;
animation-delay: -0.6s;
}
.locomotive .wheels>div:first-child {
animation-delay: -0.9s;
}
.locomotive .normal-wheel:first-of-type {
left: .2vw;
}
.locomotive .normal-wheel:last-of-type {
right: .2vw;
}
.locomotive .trash {
height: 3.5vw;
width: 5.0vw;
position: absolute;
top: -1.8vw;
border: .3vw solid #000;
background-color: #3D9A01;
border-radius: 50%;
left: .2vw;
z-index: -1;
}
.tracks {
position: relative;
width: 20vw;
bottom: -1vw;
overflow: hidden;
height: .3vw;
}
.tracks span {
display: inline;
height: .3vw;
width: 20vw;
position: absolute;
left: 20vw;
background: linear-gradient(to right, black 0%, black 30%, transparent 30%, transparent 39%, black 39%, black 61%, black 65%, transparent 65%, transparent 70%, black 71%, black 100%);
animation: track 2s linear infinite;
animation-fill-mode: forwards;
}
.tracks span:nth-child(2) {
animation-delay: -1s;
}
.smokes:before,
.smokes:after,
.smokes span:before {
display: block;
content: "";
height: .8vw;
width: .8vw;
background-color: #e80404;
border-radius: 50%;
position: absolute;
right: .8vw;
top: 1.5vw;
z-index: -1;
}
.smokes:before {
animation: smoke 1s linear infinite;
}
.smokes span:before {
animation: smoke 1s linear infinite;
animation-delay: -0.6s;
}
.smokes:after {
animation: smoke 1s linear infinite;
animation-delay: -0.3s;
}
@keyframes smoke {
100% {
top: -5vw;
opacity: 0.5;
}
}
@keyframes wheel-rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes track {
100% {
left: -20vw;
}
}
<div class="toy-train">
<div class="engine">
<div class="window">
<div class="engine-main">
<div class="smokes">
<span></span>
</div>
</div>
</div>
<div class="engine-body">
<div class="wheels">
<div class="big-wheel"></div>
<div class="normal-wheel"></div>
</div>
</div>
</div>
<div class="locomotive">
<div class="trash"></div>
<div class="wheels">
<div class="normal-wheel"></div>
<div class="normal-wheel"></div>
</div>
</div>
<div class="tracks">
<span></span>
<span></span>
</div>
</div>
解决方案
推荐阅读
- linux - 在 Linux 上安装 Gulp - `npm install -g gulp` 不起作用?
- java - FixedThreadPool 和 ThreadPoolTaskExecutor 有什么区别?
- javascript - 字体宽度和高度以匹配 js 或 css 中的 div
- python - 无法使用scrapy从第二页刮取数据
- java - 与 (...) 的连接被泄露。您是否忘记关闭响应正文?
- matlab - 函数“periodicreturns”的错误示例?
- html - 如何在没有相同指令换行的情况下美化 HTML 代码?
- javascript - Electron BrowserView 未捕获鼠标事件
- node.js - 上传生成的pdf而不临时写入任何文件
- javascript - 从状态返回数据对象 - 无法读取未定义的属性“0”