css动画小案例弹力球

系统管理员 2022-03-25 03:28 330阅读 0赞

##### 什么是 CSS3 中的动画？ #####

动画是使元素从一种样式逐渐变化为另一种样式的效果。
    
    可以改变任意多的样式任意多的次数。
    
    用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
    
    0% 是动画的开始，100% 是动画的完成。

##### 小案例效果 #####

![在这里插入图片描述][20190118230125714.gif]

##### 1.html结构布局 #####

<ul>
    	<li></li>
    	<li></li>
    </ul>

##### 2.css布局样式 #####

其实 animation 是可以设置复合样式的，为了便于练习，这里使用单样式进行书写。

<style>
    	ul,ol{
        
    		padding:0;
    		list-style:none;
    	}
    	body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dt{
        
    		margin:0;
    	}
    	ul{
        
    		position:relative;
    		top:150px;
    		width:50px;
    		height:150px;
    		margin:0 auto;
    	}
    
    	/* 弹力球动画 */
    	ul li:nth-child(1){
        
    		position:absolute;
    		top:5px;
    		left:10px;
    		width:30px;
    		height:30px;
    		border-radius:50%;
    		background-color:#ffff00;
    		animation-name:ball;				/* 动画名字，与动画帧进行绑定 */
    		animation-timing-function:ease;		/* 动画的速度曲线 */
    		animation-duration:.7s;				/* 动画执行时间 */
    		animation-iteration-count:infinite;	/*动画的播放次数，循环*/
    	}
    
    	/*动画帧，动画的播放器*/
    	@keyframes ball{
        
    	/*这里的百分比都是根据动画的时间来计算*/
    		0%{
        
    			margin-top:10px;
    		}
    		15%{
        
    			margin-top:108px;
    		}
    		100%{
        
    			margin-top:10px;
    		}
    	}
    
    	/* 弹力球影子动画 */
    	ul li:nth-child(2){
        
    		position:absolute;
    		bottom:0;
    		left:10px;
    		width:33px;
    		height:10px;
    		border-radius:50%;
    		background-color:#f0f0f0;
    		animation-name:ball-shadow;			/* 动画名字，与动画帧进行绑定 */
    		animation-timing-function: ease;	/* 动画的速度曲线 */
    		animation-duration:.7s;				/* 动画执行时间 */
    		animation-iteration-count:infinite;	/*动画的播放次数，循环*/
    
    	}
    
    	/*动画帧，动画的播放器*/
    	@keyframes ball-shadow{
        
    	/*这里的百分比都是根据动画的时间来计算*/
    		0%{
        }
    		15%{
        
    			width:31px;
    			height:9px;
    			background-color:#d3d3d3;
    		}
    		100%{
        }
    	}
    </style>

小案例比较简陋，欢迎留言探讨指正，勿喷。

[20190118230125714.gif]: /images/20220325/8dce6eab103d45a69192f45674d85e57.png

发表评论取消回复

表情：

评论列表（有 0 条评论，330人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaFX动画球示例

弹跳球是JavaFx中动画的“ Hello World”。它很容易编写，易于理解，甚至从这个原始阶段就可以揭示JavaFx的潜力。我们将首先创建一个运动球，该运动球将为随

妖狐艹你老母/ 2023年02月15日 05:11/ 0 赞/ 21 阅读

相关直播css小动画

直播css小动画今天写页面的时候 UI出了一个icon动画需求，我本以为这个是要ui出一个gif图的，结果她让我写个动画，本来向怼她的，但是转念一想我也没做过这样的动画，就

深碍√TFBOYSˉ_/ 2023年01月04日 14:52/ 0 赞/ 110 阅读

相关 canvas重力小球 html+css+js

先看效果（完整代码在底部）：因为录屏软件的原因，动画看着有点迟钝，其实是动画很顺畅的~ https://space.bilibili.com/176586698

墨蓝/ 2022年11月17日 14:52/ 0 赞/ 197 阅读

相关纯CSS弹性小球动画js特效

[下载地址![icon-default.png?t=L892][icon-default.png_t_L892]/images/20220828/fc79e842463c44f

喜欢ヅ旅行/ 2022年09月13日 14:20/ 0 赞/ 264 阅读

相关 Javascript与Canvas游戏场景开发之多彩弹力球

众所周知，Javascript结合HTML的canvas元素可以开发出丰富多彩的浏览器界面效果，并用于网页游戏的开发，下面分享一个在浏览器上实现的一个多彩弹力球Demo, 在这

柔光的暖阳◎/ 2022年05月28日 22:37/ 0 赞/ 176 阅读

相关（十二）小球动画实现

在商品页面，当我们添加商品的时候，即点击“+”按钮，会有一个小球做抛物线的动作降到左下角的购物车里面的动作，现在就讲讲如何实现小球做抛物线的动作。 ![20180505091

偏执的太偏执、/ 2022年05月25日 00:53/ 0 赞/ 189 阅读

相关纯 CSS 创作一个小球绕着圆环盘旋的动画

![1504257-20181124134659776-1392148482.gif][] 效果预览 [在线演示][Link 1] 按下右侧的“点击预览”按钮可以在当

╰半夏微凉°/ 2022年04月14日 04:24/ 0 赞/ 348 阅读

相关如何用纯 CSS 创作一个小球上台阶的动画

![在这里插入图片描述][20181129010125893.gif] 效果预览 [在线演示][Link 1] 按下右侧的“点击预览”按钮可以在当前页面预览，点击链接

刺骨的言语ヽ痛彻心扉/ 2022年04月13日 10:10/ 0 赞/ 238 阅读

相关用纯 CSS 创作一个小球反弹的动画

![1504257-20181206165833239-937354810.gif][] 效果预览 [在线演示][Link 1] 按下右侧的“点击预览”按钮可以在当前

左手的ㄟ右手/ 2022年04月11日 13:48/ 0 赞/ 266 阅读

相关 css动画小案例弹力球

什么是 CSS3 中的动画？动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。用百分比

系统管理员/ 2022年03月25日 03:28/ 0 赞/ 331 阅读