CSS3中有一个非常棒的特性——animation,它可以实现很多有趣的动画效果,比如心脏跳动效果。
/* 心脏跳动动画 */ @keyframes heartbeat { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } /* 构造心形 */ .heart { position: relative; width: 100px; height: 90px; transform: rotate(-45deg); top: -20px; } .heart:before, .heart:after { content: ""; position: absolute; background-color: red; border-radius: 50px 50px 0 0; } .heart:before { top: 0; left: 50px; width: 50px; height: 50px; } .heart:after { top: -50px; left: 0; width: 50px; height: 50px; } .heart:hover:before, .heart:hover:after { animation: heartbeat 0.8s ease-in-out infinite; }
实现心脏跳动的关键在于使用了CSS3的关键帧特性(@keyframes)和动画属性(animation)。
首先,我们需要定义一个名为“heartbeat”的关键帧,它包含三个状态(0%,50%,100%),用于控制心形缩放的大小。
然后,构造一个心形图案,通过:before和:after伪类分别绘制两个圆形,并利用border-radius属性画出心形效果。最后,在:hover状态下开启动画效果。
通过以上代码,我们就能够很容易地实现一个非常有趣的心脏跳动效果。使用animation属性可以为网页增添更多的生动性和趣味性,让用户感受到更加丰富的网页体验。