我刚刚接触 HTML5 和 css3 的世界... 现在的问题是……
我有这个风格规则
html {
height: 100%;
}
body {
height: 100%;
background: #AD3434;
}
.login-form {
margin: 100px auto;
width: 100px;
height: 50px;
perspective: 600;
position: relative;
}
.login-form .s {
animation: close-shadow 1.2s ease 0.19s 1 alternate forwards;
}
.login-form .f {
animation: close 1.5s ease 1 alternate forwards;
}
.login-form .f .front {
animation: close-front 1.5s ease 1 alternate forwards;
}
.login-form .f .back {
animation: close-back 1.5s ease 1 alternate forwards;
}
.login-form:hover .s {
animation: shadow 1.2s ease 1 alternate forwards ;
}
.login-form:hover .f {
animation: open 1.5s ease 1 alternate forwards;
}
.login-form:hover .f .front {
animation: open-front 1.5s ease 1 alternate forwards, shadow2 0.4s ease 1 alternate forwards;
}
.login-form:hover .f .back {
animation: open-back 1.5s ease 1 alternate forwards;
}
.f {
transform-style: preserve-3d;
transform-origin: 0 100%;
transform: rotatey(0deg);
cursor: pointer;
position: relative;
width: 100px;
height: 50px;
}
.f .front {
position: absolute;
width: 100px;
height: 50px;
background: #AD3434;
backface-visibility: hidden;
font: 14px sans-serif;
text-transform: uppercase;
line-height: 50px;
text-align: center;
color: #fff;
}
.f .back {
width: 100px;
height: 50px;
background: #AD3434;
transform-origin: 0 100%;
transform: rotateY(180deg);
position: absolute;
backface-visibility: hidden;
left: 100px;
}
.s {
width: 100px;
height: 50px;
background: #AD3434;
position: absolute;
top: 0;
z-index: -1;
}
.pass,
.username {
margin: 4px auto;
width: 92px;
}
.pass label,
.username label {
display: block;
font: 10px sans-serif;
color: #E9C9C9;
}
.pass input,
.username input {
height: 16px;
width: 80px;
padding: 0 4px;
margin-top: 2px;
border: none;
background: #C6AEAE;
color: #fff;
}
.pass input:focus,
.username input:focus {
outline: none;
}
@keyframes open {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(-180deg);
}
}
@keyframes close {
0% {
transform: rotateY(-180deg);
}
100% {
transform: rotateY(0deg);
}
}
@keyframes open-front {
0% {
background: #AD3434;
}
5% {
background: #B23838;
}
50% {
background: #C13D3D;
}
100% {
background: #C13D3D;
}
}
@keyframes open-back {
0% {
background: #9D2F2F;
}
50% {
background: #A63232;
}
95% {
background: #AA3333;
}
100% {
background: #AD3434;
}
}
@keyframes shadow {
0% {
box-shadow: inset 125px 0 30px -20px rgba(0, 0, 0, 0.3);
}
100% {
box-shadow: inset 0px 0 10px 0 rgba(0, 0, 0, 0);
}
}
@keyframes shadow2 {
0% {
box-shadow: 7px 0 10px -7px rgba(0, 0, 0, 0.3);
}
100% {
box-shadow: 0px 0 10px 0 rgba(0, 0, 0, 0);
}
}
@keyframes close-front {
0% {
background: #C13D3D;
}
5% {
background: #C13D3D;
}
50% {
background: #B23838;
}
100% {
background: #AD3434;
}
}
@keyframes close-back {
0% {
background: #AD3434;
}
50% {
background: #A03030;
}
95% {
background: #A03030;
}
100% {
background: #9D2F2F;
}
}
@keyframes close-shadow {
0% {
box-shadow: inset 0px 0 10px 0 rgba(0, 0, 0, 0);
}
100% {
box-shadow: inset 125px 0 20px -20px rgba(0, 0, 0, 0.3);
}
}
我正在使用 js/prefixfree.min.js 自动为关键帧 css 规则添加前缀。
因此，如果我将上述所有 css 规则放在一个 css 中，并将其包含在
<link type="text/css" rel="stylesheet" href="css/style.css">
自动前缀不起作用，
相反，
当我将上面的代码放在 html 页面内的样式标签中时，自动前缀起作用并且页面看起来正确..
更清楚一点:
这行得通
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
<!-- the above code -->
</style>
<script src="js/prefixfree.min.js"></script>
</head>
这不起作用:
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="css/login.css">
<script src="js/prefixfree.min.js"></script>
</head>
问题是什么？
谢谢...;)
最佳答案
首先回答并原谅我糟糕的英语><
我遇到了同样的问题，google了一下，没有解决办法。 比我想我应该看到作者的演示 我发现他的用法和我没有什么不同 所以我尝试更新'prefixfree.min.js' 它比我的大一点，出乎意料地有意义
希望对你有帮助
关于html - prefixfree.min.js 不适用于链接标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23034504/