700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > web前端入门到实战:CSS鼠标悬浮图片模糊切换效果

web前端入门到实战:CSS鼠标悬浮图片模糊切换效果

时间:2018-10-27 19:20:35

相关推荐

web前端入门到实战:CSS鼠标悬浮图片模糊切换效果

分享一段代码实例,它实现了图片的模糊效果。

默认状态下,图片是模糊的,当鼠标悬浮那么图片会恢复正常状态。

代码实例如下:

<!doctype html><html><head><meta charset="utf-8"><meta name="author" content="/" /><title>web前端开发学习q群:731771211 技术分享,欢迎基础小伙伴</title><style type="text/css">body, html {margin: 0;padding: 0;width: 100%;height: 100%;}.container {padding: 20px;position: relative;overflow: hidden;}img {height: 200px;transition: .5s ease-in-out;}.container div {width: 300px;overflow: hidden;float: left;margin-left: 40px;}.blur img {filter: blur(5px);-webkit-filter: blur(5px);}.blur img:hover {filter: blur(0);-webkit-filter: blur(0);}</style></head><body><div class="blur container"><div><img src="demo/CSS/img/gamesky.jpg" /></div></div></body></html>web前端开发学习Q-q-u-n: 767273102 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)

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