网页前端实现简单的动画效果 |
您所在的位置：网站首页 › 网页动画效果 › 网页前端实现简单的动画效果 |
网页前端实现简单的动画效果
|
使用 @keyframes实现简单的动画效果。 粉色的圆形在绿色的背景下水平向右移动，边移动便渐变，移动到屏幕中央时变换成黄色方形，再向右移动到屏幕边缘时，变为橙色圆形。 然后同样变幻着往反方向，永不停止。往返时间为4秒。效果截图如下：
本次练习主要考察动画效果的申明和使用，代码附下，欢迎大家评论指正！ 动画效果 #bo1 { width: 1247px; height: 600px; background-color: rgb(0, 240, 220); } @keyframes transmove { 0% { transform: translate(0px, 230px); background-color: salmon; border-radius: 50%; } 50% { transform: translate(624px, 230px); background-color: rgb(210, 240, 90); border-radius: 0%; } 100% { transform: translate(1147px, 230px); right: 0px; background-color: sandybrown; border-radius: 50%; } } #bo2 { width: 100px; height: 100px; animation-name: transmove; animation-duration: 4s; animation-iteration-count: infinite; animation-direction: alternate; }
|
【本文地址】
今日新闻 |
推荐新闻 |