2019-08-12 描述 当鼠标移上时,在文本周围创建一个带阴影盒子的效果。 HTML Box it! CSS .hover-shadow-box-animation { display: inline-block; vertical-align: middle; transform: perspective(1px ..

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

说明

浏览器支持

支持率:97.3%
支持情况:

返回总目录

每天 30 秒系列之 CSS

回帖   
请输入回帖内容...