一些css3小案例

最新推荐文章于 2024-05-21 13:52:06 发布

jifubu6013

最新推荐文章于 2024-05-21 13:52:06 发布

阅读量2.4k

点赞数 1

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	body{height: 1000px;}
		#dv{
			width: 300px;
			height: 300px;
			
			margin: 100px auto;
			position: relative;
			perspective: 1000px;
		}
		#dv::after,#dv::before{
			content: "";
			height: 100%;
			width: 100%;
			border-radius: 150px;
			display: block;
            position: absolute;
            left: 0;
            top: 0;
		}
		#dv::before{
			background-image: url(C:/Users/admin/Desktop/img/1.jpg);
		}
		#dv::after{
			background-image: url(C:/Users/admin/Desktop/img/5.jpg);
			transition:all 2s;
			transform-origin: center bottom ;
		}
		#dv:hover::after{
			transform: rotateX(-180deg);
		}


	</style>
</head>
<body>
<div id="dv"></div>

</body>
</html>

//音乐盒

<!DOCTYPE html>
<html>
<head>
	<title></title>
<style type="text/css">
body{
	margin: 0;
	padding:0;
	background-color: pink;
}
	#dv{
		height: 200px;
		width: 200px;
		margin: 50px auto;
		position: relative;
		transform-style:preserve-3d;
		transition:all 2s;
		
	}
	#dv::before,#dv::after{
		content: "";
		height: 100%;
		width: 100%;
		border-radius: 100px;
        position: absolute;
	}
	#dv::before{
		background-image: url(C:/Users/admin/Desktop/img/zi2.jpg);
        transform: translateZ(0);
        transform: rotateY(180deg);
	}
    #dv::after{
		background-image: url(C:/Users/admin/Desktop/img/zi1.jpg);
		transform: translateZ(0);
	}
	#dv:hover{
		transform: rotateY(180deg);
	}
</style>
</head>
<body>
<div id="dv"></div>
</body>
</html>

//零钱包

<!DOCTYPE html>
<html>
<head>
	<title></title>
<style type="text/css">
	body{
		margin: 0;
		padding:0;
	}
	#nav{
		height: 40px;
        list-style: none;
        
	}
	#nav li{
		float: left;
		height: 100%;
		width: 120px;
		position: relative;
		transition: all 1s;
		transform-style: preserve-3d;
	}
	#nav li span{
		width: 100%;
		height: 100%;
		text-align: center;
		position: absolute;
		line-height: 40px;
        left: 0;
        top: 0;
	}
	#nav li span:first-child{
		background-color: green;
        transform:rotateX(90deg) translateZ(20px);/*注意字的正反 转动了坐标轴跟着动*/
        
	}
	#nav li span:last-child{
		background-color: yellow;
		transform: translateZ(20px);
	}	

    #nav li:hover{
    	transform: rotateX(-90deg);
    }
</style>
</head>
<body>
<ul id="nav">
	<li>
		<span>12部分</span>
		<span>34部分</span>
	</li>
		<li>
		<span>12部分</span>
		<span>34部分</span>
	</li>
		<li>
		<span>12部分</span>
		<span>34部分</span>
	</li>
		<li>
		<span>12部分</span>
		<span>34部分</span>
	</li>
		<li>
		<span>12部分</span>
		<span>34部分</span>
	</li>
</ul>
</body>
</html>

//3D导航

<!DOCTYPE html>
<html>
<head>
	<title></title>
<style type="text/css">
	body{
		margin: 0;
		padding:0;
	}
	#nav{
		height: 40px;
        list-style: none;
        
	}
	#nav li{
		float: left;
		height: 100%;
		width: 120px;
		position: relative;
		transition: all 1s;
		transform-style: preserve-3d;
	}
	#nav li span{
		width: 100%;
		height: 100%;
		text-align: center;
		position: absolute;
		line-height: 40px;
        left: 0;
        top: 0;
	}
	#nav li span:first-child{
		background-color: green;
        transform:rotateX(90deg) translateZ(20px);/*注意字的正反 转动了坐标轴跟着动*/
        
	}
	#nav li span:last-child{
		background-color: yellow;
		transform: translateZ(20px);
	}	

    #nav:hover li{
    	transform: rotateX(-90deg);
    }
    #nav li:nth-child(1)
    {transition-delay: 0s;} /*延时*/
    #nav li:nth-child(2)
    {transition-delay: 0.25s;} /*这里li前面不设置#nav 就会一起转动*/
    #nav li:nth-child(3)
    {transition-delay: 0.5s;}
    #nav li:nth-child(4)
    {transition-delay: 0.75s;}
    #nav li:nth-child(5)
    {transition-delay: 1s;}

</style>
</head>
<body>
<ul id="nav">
	<li>
		<span>12部分</span>
		<span>34部分</span>
	</li>
		<li>
		<span>12部分</span>
		<span>34部分</span>
	</li>
		<li>
		<span>12部分</span>
		<span>34部分</span>
	</li>
		<li>
		<span>12部分</span>
		<span>34部分</span>
	</li>
		<li>
		<span>12部分</span>
		<span>34部分</span>
	</li>
</ul>
</body>
</html>

//3D导航改进