css3中的动画特效--跳动的篮球_css3实现动态小球-CSDN博客

本文链接：https://blog.csdn.net/qq_53983648/article/details/127758274

一.利用css3动画实现一个小球跳动效果

CSS3的“过渡”（transition）属性通过设定某种元素在某段时间内的变化实现一些简单的动画效果，让某些效果变得更加具有流线性与平滑性。CSS3的“动画”（animation）属性能够实现更复杂的样式变化以及一些交互效果，而不需要使用任何Flash或JavaScript脚本代码。过渡与动画的出现，使CSS在Web前端开发中不再仅仅局限于简单的静态内容展示，而是通过简单的方法使页面元素动了起来，实现了元素从静到动的变化。

效果图如下：

代码如下：

一.事先构思好结构，嵌套div，分别设置class名字，方便设置css样式

1.设置一个盒子，把我们需要的内容放在div里面，设置class名，方便设置样式把结构搭建好就能设置css样式了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/indext.css">
</head>
<body>
    <div class="box&