CSS特效029：超逼真的3D篮球弹跳，含挤压弹起模态

ゞ浴缸里的玫瑰 2024-02-05 14:39 3阅读 0赞

[CSS常用示例100+专栏目录][CSS_100]

> 本专栏记录的是经常使用的CSS示例与技巧，主要包含CSS布局，CSS特效，CSS花边信息三部分内容。其中CSS布局主要是列出一些常用的CSS布局信息点，CSS特效主要是一些动画示例，CSS花边是描述了一些CSS相关的库、知识点、理论篇章等。 因为常用所以记录、展示、分享，希望能给您带来帮助。

#### 文章目录 ####

*   *  效果图
     *  源代码
     *  CSS基础知识点
     *  结尾语

css实战中，怎么绘制篮球弹跳，含挤压弹起模态的动画呢？这里集聚了放射性投影，位置迁移，篮球旋转等效果，很酷很绚丽，具体请参考源代码。

### 效果图 ###

![在这里插入图片描述][2bd3139b5ea84d7ba6fbf91dfefff66f.gif_pic_center]

### 源代码 ###

/*
    * @Author: 大剑师兰特（xiaozhuanlan），还是大剑师兰特（CSDN）
    * @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。
    * @Email: 2909222303@qq.com
    * @weixin: gis-dajianshi
    * @First published in CSDN
    * @First published time: 2023-12-14
    */
    <template>
    	<div class="container">
    		<div class="top">
    			<h3>篮球弹跳，含挤压弹起模态</h3>
    			<div class="author">大剑师兰特, 还是大剑师兰特，gis-dajianshi</div>
    		</div>
    		<div class="dajianshi">
    <div id="suport"><div id="smash"><div id="translateShadow"><div id="light"></div><div id="rotateImg"></div></div></div></div>
    		</div>
    	</div>
    </template>
    
    <style scoped>
    
    	.container {
        
    		width: 1000px;
    		height: 600px;
    		margin: 50px auto;
    		border: 1px solid green;
    		position: relative;
    	}
    
    	.top {
        
    		margin: 0 auto 0px;
    		padding: 10px 0;
    		background: peru;
    		color: #fff;
    	}
    
    	.dajianshi {
        
    		width: 100%;
    		height: 500px;
    		text-align: center;
    		position: relative;
    	}
    
    
    	#suport {
        
    		position: absolute;
    		bottom: 80px;
    		width: 100%;
    		text-align: center;
    	}
    
    	#smash {
        
    		animation-name: smash;
    		animation-duration: 1s;
    		animation-direction: alternate;
    		animation-iteration-count: infinite;
    		animation-timing-function: ease-in-out;
    		transform-origin: bottom;
    	}
    
    	#translateShadow,
    	#rotateImg,
    	#light {
        
    		border-radius: 50%;
    		display: inline-block;
    		width: 200px;
    		height: 200px;
    	}
    
    	#light {
        
    		background-image: radial-gradient(circle at 20% 20%, rgba(255, 221, 179, .7), rgba(255, 221, 179, .5) 10%, transparent 30%, rgba(83, 42, 0, .8) 85%);
    		position: absolute;
    		z-index: 1;
    	}
    
    	#translateShadow {
        
    		animation-name: translateShadow;
    		animation-duration: 1s;
    		animation-direction: alternate;
    		animation-iteration-count: infinite;
    		animation-timing-function: ease-out;
    	}
    
    	#rotateImg {
        
    		background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='75 75 251 251' fill='rgb(83,42,0)'><path d='M313.3,145.3c-14.4-29.3-38.8-50.5-67.1-61.6c-4.6-1.7-16.2-5.1-21.3-6.3	c-26.3-5.3-54.5-2.3-80.4,10.4c-30.2,14.8-52.9,40.6-63.8,72.5c-10.9,31.8-8.7,66,6.2,96.1l0.1,0.2c2.1,4.2,4.4,8.3,6.9,12.2l0,0	c0,0,0,0,0,0c23.6,36.9,64.4,58,106.5,58c18.7,0,37.6-4.1,55.4-12.9c30.2-14.8,52.9-40.6,63.8-72.5 	C330.3,209.6,328.1,175.5,313.3,145.3z M238.3,86.2c25.2,12.5,41.2,36.6,46,68.5c-24.3,0.8-45.4-15.7-67.4-33.1 	c-18.4-14.5-37.3-29.3-58.9-34.2C184.6,77.6,212.8,77.7,238.3,86.2z M85.4,161.9c10.4-30.6,32.2-55.3,61.2-69.6 	c0.9-0.4,1.7-0.8,2.6-1.2c23.6,2.3,44.4,18.6,64.6,34.5c21.4,16.9,43.4,34.1,68.8,34.1c0.8,0,1.5,0,2.3-0.1c1,9.5,1.1,19.7,0.2,30.4 	c-9.8-3.3-19.3-5.9-25.7-7.6c-37.6-9.8-79.7-16.1-112.5-16.7c-24-0.5-53,1.8-66,14.2C81.8,173.9,83.4,167.8,85.4,161.9z M91.4,254.4 	l-0.1-0.2c-10.1-20.5-14.1-42.8-11.9-65l0.5,0.2c5.3-12.9,29-19.5,66.7-18.8c32.5,0.7,74.1,6.8,111.4,16.6 	c10.1,2.6,18.9,5.3,26.5,7.8c-1.2,10.2-3.3,20.4-6.3,30.3c-19.8-8.8-48.7,2.6-81.8,15.7c-32,12.6-68.1,26.8-99.7,23 	C94.9,261,93.1,257.7,91.4,254.4z M187.8,321.2c-34.6-3.6-67-21.9-87.5-51.7c31.8,2.4,66.9-11.4,98-23.7 	c32.4-12.8,60.6-23.9,78.4-15.5c-5.6,17.2-13.6,33.4-23.5,47c-12.8,17.7-34.5,39.5-65.6,43.3L187.8,321.2z M253.5,309.4 	c-15.6,7.7-32.1,11.6-48.4,12.3c36.2-12.4,62.8-49,76.1-88.8c9.1,6.7,14.2,20.1,15.8,40.6C285.7,288.6,270.9,300.9,253.5,309.4z 	 M314.8,239.8c-3.3,9.8-7.8,19-13.3,27.4c-2.4-19.7-8.5-32.6-18.7-39.3c3.1-10.3,5.4-20.8,6.6-31.1c19.2,6.9,29.2,13.2,30.7,17.3 	l0.4-0.2C319.6,222.6,317.7,231.3,314.8,239.8z M290,191.7c1.1-11.3,1-22.1-0.2-32.4c6.8-0.9,13.8-3,21.1-6.8l-2.3-4.5 	c-6.8,3.4-13.2,5.4-19.5,6.3c-1.6-11.1-4.6-21.4-8.8-30.7c-4.6-10.3-10.8-19.2-18.3-26.6c19.5,11.6,36,28.7,46.8,50.5 	c9.3,18.9,13.4,39.4,12.3,59.8C314.9,201.6,302.6,196.1,290,191.7z'/></svg>");
    		background-color: darkorange;
    		background-size: 100%;
    		animation-name: rotateImg;
    		animation-duration:  5s;
    		animation-iteration-count: infinite;
    		animation-timing-function: linear;
    	}
    
    	@keyframes translateShadow {
        
    		0% {
        
    			transform: translateY(0);
    			box-shadow: 40px 40px 10px #444466
    		}
    
    		100% {
        
    			transform: translateY(-205px);
    			box-shadow: 40px 350px 250px #444466
    		}
    	}
    
    	@keyframes smash {
        
    		0% {
        
    			transform: scaleY(.7)
    		}
    
    		15% {
        
    			transform: scaleY(1)
    		}
    	}
    
    	@keyframes rotateImg {
        
    		100% {
        
    			transform: rotate(360deg)
    		}
    	}
    </style>

