Css新手。无法复制关于青蛙CSS动画的教程
Css新手。无法复制关于青蛙CSS动画的教程
提问于 2013-11-16 22:10:08
这对我来说有点尴尬，但我有一个软件工程类的最后一个项目，我一直在寻找教程，这样我就可以看到并学习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>我使用的是超级文本2，运行在Chrome中。
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-11-16 22:45:29
前缀..。
延迟持续时间只在一开始就延迟动画，而不是在每次迭代时。
使用浮标BARELY...use相对位置，特别是在这个..。
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);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20024559
复制相关文章
相似问题
腾讯云开发者
