欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

css3做一個心形跳動

榮姿康2年前11瀏覽0評論

CSS3 可以實現更加豐富的動畫效果,比如實現一個心形跳動動畫就非常簡單。

.heart {
width: 50px;
height: 50px;
position: relative;
margin: 50px auto;
transform: rotate(45deg);
animation: beat 1s ease-in-out infinite;
}
.heart:before,
.heart:after {
content: "";
position: absolute;
width: inherit;
height: inherit;
border-radius: 50% 50% 0 0;
background: #fc2f70;
}
.heart:before {
top: -25px;
left: 0;
}
.heart:after {
top: 0;
left: 25px;
}
@keyframes beat {
0% {
transform: scale(0.75);
}
20% {
transform: scale(0.75) rotate(45deg);
}
40% {
transform: scale(1) rotate(45deg);
}
60% {
transform: scale(0.75) rotate(45deg);
}
80% {
transform: scale(0.75);
}
100% {
transform: scale(0.75);
}
}

以上代碼創建了一個 class 為 "heart" 的樣式,通過偽元素:before和:after分別實現心形的左半邊和右半邊。在樣式中使用動畫定義,通過keyframes實現心形的跳動效果。

采用這種方式,我們就能夠快速地實現一個讓愛的心跳動的效果啦!