HTML5----图片或文字指定位子隐藏到显示动态效果

最新推荐文章于 2023-04-28 16:42:07 发布

原创最新推荐文章于 2023-04-28 16:42:07 发布 · 8.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML5

HTML5.CSS3 专栏收录该内容

46 篇文章

订阅专栏

本文介绍如何使用CSS实现图片动态效果，并通过JavaScript监听滚动事件来触发元素显示变化。

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

图片或文字隐藏到显示动态效果

各小图从一个位子过度移动显示到指定位子

CSS:

left0{position:absolute;top:0px; left:100px;

opacity: 0;filter:alpha(opacity=1);
-webkit-transition: all 1.2s ease .6s;
-moz-transition: all 1.2s ease .6s;
transition: all 1.2s ease .6s;

/*以下为自转动画*/
/* webkit chrome, safari, mobile */  
-webkit-animation-name: spin;   
-webkit-animation-duration: 12s;
-webkit-animation-iteration-count: 1;   /*1:自转一周; infinite:无限的自转*/
-webkit-animation-timing-function: linear;  

/* mozilla ff */  
-moz-animation-name: spin;   
-moz-animation-duration: 12s; 
-moz-animation-iteration-count: 1;   
-moz-animation-timing-function: linear;  

/* microsoft ie */  
-ms-animation-name: spin;   
-ms-animation-duration: 12s; 
-ms-animation-iteration-count: 1;   
-ms-animation-timing-function: linear; 

/* Opera */  
-o-animation-name: spin;   
-o-animation-duration: 12s; 
-o-animation-iteration-count: 1;   
-o-animation-timing-function: linear; 
}

.danmian { opacity: 1; filter:alpha(opacity=100);}

.mob-bd .anim .danmian .left0{ left:-40px}    /*将从左-40px向0px过度平滑显示*/

/**------按钮--0.3s过度到显示----------**/
.download-button:hover
{ background:#00aeff; 
-webkit-transition: all .5s ease .3s;
-moz-transition: all .5s ease .3s;
transition: all .5s ease .3s;
}

滑到一指定高度响应事件

JS:

<script type="text/javascript">
$(window).scroll( function(){
		scrollList();
})
function scrollList(){
	if($(window).scrollTop() > 140){
		$('.left0').addClass('danmian');}		
	if($(window).scrollTop() > 240){
		$('.left1').addClass('danmian');}

}
scrollList();
</script>