### CSS基础知识点 ###

> 1.CSS样式表  
> 2.基础选择器：（1）标签选择器，（2）类选择器，（3）id选择器，（4）通配符选择器  
> 3.复合选择器：（1）后代选择器，（2）子选择器，（3）并集选择器，（4）交集选择器，（5）伪类选择器。  
> 4.字体样式属性：（1）字体大小font-size，（2）字体类型font-family，（3）字体粗细font-weight，（4）字体风格font-style  
> 5.文本外观样式：（1）设置文本颜色color，（2）word-spacing，（3）letter-spacing，（4）line-height，（5）text-transform，（6）text-decoration，（7）text-align，（8）text-indent，（9）white-space  
> 6.文本外观属性：（1）text-shadow，（2）overflow  
> 7.CSS层叠性、继承性及优先级  
> 8.边框介绍  
> 8.1边框属性：（1）border-style，（2）border-width，（3）border-color，（4）border-radius  
> 8.2内边距属性  
> 8.3外边距属性  
> 8.4box-shadow  
> 9.背景属性  
> 9.1背景颜色  
> 9.2背景图片：（1）background-repeat，（2）background-position，（3）background-attachment，（4）background-size，（5）background-origin，（6）background-clip，（7）复合写法，（8）不透明  
> 10.元素的类型  
> 11.span标签  
> 12.display  
> 13.表格标签：（1）table标签，（2）tr标签，（3）td标签，（4）th标签，（5）表格边框，（6）折叠边框，（7）表格宽度和高度，（8）表格边框间距border-spacing，（9）表格标题位置caption-side  
> 14.表单  
> 14.1创建表单：（1）标签  
> 14.2表单控件：（1）input控件，（2）input/标签的type属性，（3）textarea控件，（4）select控件  
> 15.CSS盒子模型：（1）边框（border），（2）内边距(padding)，（3）外边距（margin），（4）清除内外边距，（5）盒子模型  
> 16.浮动布局：（1）传统网页布局，（2）浮动简介，（3）浮动特性，（4）清除浮动  
> 17.定位布局：（1）定位组成，（2）相对定位relative，（3）绝对定位absolute，（4）子绝父相，（5）固定定位fixed，（6）定位叠放次序z-index，（7）定位拓展  
> 三.其他  
> 1.圆角边框：（1）圆形，（2）圆角矩形  
> 2.盒子阴影  
> 3.文字阴影  
> 4.用户界面样式：（1）鼠标样式 cursor，（2）轮廓线 outline，（3）防止拖拽文本域 resize，  
> 5.过渡 transition

### 结尾语 ###

CSS的应用无处不在，希望某个片段就能帮助你，欢迎学习GIS的朋友一起交流。  
[《 Openlayers 综合示例200+ 》][Openlayers _200_]，  
[《 leaflet示例教程100+ 》][leaflet_100_]，  
[《 Cesium示例教程100+》][Cesium_100]，  
[《MapboxGL示例教程100+》][MapboxGL_100]。

[CSS_100]: https://dajianshi.blog.csdn.net/article/details/134372791
[2bd3139b5ea84d7ba6fbf91dfefff66f.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/b3795e7f9d744d2fb0fdec142c6e5c20.png
[Openlayers _200_]: https://dajianshi.blog.csdn.net/article/details/126706466
[leaflet_100_]: https://dajianshi.blog.csdn.net/article/details/126747176
[Cesium_100]: https://blog.csdn.net/cuclife/category_11992805.html
[MapboxGL_100]: https://blog.csdn.net/cuclife/category_12284806.html