网页Css知识之简单相册

最新推荐文章于 2023-03-29 22:47:20 发布

01-01

最新推荐文章于 2023-03-29 22:47:20 发布

阅读量518

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML/Css/Javascript学习文章标签： css 入门 html 特效相册

本文链接：https://blog.youkuaiyun.com/qq_35354855/article/details/75040963

HTML/Css/Javascript学习专栏收录该内容

16 篇文章

订阅专栏

一个简单的css特效，鼠标置于图片之上，图片样式发生变化。推而广之，同样也适用于其他元素样式的动态变化。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>

	<style type="text/css">
		/*html与css与JavaScript三个，一个为数据，一个为样式，一个为行为*/
		/*此处为css内部样式表,相对应还有外部样式表,内联样式表*/
		.box {
			/*包括所有元素的总体*/
			width: 600px;
			height: 500px;
			/*border: solid 5px gray;*//*此处为边框,取消似乎更为好看一点*/
			margin-top: 100px;
			/*此处设置div的属性两边为auto,*/
			/*目的是无论网页时放大还是缩小,此div总是在整个网页中央*/
			margin-right: auto;
			margin-left: auto;
			
		}
		
		.title{
			/*题目*/
			border-bottom:dashed 1px green;
			/*边框下部分变为虚线，大小为一个像素，颜色为绿色*/
			width: auto;
			/*宽自动以适应box*/
			height: 40px;
			text-align: center;
			/*将字体居中*/
			line-height: 40px;
			/*行高*/
			font-size: 17px;
			/*字体大小*/
			font-family: georgia,serif;
			/*字体样式*/
			color: #993333;
			/*字体颜色*/
			
		}
		.container{
			/*此处div为放置除标题以及尾部之外的东西(照片)*/
			height: 400px;
			/*border: solid 1px gray;*/
			margin-top: 10px;
			/*同样可以不设置宽度*/
		}
		
		.item{
			/*此处便为放置每一个小图片的div*/
			width: 107px;
			height: 86px;
			float: left;
			/*设置为浮动,使div满即自动换行*/
			border: solid 5px gainsboro;
			/*分别为边框样式,边框宽度,边框颜色*/
			margin: 1px;
			vertical-align: top;
			background: greenyellow;
			/*div背景颜色*/
		}
		.item img{
			/*设置item中img的样式*/
			width: 105px;
			height: 84px;
			
			padding: 2px;
			background: white;
			border: 3px gray;
			/*vertical-align: top;
			display: inline;*/
		}
		
		.item img:hover{
			/*hover选择器,当鼠标移动到img上时,图片发生变化*/
			cursor: pointer;
			/*当鼠标移动到图片上时,鼠标箭头变成小手*/
			transition: all 0.6s;
			/*整个动态变化时间为0.6秒，css3过渡效果，从一种样式逐渐变为另一种样式*/
			/*若时长未规定,则不会有过渡效果*/
			/*过渡效果的时间曲线不一定为线性*/
			transform: scale(3);
			/*变化为原来的三倍大小*/
			/*此属性一般对元素进行2D或者3D转换,包括缩放旋转 或倾斜等*/ 
		}
		
		/*.item:hover {
			width: 250px;
			height: 250px;
			padding: 0;
			
			border: 3px solid #F00;
			cursor: pointer;
			
			transition: all 0.6s;
			 transform: scale(2);  
		}*/
	</style>

	<body>
		<div class="box">
			<div class = "title">
				Hoverbox Image Gallery
			</div>
			<div class="container">
				
				<div class="item"><img src="img/photo01.jpg"/></div>
				<div class="item"><img src="img/photo02.jpg" /></div>
				<div class="item"><img src="img/photo03.jpg" /></div>
				<div class="item"><img src="img/photo04.jpg" /></div>
				<div class="item"><img src="img/photo05.jpg" /></div>
				<div class="item"><img src="img/photo06.jpg" /></div>
				
				<div class="item"><img src="img/photo07.jpg" /></div>
				<div class="item"><img src="img/photo08.jpg" /></div>
				<div class="item"><img src="img/photo09.jpg" /></div>
				<div class="item"><img src="img/photo10.jpg" /></div>
				<div class="item"><img src="img/photo01.jpg" /></div>
				<div class="item"><img src="img/photo12.jpg" /></div>
				<div class="item"><img src="img/photo13.jpg" /></div>
				
				<div class="item"><img src="img/photo14.jpg" /></div>
				<div class="item"><img src="img/photo15.jpg" /></div>
				<div class="item"><img src="img/photo16.jpg" /></div>
				<div class="item"><img src="img/photo17.jpg" /></div>
				<div class="item"><img src="img/photo18.jpg" /></div>
				<div class="item"><img src="img/photo19.jpg" /></div>
				<div class="item"><img src="img/photo20.jpg" /></div>
				
				
			</div>
			<div style="text-align: center;">XHTML CSS 508 | Hoverbox by Nathan Smith. | Read the Tutorial.</div>
		</div>
		
	</body>

</html>

none	定义不进行转换。	测试
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。	测试
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)	定义 2D 转换。	测试
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。	测试
translateY(y)	定义转换，只是用 Y 轴的值。	测试
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x,y)	定义 2D 缩放转换。	测试
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。	测试
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。	测试
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。	测试
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。	测试
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。	测试
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。	测试
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。	测试
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。	测试
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。	测试
perspective(n)	为 3D 转换元素定义透视视图。	测试