CSS3是一种可以实现各种动画效果的样式语言。使用CSS3的动画效果之一是跳动动画,它可以为网站添加增强的交互效果。
/* 定义一个要做动画的元素 */ .jump { font-size: 50px; animation: jump 1s infinite alternate; } /* 定义动画 */ @keyframes jump { 0% { transform: translateY(0); } 100% { transform: translateY(-50px); } }
以上代码演示了如何通过CSS3在一个元素上创建跳动动画。首先定义了一个要做动画的元素,给它设置一个字体大小,并且使用animation
属性来定义动画名称、持续时间(1秒)、循环次数(无限)、方向(交替)等属性。
接下来,在@keyframes
块中定义跳动动画的具体内容。这里通过translateY
属性实现纵向移动效果,从初始状态的0
开始,100%
结束时往上移动50px
,创造了类似弹跳的效果。
通过这样的方式,我们可以很容易地通过CSS3实现各种跳动动画效果,为网站增加生动、有趣的动态元素。