3.5 KiB
3.5 KiB
id | title | challengeType | videoUrl | forumTopicId | dashedName |
---|---|---|---|---|---|
587d78a8367417b2b2512ae4 | 使用無限的動畫計數製作 CSS 心跳 | 0 | https://scrimba.com/c/cDZpDUr | 301062 | make-a-css-heartbeat-using-an-infinite-animation-count |
--description--
這也是一個用 animation-iteration-count
屬性創造持續動畫的例子,它基於我們在前面挑戰中創建的心形。
心跳動畫的每一秒包含兩個部分。 heart
元素(包括 :before
和 :after
)使用 transform
屬性改變其大小,背景 div
使用 background
屬性改變其顏色。
--instructions--
給 back
class 和 the heart
class 添加 animation-iteration-count
屬性,將屬性值設置爲 infinite
,使心保持跳動。 heart:before
和 heart:after
所選擇的元素則不需要添加動畫屬性。
--hints--
heart
class 的 animation-iteration-count
的屬性值應爲 infinite
。
assert($('.heart').css('animation-iteration-count') == 'infinite');
back
class 的 animation-iteration-count
的屬性值應爲 infinite
。
assert($('.back').css('animation-iteration-count') == 'infinite');
--seed--
--seed-contents--
<style>
.back {
position: fixed;
padding: 0;
margin: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
animation-name: backdiv;
animation-duration: 1s;
}
.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: pink;
height: 50px;
width: 50px;
transform: rotate(-45deg);
animation-name: beat;
animation-duration: 1s;
}
.heart:after {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;
}
.heart:before {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: -25px;
left: 0px;
}
@keyframes backdiv {
50% {
background: #ffe6f2;
}
}
@keyframes beat {
0% {
transform: scale(1) rotate(-45deg);
}
50% {
transform: scale(0.6) rotate(-45deg);
}
}
</style>
<div class="back"></div>
<div class="heart"></div>
--solutions--
<style>
.back {
position: fixed;
padding: 0;
margin: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
animation-name: backdiv;
animation-duration: 1s;
animation-iteration-count: infinite;
}
.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: pink;
height: 50px;
width: 50px;
transform: rotate(-45deg);
animation-name: beat;
animation-duration: 1s;
animation-iteration-count: infinite;
}
.heart:after {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;
}
.heart:before {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: -25px;
left: 0px;
}
@keyframes backdiv {
50% {
background: #ffe6f2;
}
}
@keyframes beat {
0% {
transform: scale(1) rotate(-45deg);
}
50% {
transform: scale(0.6) rotate(-45deg);
}
}
</style>
<div class="back"></div>
<div class="heart"></div>