CSS3 動態哆啦A夢

/* CSS3 實現動態哆啦A夢 */
.heart {
width: 100px;
height: 100px;
position: relative;
animation: beat 1s infinite linear;
-webkit-animation: beat 1s infinite linear;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
}
.heart:after {
left: 0;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
@keyframes beat {
0% {transform: scale(1);}
50% {transform: scale(0.8);}
100% {transform: scale(1);}
}
@-webkit-keyframes beat {
0% {-webkit-transform: scale(1);}
50% {-webkit-transform: scale(0.8);}
100% {-webkit-transform: scale(1);}
}

以上是實現動態哆啦A夢的代碼。

在這個代碼中使用了CSS3 的 @keyframes 和 @-webkit-keyframes，分別實現了動態效果在不同瀏覽器上的兼容性。

動態哆啦A夢在頁面中實現的方法，可以用于制作眾多其他動態效果，如脈動的按鈕、跳躍的動畫等等，可以大大提高網頁的交互性和美觀性。