网页Css知识之简单相册

来源：互联网发布：无线通信优化工程师编辑：程序博客网时间：2024/04/30 00:48

一个简单的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 转换元素定义透视视图。测试

以上为transform的一些方法，地址为http://www.w3school.com.cn/css3/css3_transition.asp

下面是具体特效的gif图

阅读全文

0 0