CSS3特效-鼠标经过图层上移并带阴影

我们今天带来的这个功能可以使用CSS的:hover伪类和transition属性来实现这个效果。

HTML代码:

<div class="box">鼠标触碰我</div>

解释:

  • box类设置了一个宽度为200px,高度为100px的div标签,背景色为白色,边框为1px的灰色,阴影为5px的黑色半透明。
  • 使用transition属性设置了所有属性变化的过渡时间为0.3秒,缓动函数为ease-in-out。
  • 使用:hover伪类来设置鼠标悬停时的样式。
  • transform: translateY(-5px)将div标签向上移动5px。
  • box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5)将阴影向下移动5px,模糊半径为10px,透明度为0.5。

当鼠标悬停在div标签上时,会触发:hover伪类,div标签会向上移动5px,并且阴影会变得更加明显。当鼠标离开div标签时,div标签会恢复原来的位置和阴影。

效果:

CSS3特效-鼠标经过图层上移并带阴影

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

给TA打赏
共{{data.count}}人
人已打赏
css3前端

CSS3特效鼠标经过图片自动变大,离开后图片变小

2023-5-2 20:51:00

css3htmljavascript

Java+CSS3+HTML实现鼠标触碰下拉子菜单

2023-5-2 21:08:03

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索