一.利用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"><div class="ball"><div class="a"></div><div class="b"></div></div></div><div class="shadow"></div>
</body>
</html>

2.设置css样式，根据小球大小调整样式，（利用了css+c3），实现小球的跳动效果，创建一个css，实现样式分离，养好习惯，方便以后的修改。

1.清除原有样式设置margin：0；padding：=0；，设置页面body的样式，设置视口高度，使用弹性布局，设置背景渐变色

*{margin: 0;padding: 0;
}
body{/*100%窗口高度*/height: 100vh;/*弹性布局水平垂直居中*/display: flex;justify-content: center;align-items: center;background: linear-gradient(200deg,#2f80ed,#56ccf2);
}

2.设置盒子宽高度，设置盒子里面的ball的圆角为50%，给父盒子一个相对定位，给ball子盒子一个绝对定位。

.box{width: 150px;height: 150px;/* border: 1px solid red; *//*执行动画：动画名 时长 减速 先反向再正向 循环播放*/animation: ball 0.6s ease-out alternate-reverse infinite;position: relative;
}
.ball{width: 150px;height: 150px;border-radius: 50%;background-color: brown;box-shadow: 0 0 2px 3px #000;/*溢出隐藏*/overflow: hidden;/*绝对定位*/position: absolute;z-index: 1;/*执行动画：动画名 时长 线性 循环播放*/animation: roll 3s linear infinite;
}

3.设置篮球的样式，给小球一个篮球的线条，边框给3px左右，加点模糊度，宽高设置为100%，

用：：before ：：after分别设置内部线条，其实是个有边框的圆形，再给他的父盒子一个溢出隐藏，overflow：hidden；，隐藏掉溢出的部分，同样设置一下a b 线条的宽高。

.ball::before,.ball::after{content: "";position: absolute;width: 100%;height: 100%;border-radius: 50%;border: 3px solid #000;/*加一点模糊*/filter: blur(0.5px);
}
.ball::before{left: -70%;
}
.ball::after{right: -70%;
}
.ball .a,.ball .b{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);background-color: #000;
}
.ball .a{width: 200px;height: 3px;
}
.ball .b{width: 3px;height: 200px;
}

4.设置小球上下跳动的阴影效果，阴影大小根据小球的上下跳动变化，设置阴影宽高，圆角，模糊度。

.shadow{width: 150px;height: 3px;border-radius: 50%;background-color: rgba(0, 0, 0, 0.4);/* margin-top: 300px; */position: absolute;bottom: 30vh;z-index: -1;filter: blur(1.5px);animation: shadow 0.6s ease-out alternate-reverse infinite;}

5.给小球添加css3动画效果，@keyframes为动画，给篮球加上跳动的动画，沿y轴跳动上下跳动，初始为0%，100%为下落效果，给篮球加上360deg的旋转效果，阴影跟着小球的上下跳动改变大小，然后给上面赋值动画属性的盒子加上animation：。

  /*定义动画*//*篮球跳动的动画*/@keyframes ball {0%{transform: translateY(10vh);}100%{transform: translateY(-20vh);}}/*篮球旋转的动画*/@keyframes roll{0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}}/*阴影的动画*/@keyframes shadow{0%{transform: scale(0.15,1.25);}100%{transform: scale(1.25,0.75);}}

以下是样式的完整代码：

