CSS元素动画篇:基于当前位置的变换动画(四)

基于当前位置的变换动画(四)

前言

CSS元素动画一般分为两种:一种是元素基于当前位置的变换动画,通过不明显的位移、缩放等方式,实现动画效果,如弹跳、闪烁、抖动等;另一种是元素基于页面位置的变换动画,通过位移、旋转等方式,实现动画效果,如飞入/飞出等。

基于当前位置的变换动画,我又将根据动画实现效果将其分为4类:

  1. 位移效果类:通过不明显的位移,实现元素动画效果,如:水平抖动、垂直抖动等。
  2. 旋转效果类:通过小幅度旋转,实现元素动画效果,如元素摇摆、摇晃等。
  3. 缩放效果类:通过缩放,实现元素动画效果,如脉冲效果、呼吸效果、心跳效果等。
  4. 透明度效果类:通过改变元素透明度,实现元素动画效果,如闪烁效果。

本文主要介绍透明度效果类的相关元素动画效果与代码实现。

透明效果类元素动画

闪烁动画效果

闪烁动画效果:通过控制元素周期性的显示和隐藏,模拟闪烁的效果,其效果图如下所示:

效果预览

代码实现

html 复制代码
<style>
/* 闪烁动画 */
@keyframes blink {
  0%, 100% {
	opacity: 1;
  }
  50% {
	opacity: 0;
  }
}
.blink  {
  display: inline-block;
  height: 100px;
  font-size: 100px;
  font-weight: bold;
}
.blink:hover {
  animation: blink 1s 1;
}
</style>

<body>
  <span class="blink">闪烁动画</span>
</body>

淡入动画效果

淡入动画效果:元素由完全透明(不可见)变成完全不透明(可见)的过程,其效果图如下所示:

效果预览

代码实现

html 复制代码
<style>
/* 淡入动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fade-in  {
  display: inline-block;
  height: 100px;
  font-size: 100px;
  font-weight: bold;
}
.fade-in:hover {
  animation: fadeIn 2s ease-in-out;
}
</style>

<body>
  <span class="fade-in">淡入动画</span>
</body>

淡出动画效果

淡出动画效果:元素由完全不透明(可见)变成完全透明(不可见)的过程,其效果图如下所示:

效果预览

代码实现

html 复制代码
<style>
/* 淡出动画 */
@keyframes fadeOut {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fade-out  {
  display: inline-block;
  height: 100px;
  font-size: 100px;
  font-weight: bold;
}
.fade-out:hover {
  animation: fadeOut 2s ease-in-out;
}
</style>

<body>
  <span class="fade-out">淡出动画</span>
</body>

结语

本文主要介绍了几种常见的透明效果类元素动画,你还知道哪些透明效果类元素动画?欢迎在评论区留言分享!

相关推荐
Raink老师7 分钟前
1.3 如何安装 TypeScript?
前端·javascript·typescript
ST_小罗24 分钟前
【Web前端】JavaScript入门与基础(二)
开发语言·前端·javascript
Greatlifeee33 分钟前
VUE3+TS实现图片缩放移动弹窗
前端·javascript·vue.js
恰恰兄34 分钟前
base 西安 | 前端面试问题汇总 (2023年8月)
前端·面试·职场和发展
萧萧风41 分钟前
在Vue3 + Vite 项目安装使用 Tailwind CSS 4.0报错
前端·css
忘不了情1 小时前
vue2中,codemirror编辑器的使用
前端·javascript·编辑器
虾球xz2 小时前
游戏引擎学习第308天:调试循环检测
前端·c++·学习·算法·游戏引擎
魔云连洲2 小时前
浏览器强缓存还未过期,但服务器资源已经变了怎么办?
前端·缓存·浏览器
程序员Bears3 小时前
实战教程:基于Vue.js与Django REST Framework的任务管理SPA开发全流程
前端·vue.js·django
软件技术NINI3 小时前
html css js网页制作成品——HTML+CSS+js宁夏银川网页设计(5页)附源码
javascript·css·html