我想在我的计算机(本地(中重新创建一个 CSS 动画,但它不起作用,当我尝试在 Codepen 中的代码时它正在工作,我做错了什么?
这是代码:https://codepen.io/jvera/pen/gXxgXx
{
background: none;
border: 0;
box-sizing: border-box;
box-shadow: inset 0 0 0 2px #f45e61;
color: #f45e61;
font-size: inherit;
font-weight: 700;
margin: 1em;
padding: 1em 2em;
text-align: center;
text-transform: capitalize;
vertical-align: middle;
}
.draw {
overflow: hidden;
position: relative;
}
.draw::before, .draw::after {
content: '';
box-sizing: border-box;
position: absolute;
border: 2px solid transparent;
width: 0;
height: 0;
}
.draw::before {
top: 0;
left: 0;
border-top-color: #60daaa;
border-right-color: #60daaa;
animation: border 2s infinite;
}
.draw::after {
bottom: 0;
right: 0;
animation: border 2s 1s infinite, borderColor 2s 1s infinite;
}
@keyframes border {
0% {
width: 0;
height: 0;
}
25% {
width: 100%;
height: 0;
}
50% {
width: 100%;
height: 100%;
}
100% {
width: 100%;
height: 100%;
}
}
@keyframes borderColor {
0% {
border-bottom-color: #60daaa;
border-left-color: #60daaa;
}
50% {
border-bottom-color: #60daaa;
border-left-color: #60daaa;
}
51% {
border-bottom-color: transparent;
border-left-color: transparent;
}
100% {
border-bottom-color: transparent;
border-left-color: transparent;
}
}
<center><h2 class="draw">Titulo</h2><center>
我创建了两个文件并将它们放入文件夹中,当我运行HTML文件时,我看不到动画效果(如演示(,那么,我该怎么办? 为什么我看不到结果?
谢谢。
我不知道你的HTML和CSS技能,但也许你在样式表的链接上做错了什么:
<link rel="stylesheet" href="styles.css">
一定要直接设置路径(看看这个例子:外部CSS(,也许可以瞥见HTML的基础知识,以防万一?
- 网页简介
另外,请检查路径是相对路径还是绝对路径:
相对路径:
- 索引.html /
- 图形/图像.png
- /help/articles/how-do-i-set-up-a-webpage.html
绝对路径:
- http://www.example.com
- http://www.example.com/graphics/image.png
- http://www.example.com/help/articles/how-do-i-set-up-a-webpage.html
请参阅有关路径的完整参考。
希望我有帮助。
尝试添加 -WebKit-keyframe 功能。它可能是您的浏览器。链接到如何做到这一点