CSS悬停过渡动画三部曲

最新推荐文章于 2023-04-01 18:44:57 发布

IT新时代

最新推荐文章于 2023-04-01 18:44:57 发布

阅读量662

点赞数 1

文章标签： css 前端前端开发 web前端前端基础

本文链接：https://blog.csdn.net/llll789789/article/details/96898909

版权

本文介绍了如何使用CSS实现三种简单的悬停过渡效果：褪色、变色和摆动。通过添加过渡属性、伪类选择器`:hover`以及关键帧`@keyframes`，仅用少量代码即可为网页元素创建动态效果，提升用户体验。

摘要由CSDN通过智能技术生成

CSS不一定要写得多么复杂才能实现特殊效果。如下就是三个超级简单的过渡的例子，可能只是几行代码，但是添加到Web应用程序中，却会让它增色不少。

项目设置

在这个项目中，我们将把过渡效果应用到一个class为box的元素上面。这个box元素内部是垂直和水平居中的文字内容。HTML结构相当简单：

<div class='box'>
  <p>TEXT</p>
</div>

CSS代码也一样简单。我们想要使用无衬线字体，并确保div中的段落文本是白色的，可以通过如下代码来实现：

body {
  color: white;
  font-family: Helvetica, Sans-Serif;
}

另外，给box元素添加如下CSS属性：

.box {
  width:200px;                 /* Set the Width of box          */
  height:50px;                 /* Set the Height of box         */
  background:#424242;          /* Dark Grey Background color    */
  transition:all 0.25s ease;   /* Transition settings           */

  display: flex;               /* Use Flexbox on P              */