HTML点击图片下方出现阴影,纯css实现图片点击时移动效果和阴影效果

有人喜欢用js加css实现这样的效果，而我比较喜欢用最简单的方法实现这样的效果，因为我是个简单的人，所以我要做最简单实用的事儿(hei hei)...好处就是：简单，方便操作，给服务器减少压力,对seo也比较友好...

其实,实现的方法,说起来很简单，例如我想用CSS控制内容页的图片，那么我们就会用到标签属性 ：“article-neirong img{}”来实现，给内容页的图片增加 鼠标“点击时”移动，或者放大，抖动这样效果怎么实现呢？例如：我们会用到这样的标签属性：“.article-neirong img:hover{}”来实现！

再说下Css常见的属性命令，然后你再看上面的“img:hower”就知道我为什么这样用了！

如全站默认文字链接颜色：a:link {color: #FF0000; /*连接默认的颜色变化*/}

链接访后的颜色：a:visited {color: #0000FF; /*连接访问的颜色变化*/}也就是点击后这个链接会变颜色，可以用这种方式告诉用户，你已经浏览过这个网页。

鼠标放到文字时，变化的效果，图片就是用的这个：a:hover {color: #00FF00; /*鼠标经过的颜色变化*/我只是把“a”换做了“img”

这个呢就是点击时瞬间链接变化颜色的方法：a:active {color: #FFFF00; /*鼠标按下的颜色变化*/}

(开头的a代表文字，如果你把a换做img那就代表图片，只是举例，但有些命令我们不能这样用在图片上，不然有点不伦不类了，影响图片显示效果，当然如果你喜欢各种非主流，重口味，随你怎么折腾了 呵呵)

下面是图片阴影效果和鼠标移到图片时移动效果：

.article-neirong img{margin: 5px;max-width:100%;height:auto; box-shadow: 2px 3px 2px 0px #BEBBBB;}图片阴影效果

.article-neirong img:hover{width:100px; -webkit-transform:translate(30px, 0);-moz-transform:translate(30px, 0);}移动效果

好了，教程完毕！

怎么样，是不是听君一席话，有种胜读十年书，仿然大悟，茅塞顿开的感觉？