我正在接近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">
auto-preifx不起作用，
而不是
当我将代码置于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>
有什么问题？
谢谢...;）
答案 0 :(得分：1)
首先anwser并原谅我可怜的英语＆gt;＆lt;
我遇到同样的问题并谷歌，但没有解决方案。 比我想我应该看到作者的演示 我发现他的用法和我没什么不同 所以我尝试更新'prefixfree.min.js' 它比我的大一点，意外地有意义
希望它可以帮助你