css3无规则运动

CSS3中提供了丰富的动画效果，其中有一种有趣的无规则运动效果，可以让网页元素呈现出跳跳蹦蹦的效果。

.Box{
   width: 100px;
   height: 100px;
   background-color: red;
   position: absolute;
   animation: run 1s infinite;
}

@keyframes run{
   0%{
      transform: translate(0,0);
   }
   20%{
      transform: translate(50px,-50px);
   }
   40%{
      transform: translate(100px,0);
   }
   60%{
      transform: translate(50px,50px);
   }
   80%{
      transform: translate(0,0);
   }
   100%{
      transform: translate(-50px,-50px);
   }
}

css3无规则运动

代码中，首先定义了一个宽高为100px的红色方块，并设置了它的position为absolute，使其脱离文档流，可以随意移动。然后在该标签上添加animation属性，其中run为动画名称，1s为动画时间，infinite表示无限循环。

接下来是关键的部分，通过@keyframes定义了关键帧，实现了无规则的运动效果。关键帧使用百分数表示，每个关键帧设置不同的transform属性，即移动距离和方向。这里设置了六个关键帧，可以根据个人喜好自行调整。

总的来说，使用CSS3的无规则运动效果可以增加网页元素的趣味性，提高用户体验。而且它的实现也相对简单，只需设置好动画名称、时间和关键帧即可。

css3无规则运动

相关文章