css3动画实现

最新推荐文章于 2024-08-26 15:56:55 发布

纟31

最新推荐文章于 2024-08-26 15:56:55 发布

阅读量514

点赞数

分类专栏： css 文章标签： css3

本文链接：https://blog.csdn.net/qq_35423431/article/details/100536116

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、tab切换
在这里插入图片描述
使用css伪类、transition、transform实现

li:after给每个li加上一个红色border；
使用transform: scaleX(0);缩放，1是正常大小，2是两倍长度，0是长度为0px，不显示；
hover时，设置scale为正常大小，就能显示出来；

 	<style type="text/css">
		*{
			margin:0;
			padding: 0;
		}
		ul{
			width: 300px;
			height: 50px;
			background: #000;
			margin: 100px auto;
		}
		li{
			width: 100px;
			float: left;
			list-style: none;
			color: #fff;
			text-align: center;
			line-height: 50px;
			cursor: pointer;
			display: inline-block;
			position: relative;
		}
		li:after{
			content: ' ';
			background-color: red;
		    width: 100px;
		    height: 5px;
		    position: absolute;
		    bottom: 0;
		    left: 0;
		    transform: scaleX(0);
		    transition: ease-in-out 0.2s;
		}
		.active:after,li:hover:after{
			transform: scaleX(1);
		}
	</style>
	<ul>
		<li class="active"><span>tab1</span></li>
		<li>tab2</li>
		<li>tab3</li>
	</ul>
	<script type="text/javascript">
		$(function(){
			$("ul").on("click", "li", function(e){
				let target = $(e.target)
				$("li").removeClass('active')
				target.addClass("active")
			})
		})
	</script>

2、顶部固定，滚动页面，顶部内容切换动画
在这里插入图片描述
transform: translateY(100%); 转换，由于是上下的一个切换动画，使用translateY，控制元素在Y轴上的变化，100%代表div沿Y轴向下平移自身高，-100%向上；（PS：X轴正是右负是左，Y轴正是下负是上）

transition: ease-in-out .3s;，过渡;

后显示的元素需要绝对定位，固定位置；

	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		body{
			background: #f7f7f7;
		}
		.container{
			height: 1000px;
	    background-color: #fff;
	    border-radius: 4px;
	    margin: 30px;
	    box-shadow: 0 1px 3px rgba(26,26,26,.1);
	    -webkit-box-shadow: 0 1px 3px rgba(26,26,26,.1);
		}
		header{
			width: 100%;
			height: 56px;
		}
		.header-ct{
			position: fixed;
			top: 0;
			left: 0;
			height: 56px;
			width: 100%;
			line-height: 56px;
			overflow: hidden;
	    	-webkit-box-shadow: 0 1px 3px rgba(26,26,26,.1);
	    	box-shadow: 0 1px 3px rgba(26,26,26,.1);
		}
		.default-title{
			transition: ease-in-out .3s;
			background-color: green;
			color: #fff;
		}
		.move-title{
			transition: ease-in-out .3s;
			position: absolute;
	    	top: 0;
	    	left: 0;
	    	width: 100%;
	    	height: 100%;
	    	/*div沿Y轴向下平移自身高度*/
	    	transform: translateY(100%);
	    	background-color: red;
	    	color: #fff;
		}
		.default-top-animate{
			/*div沿Y轴向上平移自身高度*/
			transform: translateY(-100%); 
		}
		.move-top-animate{
			transform: translateY(0);
		}
	</style>
</head>
<body>
<header>
	<div class="header-ct">
		<div class="default-title">最顶部显示</div>
		<div class="move-title">向下滑动后显示</div>
	</div>
</header>
<div class="container">内容部分</div>
</body>
<script type="text/javascript" src="./jQuery.js"></script>
<script type="text/javascript">
	$(function(){
		// 防抖
		function debounce(fn, delay){
			let timer = null
			return function(){
				clearTimeout(timer);
				timer = setTimeout(()=>{
					fn.apply(this, arguments)
				}, delay)

			}
		}
		// 向下滑动
		window.onscroll = debounce(scrollHandle, 100)
		function scrollHandle() {
			let scroll = $(window).scrollTop()
			if(scroll > 40){
				$(".default-title").addClass("default-top-animate")
				$(".move-title").addClass("move-top-animate")
			}else{
				$(".default-title").removeClass("default-top-animate")
				$(".move-title").removeClass("move-top-animate")
			}
		}

	})
</script>