代码分享——CSS3之产品列表-鼠标滑过效果

CSS3之产品列表-鼠标滑过效果

这篇文章是介绍一下一部分CSS3的样式，还有写的一个页面，主要写的是产品列表的鼠标滑过效果，页面用了一点点简单的小特效。

接下来进入正题：

我简单说一下我是怎么写的。

HTML的结构层，就是用一个大的div套两个小的div，第一个小的div里面放了一张图，我把它当做了背景图使用，就是没有用background去做背景图，第二个div里面放了h2,p,a标签，这个页面一共有四张图，同样用了四个这样的大div做了这样的页面。基本的页面的结构就是这样，这也是html里body里面的大致结构。

CSS3的表现层，css样式像margin,padding,font,box-sizing,overflow,position等，都是基础的东西，我就不多说什么了，我就来说下与众不同点的东西。

box-shadow 就是向框添加阴影。

box-shadow: h-shadow v-shadow blur spread color inset;

详细的值就是：水平 垂直 模糊距离 阴影的尺寸 阴影的颜色 将外部阴影改为内部阴影

cursor 就是要显示的光标的形状。

其中的default属性就是默认光标，也就是一个箭头。

max-width 是元素的最大宽度。

它的元素可以比指定值窄，但不能比其宽，但它不允许是负值。

text-transform 是控制文本的大小写。

它会改变元素中的字母大小写。如果值为 capitalize，则要对某些字母大写。

transform 就是旋转，转换。

transform的属性scaleY(y）就是设置 Y 轴进行缩放转换。

transition 就是设置过渡。

filter是滤镜属性。

IE8 以及更早的版本支持替代的filter属性。就像：filter:Alpha(opacity=50)。

opacity 设置元素的不透明或透明。

从0.0（透明）到1.0（不透明）。0也就是不透明。

以上基本上就是我页面的CSS3的一些“与众不同”的样式，当然也没有什么与众不同的，只是基本的小特效，我也录了一个简单的小视频，也就是视频里的特效（目前视频还在审核，但是后期会上传视频，敬请期待~），如果有喜欢的人可以下载下方的分享的百度网盘的代码。

密码：6hs6