700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > HTML点击图片下方出现阴影 纯css实现图片点击时移动效果和阴影效果

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

时间:2020-02-25 07:16:00

相关推荐

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-neirongimg{margin:5px;max-width:100%;height:auto;box-shadow:2px3px2px0px#BEBBBB;}图片阴影效果

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

好了,教程完毕!

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。