🎶 Sym - 一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)平台

📕 思源笔记 - 一款桌面端笔记应用,支持 Windows、Mac 和 Linux

🎸 Solo - B3log 分布式社区的博客端节点,欢迎加入下一代社区网络

♏ Vditor - 一款浏览器端的 Markdown 编辑器

CSS 动画 - 阴影盒子的动画效果

2019-08-12

描述

当鼠标移上时,在文本周围创建一个带阴影盒子的效果。

HTML

<p class="hover-shadow-box-animation">Box it!</p>

CSS

.hover-shadow-box-animation {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  margin: 10px;
  transition-duration: 0.3s;
  transition-property: box-shadow, transform;
}
.hover-shadow-box-animation:hover,
.hover-shadow-box-animation:focus,
.hover-shadow-box-animation:active {
  box-shadow: 1px 10px 10px -10px rgba(0, 0, 24, 0.5);
  transform: scale(1.2);
}

Demo

说明

  • display: inline-blockp 元素的长设置一个宽度,这样就可以使其成为一个 inline-block
  • transform: perspective(1px) 通过影响用户和 Z 平面的距离为元素创建一个 3D 空间,translate(0) 在 3D 空间中可以延 z 轴重新定位 p 元素
  • box-shadow: 设置一个盒子
  • transparent 让盒子透明
  • transition-propertybox-shadowtransform 变化时能产生过渡效果
  • :hover 从鼠标移动完成到 active 状态都将启用其内部的所有样式
  • transform: scale(1.2) 用来修改比例,让文本放大

浏览器支持

支持率:97.3%
支持情况:

返回总目录

每天 30 秒系列之 CSS


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步