CSS3动画相册制作

最新推荐文章于 2024-06-18 12:33:46 发布

月疯

最新推荐文章于 2024-06-18 12:33:46 发布

阅读量229

点赞数

分类专栏：【HTML5】

本文链接：https://blog.csdn.net/chehec2010/article/details/119516641

版权

HTML CSS 动画效果图片轮播按钮交互

关键词由CSDN通过智能技术生成

【HTML5】专栏收录该内容

45 篇文章 6 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				background: pink;
			}
			section img{
				display: block;
				width: 100%;
				height: 100%;
				position: fixed;
				left: 0;right: 0;
				top: 0;bottom: 0;
				margin:auto;
				transition: 1s;
				opacity: 0;
				background: pink;
			}
			#btnBox{
				width: 700px;
				height: 140px;
				position: fixed;
				/* 3个值，第一个是上，第二个是左右，第三个是下 */
				margin:auto auto 0;
				z-index: 10;
			}
			#btnBox a{
				width: 120px;
				height: 120px;
				float: left;
				border: 10px solid #fff;
				border-radius: 70px;
			}
			#btnBox a:nth-child(1){
				background: url(img/1.jpg) no-repeat center;
				background-size: 100% 100%;
			}
			#btnBox a:nth-child(2){
				background: url(img/2.jpg) no-repeat center;
				background-size: 100% 100%;
			}
			#btnBox a:nth-child(3){
				background: url(img/3.jpg) no-repeat center;
				background-size: 100% 100%;
			}
			#btnBox a:nth-child(4){
				background: url(img/4.jpg) no-repeat center;
				background-size: 100% 100%;
			}
			#btnBox a:nth-child(5){
				background: url(img/5.jpg) no-repeat center;
				background-size: 100% 100%;
			}
			
			section img:nth-child(1){
				transform: translateX(-100%);
			}
			section img:nth-child(1):target{
				opacity:1;
				transform: translateX(0);
			}
			
			section img:nth-child(2){
				transform: translateY(-100%);
			}
			section img:nth-child(2):target{
				opacity:1;
				transform: translateY(0);
			}
			
			section img:nth-child(3){
				transform: scale(0) ;
			}
			section img:nth-child(3):target{
				transform: scale(1) rotate(360deg);
				opacity: 1;
			}
			
			section img:nth-child(4){
				transform: scale(0);
			}
			section img:nth-child(4):target{
				transform: scale(1);
				opacity: 1;
			}
			
			section img:nth-child(5){
				transform: scale(0);
			}
			section img:nth-child(5):target{
				transform: scale(1);
				opacity: 1;
			}
			
			
		</style>
	</head>
	<body>
		<section>
			<img id="im1" src="img/1.jpg" />
			<img id="im2" src="img/2.jpg" />
			<img id="im3" src="img/3.jpg" />
			<img id="im4" src="img/4.jpg" />
			<img id="im5" src="img/5.jpg" />
		</section>
		<div id="btnBox">
			<a href="#im1"></a>
			<a href="#im2"></a>
			<a href="#im3"></a>
			<a href="#im4"></a>
			<a href="#im5"></a>
		</div>
	</body>
</html>

月疯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3动画相册制作

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } html,body{ height: 100%; background: pink; } section...
复制链接

扫一扫

专栏目录