*{margin: 0;padding: 0;
}
body{/*100%窗口高度*/height: 100vh;/*弹性布局水平垂直居中*/display: flex;justify-content: center;align-items: center;background: linear-gradient(200deg,#2f80ed,#56ccf2);
}
.box{width: 150px;height: 150px;/* border: 1px solid red; *//*执行动画：动画名 时长 减速 先反向再正向 循环播放*/animation: ball 0.6s ease-out alternate-reverse infinite;position: relative;
}
.ball{width: 150px;height: 150px;border-radius: 50%;background-color: brown;box-shadow: 0 0 2px 3px #000;/*溢出隐藏*/overflow: hidden;/*绝对定位*/position: absolute;z-index: 1;/*执行动画：动画名 时长 线性 循环播放*/animation: roll 3s linear infinite;
}
.ball::before,.ball::after{content: "";position: absolute;width: 100%;height: 100%;border-radius: 50%;border: 3px solid #000;/*加一点模糊*/filter: blur(0.5px);
}
.ball::before{left: -70%;
}
.ball::after{right: -70%;
}
.ball .a,.ball .b{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);background-color: #000;
}
.ball .a{width: 200px;height: 3px;
}
.ball .b{width: 3px;height: 200px;
}
.shadow{width: 150px;height: 3px;border-radius: 50%;background-color: rgba(0, 0, 0, 0.4);/* margin-top: 300px; */position: absolute;bottom: 30vh;z-index: -1;filter: blur(1.5px);animation: shadow 0.6s ease-out alternate-reverse infinite;}/*定义动画*//*篮球跳动的动画*/@keyframes ball {0%{transform: translateY(10vh);}100%{transform: translateY(-20vh);}}/*篮球旋转的动画*/@keyframes roll{0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}}/*阴影的动画*/@keyframes shadow{0%{transform: scale(0.15,1.25);}100%{transform: scale(1.25,0.75);}}

效果演示：

跳动的小球

以上就是html+css实现的动画效果，感兴趣的小伙伴可以去试一下，后续我会更新一些更有趣的案例供大家参考。请大家多多支持！

css3中的动画特效--跳动的篮球相关推荐

9款超绚丽的HTML5/CSS3应用和动画特效
HTML5 现在已经不是很前卫的东西了,越来越多的网站和移动应用都在不断地尝试使用HTML5来更好地优化用户体验.今天我们要分享9款超绚丽的HTML5/CSS3应用和动画特效,这里面有菜单.按钮.图片 ...
css3特效框,科技常识：6种非常炫酷的CSS3按钮边框动画特效
今天小编跟大家讲解下有关6种非常炫酷的CSS3按钮边框动画特效 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关6种非常炫酷的CSS3按钮边框动画特效的相关资料,希望小伙伴们看了有所帮助. ...
html边框炫酷效果,6种炫酷的CSS3按钮边框动画特效_html/css_WEB-ITnose
这是一款效果非常炫酷的CSS3按钮边框动画特效.这组按钮边框动画共有6种不同的效果.当鼠标滑过按钮的时候,按钮的边框会以不同的方式进行各种动画,效果非常的炫酷. 在线预览源码下载使用方法 HTML ...
html5文章标题定格,jQuery和css3文章标题动画特效
这是一款效果非常不错的jQuery和css3文章标题动画特效. HTML结构所有效果的html结构是一样的,使用一个作为wrapper,给它一些margins和max-width.标题使用的是标签 ...
纯CSS3文字Loading动画特效
纯CSS3文字Loading动画特效是一款个性的loading文字加载动画. 在线演示本地下载更多专业前端知识,请上 [猿2048]www.mk2048.com
html5 banner特效,HTML5特效库 CSS3遮罩banner动画特效源码
效果图各位朋友.大家早上好! 今天给大家带来的是 CSS3遮罩banner动画特效源码! 看倦的轮播图的,可以试试这个特效!别有一番意思! 大家可以按照自己的意愿进行行修改,改成自己喜欢的样子! 有 ...
css3中的动画学习分享
大家好,这里是demo软件园,今天为大家分享的是css3中的动画(animation). css3动画: 使元素从一种样式逐渐变化为另一种样式的效果. 动画原理:通过把人物的表情.动作.变化等分解后画 ...
css情景动画,css3中的动画属性animation应用场景及编写代码教程
讲解一下css3中的动画属性animation应用场景及编写代码教程以下讨论的是和css3 动画属性 animation 相关的css3中的动画属性animation应用场景及编写代码教程教程文章 ...
Vue实战项目开发--Vue中的动画特效
项目的源代码在GitHub上:点击查看目录 vue中的css动画原理在Vue中使用Animate.css库在Vue中同时使用过渡属性和动画 Vue中的Js动画与Velocity.js的结合 Vu ...

css3中的动画特效--跳动的篮球

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

效果图如下：

代码如下：

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

css3中的动画特效--跳动的篮球相关推荐

最新文章

热门文章