我正在尝试模拟使用HTML5 canvas标记和JavaScript制作的动画。我只使用HTML5和CSS,我觉得我很接近它,但是(可能还有其他)我需要在周期之间设置一个延迟(我猜),所以我正在使用的按钮可以显示在它上面拥有一段短暂的时间。
原始按钮动画可在here
中找到
body {
margin: 80px;
}
.ripples {
position: relative;
}
.ripple {
border: 1px solid #B82679;
width: 50px;
height: 50px;
border-radius: 50px;
position: absolute;
}
/*/*animation: name duration timing-function delay iteration-count direction fill-mode play-state;*/
.ripple-1 {
animation: ripple 1s linear infinite ;
}
.ripple-2 {
animation: ripple 1s linear infinite .8s;
}
@-webkit-keyframes ripple {
5%, 100% {
-webkit-transform: scale(1);
opacity: 1;
}
to {
-webkit-transform: scale(2);
opacity: 0;
}
}
<div class="ripples">
<div class="ripple ripple-1"> </div>
<div class="ripple ripple-2"></div>
<img src="https://i.stack.imgur.com/maRO9.png"/>
</div>
答案 0 :(得分:0)
.ripple-1 {
animation: ripple 2s linear infinite ;
}
.ripple-2 {
animation: ripple 2s linear infinite .45s;
}
@-webkit-keyframes ripple {
0% {
-webkit-transform: scale(1);
opacity: 1;
}
50% {
-webkit-transform: scale(2);
opacity: 0;
}
100% {
-webkit-transform: scale(2);
opacity: 0;
}
}
像这样的东西,基本上你的动画从0%到40%,动画的其余部分是再次开始之前的延迟。只是根据自己的喜好调整持续时间。希望它有所帮助
你可以这样居中 CSS:
.ripples {
position: relative;
width: 50px;
height: 50px;
background: url("https://i.stack.imgur.com/maRO9.png") center no-repeat;
}
.ripple {
border: 1px solid #B82679;
border-radius: 50px;
background: transparent;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
和HTML:
<div class="ripples">
<div class="ripple ripple-1"> </div>
<div class="ripple ripple-2"></div>
</div>