Sym - 一个用 Java 实现的现代化社区平台 • 源码 • 注册

Pipe - 小而美的开源博客平台 • 体验 • 皮肤
Solo - 一个用 Java 实现的博客系统,为你或你的团队创建个博客吧! • 源码下载 
Wide - 一个基于 Web 的 Go 语言 IDE • 教程试用

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


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

推荐阅读
留下你的脚步