调用Css3动画实现小球在页面跳动和滚动

快乐的小海海

于 2019-01-18 20:12:26 发布

阅读量2.4k

点赞数 2

本文链接：https://blog.youkuaiyun.com/weixin_44539055/article/details/86545838

版权

本文介绍如何利用Css3的@keyframes规则创建小球跳动和滚动的动画效果，以此来提示用户页面的上下或左右切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

调用Css3动画实现小球在页面跳动和滚动

通过调用@keyframes Beating/ wobble实现小球在有页面跳动和滚动；实例可以调用来提示用户上下一屏和左右屏的切换

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	.qui { transform: translateY(40px); animation: Beating 3s ease infinite;background:#C43133;height:40px;width: 30px;border-radius: 50%; left: 50%; cursor: pointer;margin: 100px auto;}
	@keyframes Beating {
	0%{transform: translateY(0px);}	10%{transform: translateY(90px);} 20%{transform: translateY(15px);} 30%{transform: translateY(80px);}
	40%{transform: translateY(30px);}50%{transform: translateY(70px);}60%{transform: translateY(40px);}70%{transform: translateY(50px);}
	90%{transform: translateY(50px);}100%{transform: translateY(70px);}}
@keyframes wobble {
  0% {margin-left: 500px; background:green;}40% {margin-left:350px;background:orange;} 60% {margin-left: 600px;background: blue;}
  100% {margin