CSS动画设计专题（一）：字体特效

gclove 发布于2019-08-30 15:44 / 1990人阅读

摘要：代码这里不要指明为更多文章动画设计字体特效动画设计输入框特效动画设计按钮特效动画设计特效基础篇动画设计特效进阶篇

本文来自《动画设计·字体特效》，更多文章放在了Github

欢迎交流和Star

特效一览

划线动态：

背景高亮：

色块进出：

划线动态 效果图

原理

首先，利用::after和::before就可以画出上下两条线，所以只需要一个 dom 元素即可。

其次，对于鼠标移入的动画，要给上面两个伪元素设置:hover选择器。

最后是处理动画方向。我们以上面的线条为例，在鼠标移入的时候，是从右到左变化的。这里是通过设置transform-origin属性来修改动画方向。下面的线条同理，方向相反即可。

注意：代码是通过scaleX来实现缩放，相比于设置width，会启用 GPU，避免重绘。

代码

html 代码：


  xin-tan.com

css 代码：

span {
  color: #595959;
  position: relative;
  z-index: 1;
}

span::before,
span::after {
  content: "";
  z-index: -1;
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #262626;
  transform: scaleX(0);
  transition: transform 0.2s ease-in-out;
}

span::before {
  top: 0;
  transform-origin: center right;
}

span::after {
  bottom: 0;
  transform-origin: center left;
}

span:hover {
  cursor: pointer;
}

span:hover::before {
  transform-origin: center left;
  transform: scaleX(1);
}

span:hover::after {
  transform-origin: center right;
  transform: scaleX(1);
}

背景高亮 效果图

原理

首先，利用::before伪元素就可以模拟出覆盖需要的色块。所以仅仅需要一个 dom 元素。这里伪元素的content元素必须给，否则不会显示（有些坑）。

其次，色块大小改变是通过scaleY来设置的，原因和第一个动画原因一样。

最后，伪元素的色块会覆盖 dom 上的元素。所以需要给 dom 元素设置z-index，并且让其生效并大于伪元素的z-index。

代码

html 代码：


  xin-tan.com

css 代码：

span {
  color: #d9d9d9;
  position: relative;
  z-index: 1;
}

/* 
1. content必须给
2. 用transform覆盖 配合 z-index
*/
span::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -0.25em;
  right: -0.25em;
  z-index: -1;
  background: #262626;
  transform: scaleY(0.2);
  transform-origin: center bottom;
  transition: all 0.1s linear;
}

span:hover {
  cursor: pointer;
}

span:hover::before {
  transform: scaleY(1);
}

色块进出 效果图

原理

这和上一个“背景高亮”动画类似，不同的是色块的位置和大小变化方向不同。其余基本一致。

代码

html:


  xin-tan.com

css:

span {
  color: #d9d9d9;
  position: relative;
  z-index: 1;
}

span::before {
  content: "";
  z-index: -1;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #262626;
  transform-origin: center right;
  transform: scaleX(0);
  transition: transform 0.1s linear;
  /* 这里不要指明为 all */
}

span:hover {
  cursor: pointer;
}

span:hover::before {
  transform-origin: center left;
  transform: scaleX(1);
}

更多文章

动画设计·字体特效

动画设计·输入框特效

动画设计·按钮特效

动画设计·Loader特效·基础篇

动画设计·Loader特效·进阶篇

云服务器 GPU云服务器 html彩色字体特效 css特效 css字体库 css 服务器字体

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116155.html

前端动画专题（三）：撩人的按钮特效

摘要：下面开始编写动画的特效。视觉上会有一种弹簧的特效，就像手压果冻后的效果脉冲特效效果图原理和代码首先，还是去掉的默认样式。本文来自「心谭博客」的《动画设计·按钮特效》，更多文章放在了Github欢迎交流和Star 特效一览滑箱： showImg(https://segmentfault.com/img/remote/1460000019951279); 果冻： showImg(ht...

sarva 2019-08-30 15:44 评论0 收藏0
前端动画专题（三）：撩人的按钮特效

摘要：下面开始编写动画的特效。视觉上会有一种弹簧的特效，就像手压果冻后的效果脉冲特效效果图原理和代码首先，还是去掉的默认样式。本文来自「心谭博客」的《动画设计·按钮特效》，更多文章放在了Github欢迎交流和Star 特效一览滑箱： showImg(https://segmentfault.com/img/remote/1460000019951279); 果冻： showImg(ht...

Jokcy 2019-08-26 10:31 评论0 收藏0
css相关 - 收藏集 - 掘金

摘要：在正式前端一些小细节前端掘金英文原文，翻译未来的太让人兴奋了一方面，是全新的页面布局方式另一方面，是酷炫的滤镜颜色等视觉效果。老司机教你更好的进行编程个技巧前端掘金并不总是容易处理。 CSS3 实现文字流光渐变动画 - 前端 - 掘金来自百度前端技术学院的实践任务：有趣的鼠标悬浮模糊效果，参考：http://ife.baidu.com/course/d...，用CSS3实现了一下，顺便...

molyzzx 2019-08-29 12:38 评论0 收藏0
前端硬核面试专题之 CSS 55 问

摘要：前言本文讲解道前端面试的的内容。文章原文地址前端硬核面试专题之问。前端硬核面试专题的完整版在此前端硬核面试专题，包含数据结构与算法。 showImg(https://segmentfault.com/img/bVbv2GE?w=900&h=400); 前言本文讲解 55 道前端面试的 CSS 的内容。复习前端面试的知识，是为了巩固前端的基础知识，最重要的还是平时的积累！注意：文章...

崔晓明 2019-08-30 15:44 评论0 收藏0
好看漂亮的html5网页特效学习笔记(1)_水墨动画

摘要：对于来说，表示元素，除了优先级更高之外，与选择器相同。从父元素继承颜色渐变背景漂亮的深蓝浅蓝效果就是这个的作用。媒体查询，简单来说就是可以让网页自动适应不同的设备屏幕尺寸。具体请看贝塞尔曲线，用来生成水墨效果的关键。 showImg(https://segmentfault.com/img/bVbwNaj); 效果鼠标触碰按钮，出现水墨风格动画屏幕自适应一份html文件，一份c...

habren 2019-08-30 15:44 评论0 收藏0