html - 我正在尝试在 css 中设置 @keyframe 动画,但是当我在浏览器中查看 Inspect 时,它们有删除线?
问题描述
我的 HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to SPACE </title>
<link rel="icon" href="planeticon.png">
<link rel="stylesheet" href="indexspace.css">
</head>
<body>
<div class="container">
<div class="sun"></div>
<div class="earth"></div>
</div>
</body>
</html>
所以这是我的CSS:
body {
margin: 0;
padding: 0;
background: url(starbackground.jpg);
}
.container {
width: 120px;
height: 120px;
margin: 200px auto;
position: relative;
padding:40px;
}
.sun {
width: 120px;
height: 120px;
background: URL(sun2.png) no-repeat;
background-size: cover;
border-radius: 50%;
}
.earth {
width: 40px;
height: 35px;
background: url(earth4.png) no-repeat;
background-size: cover;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
box-shadow: 20px 20px 10px 2px #000000cc;
animation-duration: 4s;
animation-name: slide;
}
@keyframes slide {
50%{
left: calc(100%-40px);
top: calc(100%-40px);
}
100% {
z-index: -1;
}
}
这就是它在 Inspect 中显示的内容:[关键帧问题][1] [1]:https://i.stack.imgur.com/NmT6I.png
我读过删除线意味着其他一些元素正在压倒它的重要性,但是我正在努力弄清楚这一点。提前致谢
解决方案
推荐阅读
- perl - Moose:构建器需要一个有时未设置的值(非确定性)
- java - 如何返回泛型方法?
- flutter - 每次我在颤动中导航到特定选项卡时如何调用方法 initState?
- python - 如何在 Python 中创建自注册工厂?
- bash - 如何将具有特定扩展名的文件复制到目录,其中文件扩展名和目标是从文本文件中读取的
- java - java读取url并选择title和list items
- hazelcast - Hazelcast - 确保入口事件由单个处理程序处理
- javascript - 该表单使用 AJAX 打开,并具有显示在单独页面上的单选输入
- xcode - Xcode:错误消息:此时无法安装此应用程序。无法从路径中的包加载 Info.plist
- node.js - 尝试联系 server.js 发送电子邮件时出现错误 500