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);}移动效果

好了，教程完毕！

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

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

CSS3实战开发: 纯CSS实现图片过滤分类显示特效
CSS3实战开发: 纯CSS实现图片过滤分类显示特效原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大 ...
纯CSS将图片转换成黑白
纯CSS将图片转换成黑白几行代码就可以实现!效果非常好! 1. 正常效果截图鼠标悬停前后,分别示下: 2. 非正常效果截图:代码设置的不同,显示的效果不同! 比如:下面的设置导致图片效果不好! 参 ...
纯CSS实现图片动画
纯CSS实现图片动画 1.先网上下载一张sprites动画图片,直接百度搜sprites图片就可. 2.用css设置一个关键帧,确定好起始位置和终止位置, 通过background-position调 ...
如何用纯CSS将图片填满div，自适应容器大小
如何用纯CSS将图片填满div,自适应容器大小 2016-10-11 13:33 网页设计标签:css 代码 5987 3 我有一个模板,想按常规做一个div里面放置一个img图 ...
纯css实现图片自动闪光划过效果
纯css实现图片自动闪光划过效果 <!DOCTYPE html> <html> <head> <meta name="viewport" ...
纯CSS翻牌图片特效
使用图片 <!doctype html> <html> <head> <meta charset="utf-8"> <titl ...
《uni-app》移动端纯CSS实现不等高的瀑布流效果
<uni-app>移动端纯CSS实现不等高的瀑布流效果前言示例 WEB端示例移动端示例瀑布流实现第一种: flex 核心代码实现缺点完整代码第二种:column-coun ...
如何在html中加入动画效果,纯css如何实现按钮的水滴动画效果？
纯css如何实现按钮的水滴动画效果?下面本篇文章就来给大家介绍一下使用纯css实现Material Design中按钮的水滴动画效果.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...
css中图片整合的使用,CSS Sprites:图片整合技术详细案例
CSS Sprites 的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度.介绍了CSS Sprites技术的实现方法,优点和缺点.最后通过实例CSS Sprites技术制作导航栏演 ...

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

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

最新文章

热门文章