分享一段代码实例,它实现了图片的模糊效果。
默认状态下,图片是模糊的,当鼠标悬浮那么图片会恢复正常状态。
代码实例如下:
<!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 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)