Html 无法使CSS动画在Shopify中工作
我无法在我的动画中设置动画。正如您所看到的,它是静态的,不会以应有的方式移动。我已经将SASS反编译为CSS,我在inspect元素工具中没有错误。我使用的是Codepen中的精确代码,CSS位于theme.scss.liquid文件夹中。所以我很困惑为什么它不起作用。任何帮助都是感激的 htmlHtml 无法使CSS动画在Shopify中工作,html,css,shopify,Html,Css,Shopify,我无法在我的动画中设置动画。正如您所看到的,它是静态的,不会以应有的方式移动。我已经将SASS反编译为CSS,我在inspect元素工具中没有错误。我使用的是Codepen中的精确代码,CSS位于theme.scss.liquid文件夹中。所以我很困惑为什么它不起作用。任何帮助都是感激的 html 只需关闭或移除第一个选择器: #关于我们{到#关于我们{} #关于我们{} 身体{ 背景:线性梯度(90度,#1A2980 10%,#26D0CE 90%); 高度:100vh; 宽度:100vw
只需关闭或移除第一个选择器:
#关于我们{
到#关于我们{}
#关于我们{}
身体{
背景:线性梯度(90度,#1A2980 10%,#26D0CE 90%);
高度:100vh;
宽度:100vw;
显示器:flex;
对齐项目:居中;
证明内容:中心;
}
.玩具火车{
位置:相对位置;
宽度:11vw;
}
.发动机{
浮动:对;
位置:相对位置;
}
.窗户{
高度:2.8vw;
宽度:3vw;
背景色:#194488;
位置:相对位置;
边框:3vw实心#000;
}
.窗口:之前,
.窗口:之后{
内容:“;
位置:绝对位置;
左:50%;
边框:3vw实心#000;
}
.橱窗:以前{
高度:.7vw;
背景色:#F82510;
宽度:4.5vw;
利润上限:-1.3vw;
左边距:-2.6vw;
边界半径:.8vw;
}
.窗口:之后{
左边距:-.8vw;
利润率最高:.3vw;
边界半径:50%;
高度:1.1vw;
宽度:1.1vw;
背景色:#fff;
}
.主机{
高度:1vw;
宽度:3.5vw;
边框:3vw实心#000;
背景色:#3D9A01;
位置:绝对位置;
边界半径:0.8vw.8vw 0;
右图:-4.1vw;
底部:-.3vw;
}
.主机:之前{
内容:“;
高度:1vw;
宽度:.8vw;
背景色:#000;
位置:绝对位置;
顶部:-1.1vw;
左:4vw;
-webkit变换:旋转(180度);
变换:旋转(180度);
边界半径:50%50%50%50%/90%90%40%40%;
}
.主机:后{
内容:“;
高度:1.2vw;
宽度:.8vw;
位置:绝对位置;
显示:块;
右:.5vw;
顶部:-1.8vw;
边界半径:50%50%50%50%/90%90%40%40%;
-webkit变换:旋转(180度);
变换:旋转(180度);
z指数:-1;
背景色:#194488;
边框:3vw实心#000;
}
.发动机机体{
高度:1.7vw;
宽度:7.5vw;
位置:绝对位置;
左:-.2vw;
top:3.0vw;
背景色:#F69F00;
边框:3vw实心#000;
边界半径:.5vw;
}
.发动机机体.大车轮{
顶部:3vw;
左:2vw;
}
.发动机机体.正常车轮{
左:4.5vw;
顶部:5vw;
}
.发动机本体:之前{
内容:“;
位置:绝对位置;
高度:.5vw;
宽度:.5vw;
左:-1.1vw;
底部:2vw;
z指数:-1;
背景色:#fff;
边界半径:50%;
边框:3vw实心#000;
}
.wheels>div{
位置:绝对位置;
背景色:#F82510;
边界半径:50%;
边框:3vw实心#000;
-webkit动画:轮子旋转1s线性无限;
动画:轮子旋转1s线性无限;
}
.wheels>div:之前{
内容:“;
位置:绝对位置;
宽度:100%;
边框底部:1vw实心#000;
最高:50%;
利润率顶部:-.1vw;
}
.wheels>div:之后{
内容:“;
高度:.8vw;
宽度:.8vw;
位置:绝对位置;
背景色:#000;
边界半径:50%;
左:50%;
最高:50%;
左边距:-.4vw;
利润率顶部:-.4vw;
}
.轮子,大轮子{
宽度:2.2vw;
高度:2.2vw;
-webkit动画延迟:-0.3s;
动画延迟:-0.3s;
}
.车轮.正常车轮{
高度:2.0vw;
宽度:2.0vw;
-webkit动画延迟:-0.6s;
动画延迟:-0.6s;
}
.机车{
高度:3.5vw;
宽度:6.0vw;
边框:3vw实心#000;
背景色:#F69F00;
边界半径:.5vw;
位置:相对位置;
浮动:左;
利润率最高:1.3vw;
}
.火车头:以前{
内容:“;
宽度:100%;
背景:线性梯度(向右,#0000000%,#0000008%,#f69f00 8%,#f69f00 15%,#00000015%,#00000028%,#00000034%,#f69f00 34%,#f69f00 65%,#00000065%,#000000100%);
高度:.3vw;
位置:绝对位置;
顶部:6vw;
左:0;
}
.火车头:之后{
内容:“;
宽度:100%;
背景:线性梯度(向右,#0000000%,#00000024%,#f69f00 24%,#f69f00 65%,#f69f00 65%,#00000065%,#00000085%,#f69f00 85%,#f69f00 90%,#00000090%,#000000100%);
高度:.3vw;
位置:绝对位置;
排名:1.4vw;
左:0;
}
.机车.车轮>div{
排名:2.2vw;
-webkit动画延迟:-0.6s;
动画延迟:-0.6s;
}
.机车.车轮>部门:第一个孩子{
-webkit动画延迟:-0.9秒;
动画延迟:-0.9秒;
}
.机车.普通车轮:第一种类型{
左:2vw;
}
.机车.正常车轮:最后一种类型{
右:.2vw;
}
.火车头.垃圾{
高度:3.5vw;
宽度:5.0vw;
位置:绝对位置;
顶部:-1.8vw;
边框:3vw实心#000;
背景色:#3D9A01;
边界半径:50%;
左:2vw;
z指数:-1;
}
.轨道{
位置:相对位置;
宽度:20vw;
底部:-1vw;
溢出:隐藏;
高度:.3vw;
}
.轨道跨度{
显示:内联;
高度:.3vw;
宽度:20vw;
位置:绝对位置;
左:20vw;
背景:线性渐变(向右,黑色0%,黑色30%,透明30%,透明39%,黑色39%,黑色61%,黑色65%,透明65%,透明70%,黑色71%,黑色100%);
-webkit动画:轨迹2s线性无限;
动画:轨迹2s线性无限;
-webkit动画填充模式:正向;
动画填充模式:正向;
}
.轨道跨度:第n个子(2){
-webkit动画延迟:-1s;
动画延迟:-1s;
}
.吸烟:以前,
.吸烟:之后,
.吸烟时间:以前{
显示:
<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>
#about-us{
body {
background: linear-gradient(90deg, #1A2980 10%, #26D0CE 90%);
height: 100vh;
width: 100vw;
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;
-webkit-transform: rotate(180deg);
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%;
-webkit-transform: rotate(180deg);
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;
-webkit-animation: wheel-rotate 1s linear infinite;
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;
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s;
}
.wheels .normal-wheel {
height: 2.0vw;
width: 2.0vw;
-webkit-animation-delay: -0.6s;
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;
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}
.locomotive .wheels > div:first-child {
-webkit-animation-delay: -0.9s;
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%);
-webkit-animation: track 2s linear infinite;
animation: track 2s linear infinite;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.tracks span:nth-child(2) {
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
.smokes:before,
.smokes:after,
.smokes span:before {
display: block;
content: "";
height: .8vw;
width: .8vw;
background-color: #fff;
border-radius: 50%;
position: absolute;
right: .8vw;
top: 1.5vw;
z-index: -1;
}
.smokes:before {
-webkit-animation: smoke 1s linear infinite;
animation: smoke 1s linear infinite;
}
.smokes span:before {
-webkit-animation: smoke 1s linear infinite;
animation: smoke 1s linear infinite;
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}
.smokes:after {
-webkit-animation: smoke 1s linear infinite;
animation: smoke 1s linear infinite;
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s;
}
@-webkit-keyframes smoke {
100% {
top: -5vw;
opacity: 0.5;
}
}
@keyframes smoke {
100% {
top: -5vw;
opacity: 0.5;
}
}
@-webkit-keyframes wheel-rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes wheel-rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes track {
100% {
left: -20vw;
}
}
@keyframes track {
100% {
left: -20vw;
}
}
}