Toggle navigation
首页
热门资讯
资源下载
技术博客
会员
中心
会员中心
发布博文
发布资源
首页
文章中心
JavaScript
纯CSS实现的当鼠标移上图片添加阴影效果代码
215 阅读
0 评论
142 点赞
我是
靠谱客
的博主
眼睛大缘分
,这篇文章主要介绍
纯CSS实现的当鼠标移上图片添加阴影效果代码
,现在分享给大家,希望可以做个参考。
<html> <head> <title>CSS给图片添加阴影</title> <style> *{padding:0;margin:0;} body{background:#E8EDF1;padding:20px;} #profileAvatar {overflow:hidden;zoom:1;} #profileAvatar i{float:left;visibility:hidden;background:url(http://files.uoften.com/demoimg/200912/avatar.gif) 0 0 no-repeat;} #profileAvatar i i{background-position:100% 0; } #profileAvatar i i i{background-position:0 100%;} #profileAvatar i i i i{padding:0 5px 6px 0;background-position:100% 100%; } #profileAvatar img{visibility:visible;display:block;padding:3px;border:1px solid #ccc;background:#fff;} </style> </head> <body> <div id="profileAvatar"> <i><i><i><i> <img src="//file2.kaopuke.com:8081/files_image/201804/logo.gif" width="215" id="image" onmouseover="show()" onmouseout="show()" /> </i></i></i></i> </div> 鼠标移上去显示圆滑的阴影 <input type="button" value="缩小图片" onclick="document.getElementById('image').width -=10;" /> </body> </html>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
最后
以上就是
眼睛大缘分
最近收集整理的关于
纯CSS实现的当鼠标移上图片添加阴影效果代码
的全部内容,更多相关
纯CSS实现
内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(
142
)
本文分类:
JavaScript
浏览次数:
215
次浏览
发布日期:2022-04-11 16:58:03
本文链接:
https://www.kaopuke.com/article/k-p-k_14_u_7_o_6_fx_14__7_gz.html
相关文章
网站备案的几点好处
用vmware安装linux系统过程
Fdisk硬盘分区图文教程(超详细)
JS拉起或下载app的实现代码
纯CSS实现的当鼠标移上图片添加阴影效果代码
php编写一个简单的路由类
抢先体验 OS X El Capitan最受期待的6大功能详解
Shell脚本实现线上服务器之间对比文件是否一致
评论列表
共有
0
条评论
发表评论
取消回复
登录
注册新账号
立即
投稿
微信扫一扫:分享
微信里点“发现”,扫一下
二维码便可将本文分享至朋友圈。
返回
顶部
发表评论 取消回复