如何使用CSS制作平滑的动画浮出效果及阴影效果

何box-shadow在CSS中为属性设置动画,而又不引起每一帧的重新绘制,并严重影响页面的性能?简短的答案:你不知道。对变化进行动画处理box-shadow 会损害性能。 有一种简单的方法来模仿相同的效果,但是,只需最少的重绘,就可以使动画以稳定的60 FPS运行:opacity为伪元素设置动画。 演示 看 WP网站建设

box-shadow在CSS中为属性设置动画,而又不引起每一帧的重新绘制,并严重影响页面的性能?简短的答案:你不知道。对变化进行动画处理box-shadow 损害性能。

有一种简单的方法来模仿相同的效果,但是,只需最少的重绘,就可以使动画以稳定的60 FPS运行:opacity为伪元素设置动画。

演示

如何使用CSS制作平滑的动画浮出效果及阴影效果

看一下演示并比较我们将探索的两种不同技术。如果两个示例对您来说都一样,那就是关键。唯一的区别是我们如何应用阴影和设置阴影动画。在左边我们动画box-shadowhover,并在右侧我们还加入了一个伪元素用:after,适用影子说,和动画的opacity该元素的。

如果您调出开发人员工具并将鼠标悬停在这些项目之一上,则应该看到类似的内容(绿色的条形是油漆;越少越好):

如何使用CSS制作平滑的动画浮出效果及阴影效果

box-shadow与将卡悬浮在右侧(opacity为其伪元素的动画)相比,将卡悬浮在左侧(为动画)时,显然会有更多的重绘。

为什么会看到这种效果?在不不断为每一帧触发重绘的情况下,只有很少的CSS属性可以动画,即opacitytransform。通过坚持在动画过程中仅更改这两个属性,我们将重新绘制的数量(以及浏览器必须完成的工作)减到最少。

这是两种技术之间的关键区别,它们会去除所有其他布局样式:

/* The slow way */
.make-it-slow {
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: box-shadow 0.3s ease-in-out;
}

/* Transition to a bigger shadow on hover */
.make-it-slow:hover {
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* The fast way */
.make-it-fast {
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

/* Pre-render the bigger shadow, but hide it */
.make-it-fast::after {
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

/* Transition to showing the bigger shadow on hover */
.make-it-fast:hover::after {
  opacity: 1;
}

在性能更好的示例中,我们有两层:一层用于盒子,一层用于阴影,并且仅对opacity阴影层的属性进行动画处理。

分解

有了基本的知识,让我们看一下如何创建演示中展示的3D卡效果。第一步是将阴影移到伪元素,就像我们上面所做的那样。我们还添加所有布局代码来创建卡:

/* All HTML you need is <div class="box"></div> */

/* Create a simple white box, and add the shadow for the initial state */
.box {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: all 0.3s ease-in-out;
}

/* Create the hidden pseudo-element */
/* include the shadow for the end state */
.box::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: 0;
  border-radius: 5px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  transition: opacity 0.3s ease-in-out;
}

请注意,由于我们要为这两个元素设置动画,因此我们要transition同时为.box和添加一个.box::aftertransformfor .boxopacityfor .box::after

这些样式给我们一个含蓄的白色盒子box-shadow。此时,来自的较强阴影.box::after已完全隐藏,您无法与该框进行交互:

如何使用CSS制作平滑的动画浮出效果及阴影效果

要创建与演示中相同的效果,现在我们需要做的就是放大.box悬停鼠标,并淡入伪元素及其阴影:

/* Scale up the box */
.box:hover {
  transform: scale(1.2, 1.2);
}

/* Fade in the pseudo-element with the bigger shadow */
.box:hover::after {
  opacity: 1;
}

而已!将鼠标悬停在框上可以预览效果:

.box {
position: relative;
display: inline-block;
width: 100px;
height: 100px;
border-radius: 5px;
background-color: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
transition: all 0.3s ease-in-out;
}

总而言之,这是所有CSS,带有所有供应商前缀,以及一些针对其他custom的自定义缓动:

.box {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.box::after {
  content: "";
  border-radius: 5px;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  opacity: 0;
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.box:hover {
  -webkit-transform: scale(1.25, 1.25);
  transform: scale(1.25, 1.25);
}

.box:hover::after {
    opacity: 1;
}

当然,要实现与简单的动画效果相同的效果,需要大量的CSS box-shadow,只是要提高性能。何必呢?

即使您的桌面可能box-shadow没有任何问题地处理动画,您的手机也可能没有问题,甚至在为更复杂的布局制作动画时,您的桌面也可能开始停顿。

只要将过渡和动画设置为transformopacity,就可以确保获得最佳性能,并因此获得最佳的用户体验。

原创文章,作者:网站建设,如若转载,请注明出处:https://www.davidwu.net/archives/12016

WordPress安全防护插件
服务项目 服务内容 收费标准(元)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

电子邮件地址不会被公开。 必填项已用*标注

51建站客服微信二维码
点击这里购买