css3动画实现

1、tab切换
css3动画实现_第1张图片
使用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>tab1span>li>
		<li>tab2li>
		<li>tab3li>
	ul>
	<script type="text/javascript">
		$(function(){
			$("ul").on("click", "li", function(e){
				let target = $(e.target)
				$("li").removeClass('active')
				target.addClass("active")
			})
		})
	script>

2、顶部固定,滚动页面,顶部内容切换动画
css3动画实现_第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>

你可能感兴趣的:(css)