这对我来说有点尴尬，但我有一个软件工程类(class)的期末元素，我一直在寻找教程，这样我就可以看到和学习 html css 和 javascript 以在我的元素中实现它。我从来没有研究过这些，所以我找到了一个很酷的教程，介绍了我想在我的元素中实现的一些动画，所以我决定试一试，但我无法让代码工作。 这是教程链接。 http://davidwalsh.name/logo-animation
这是我的代码(http://jsfiddle.net/5x4wv/):
<!DOCTYPE html>
<html>
<head>
<body>
<div class="mike">
<div class="head">
<div class="eyes">
<div class="eye">
<div class="pupil"></div>
</div>
<div class="eye">
<div class="pupil"></div>
</div>
</div>
<div class="nose">
<div class="ball"></div>
<div class="ball"></div>
</div>
<div class="mouth"></div>
</div>
</div>
<style>
div {
border-radius: 50%;
box-sizing: border-box;
}
.mike {
width: 400px;
margin: 0 auto;
padding-top: 2%;
transition: all 1s;
}
.mike:hover {
transform: scale(1.5) rotate(360deg);
}
.head {
width: 195px;
height: 120px;
background: #92ae57;
position: relative;
z-index: 1;
margin-left: 103px;
}
.eyes {
width:200px;
position: absolute;
bottom: 45px;
}
.eye {
width: 95px;
height: 93px;
background-color: #ffe13b;
border: 10px solid #92ae57;
display: inline-block;
z-index: 2;
animation: eyes 5s infinite step-start 0s;
}
.eye:last-child {
float:right;
}
.pupil {
width: 1px;
height: 1px;
border: 10px solid #353535;
display: inline-block;
position: absolute;
top: 38px;
margin-left:27px;
z-index: 3;
animation: pupil 5s infinite step-start 0s;
}
.pupil:last-child{
float:right;
}
.ball {
width: 1px;
height: 1px;
border: 5px solid #6f8346;
position: absolute;
top: 70px;
left: 88px;
}
.ball:last-child {
float:left;
margin-left: 14px;
}
.mouth {
height: 100px;
width: 180px;
border-bottom: 4px solid #6f8346;
position: relative;
top: 8px;
left: 7px;
}
/* Animations */
@keyframes eyes {
0%, 100% {
background: #92ae57;
border-radius: 50%;
border: 10px solid #92ae57;
}
5%, 95% {
background:#ffe13b;
border-radius: 50%;
border: 10px solid #92ae57;
}
}
@keyframes pupil {
0%, 100% {
opacity: 0;
}
5%, 95% {
opacity: 1;
}
}
</style>
</body>
</html>
我正在使用 Sublimetext 2 并在 Chrome 中运行。
最佳答案
前缀的东西...
延迟持续时间仅在第一次开始时延迟动画，而不是在每次迭代时延迟。
几乎不使用 float ...特别是为此使用相对位置..
http://jsfiddle.net/T862G/ 看看它是否有效
@-webkit-keyframes eyes {
10% {background-color:#92ae57;}
25% {background-color:#ffe13b;}
}
@-webkit-keyframes pupil {
10% {opacity: 0;}
25% {opacity: 1;}
}
.mike:hover {
-webkit-transform: rotate(360deg) scale(1.5);
}
关于css - Css 新手。无法复制有关 Frog CSS 动画的教程，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20024559/