CSS的常用动画

最新推荐文章于 2025-07-03 13:48:36 发布
原创 最新推荐文章于 2025-07-03 13:48:36 发布 · 1.2k 阅读 · 33 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #动画 #css3

CSS实现开关

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<style>
  .check-wrap {
    margin-bottom: 20px;
    text-align: center;
  }

  .switch {
    position: absolute;
    clip: rect(0, 0, 0, 0);
  }

  label {
    margin-right: 40px;
    font-size: 14px;
  }

  .switch-an {
    position: absolute;
    clip: rect(0, 0, 0, 0);
  }

  .switch-an[type="checkbox"]+label {
    position: relative;
    display: inline-block;
    width: 5em;
    height: 2em;
    border-radius: 1em;
    color: #fff;
    background: #06c;
    text-align: left;
  }

  .switch-an[type="checkbox"]+label::before {
    content: '';
    width: 2em;
    height: 2em;
    position: absolute;
    left: 0;
    border-radius: 100%;
    vertical-align: middle;
    background-color: #fff;
    transition: left .3s;
  }

  .switch-an[type="checkbox"]+label::after {
    content: 'OFF';
    margin-left: 2.6em;
    vertical-align: sub;
  }

  .switch-an[type="checkbox"]:checked+label::before {
    transition: left .3s;
    left: 3em;
  }

  .switch-an[type="checkbox"]:checked+label::after {
    content: 'NO';
    margin-left: .6em;
  }
</style>
<div class="check-wrap">
  <input type="checkbox" class="switch-an" id="switch-an-1" />
  <label for="switch-an-1"></label>
</div>

</html>

CSS实现雷达

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<style>
  .wave {
    margin-left: auto;
    margin-right: auto;
    width: 100px;
    height: 100px;
    border-radius: 100px;
    border: 2px solid #fff;
    text-align: center;
    line-height: 100px;
    color: #fff;
    background: #06c url(http://p3g4ahmhh.bkt.clouddn.com/me.jpg) no-repeat center center;
    background-size: 100%;
    animation: wave 4s linear infinite;
  }

  @keyframes wave {
    0% {
      box-shadow: 0 0 0 0 rgba(245, 226, 226, 1), 0 0 0 0 rgba(250, 189, 189, 1);
    }

    50% {
      box-shadow: 0 0 0 20px rgba(245, 226, 226, .5), 0 0 0 0 rgba(250, 189, 189, 1);
    }

    100% {
      box-shadow: 0 0 0 40px rgba(245, 226, 226, 0), 0 0 0 20px rgba(245, 226, 226, 0);
    }
  }
</style>
<div class="wave"></div>

</html>

CSS 实现加载

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<style>
  .loading {
    margin-left: auto;
    margin-right: auto;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    background-color: transparent;
    animation: load 3s linear infinite;
  }

  @keyframes load {
    0% {
      box-shadow: -40px 0 0 rgba(250, 189, 189, 0), inset 0 0 0 15px rgba(250, 189, 189, 0), 40px 0 0 rgba(250, 189, 189, 0);
    }

    30% {
      box-shadow: -40px 0 0 rgba(250, 189, 189, 1), inset 0 0 0 15px rgba(250, 189, 189, 0), 40px 0 0 rgba(250, 189, 189, 0);
    }

    60% {
      box-shadow: -40px 0 0 rgba(250, 189, 189, 0), inset 0 0 0 15px rgba(250, 189, 189, 1), 40px 0 0 rgba(250, 189, 189, 0);
    }

    100% {
      box-shadow: -40px 0 0 rgba(250, 189, 189, 0), inset 0 0 0 15px rgba(250, 189, 189, 0), 40px 0 0 rgba(250, 189, 189, 1);
    }
  }
</style>
<div class="loading"></div>

</html>

CSS 实现对话框

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<style>
  .odd-shadow {
    margin-left: auto;
    margin-right: auto;
    width: 200px;
    height: 80px;
    border-radius: 8px;
    color: #fff;
    font-size: 24px;
    text-align: center;
    line-height: 80px;
    background: #06c;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .8))
  }

  .odd-shadow::before {
    content: '';
    position: absolute;
    display: block;
    margin-left: -20px;
    transform: translateY(20px);
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-right-color: #06c;
  }
</style>
<div class="odd-shadow">哎呦，猪先森</div>

</html>

CSS实现进度动画

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<style>
  .br-31 {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(to right, #f6c 50%, #333 0);
  }

  .br-31::before {
    content: '';
    display: block;
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0 / 50%;
    background-color: #f6c;
    transform-origin: left;
    animation: skin 4s linear infinite, bg 8s step-end infinite;
  }

  @keyframes skin {
    to {
      transform: rotate(.5turn);
    }
  }

  @keyframes bg {
    50% {
      background: #333;
    }
  }

  .br-32::before {
    animation-play-state: paused;
    animation-delay: inherit;
  }
</style>
<div class="br-31 black-theme"></div>
<div class="br-31 br-32 black-theme" style="animation-delay:-1s"></div>

</html>

CSS实现进度条

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<style>
  .div10 {
    height: 20px;
    background: repeating-linear-gradient(45deg,
        #30e8bf 25%,
        #ff8235 0,
        #ff8235 50%,
        #30e8bf 0,
        #30e8bf 75%,
        #ff8235 0);
    background-size: 30px 30px;
    animation: roll 1s linear infinite;
  }

  @keyframes roll {
    from {
      background-position-x: 0;
    }

    to {
      background-position-x: 30px;
    }
  }
</style>
<div class="div10"></div>

</html>

CSS实现扫光

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>光亮效果</title>
  <style>
    .line3 {
      height: 200px;
      background: repeating-linear-gradient(to right, #ccc 0%, #fff 3%, #ccc 5%, #ccc 100%);
      animation: gogo 2s linear 0s infinite normal;
    }

    @keyframes gogo {
      0% {
        background-position: 0%;
      }
      100% {
        background-position: 600px;
      }
    }
  </style>

</head>

<body>
  <div class='line3'></div>
</body>

</html>

CSS实现背景切换

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>光亮效果</title>
  <style>
    .hover-1 {
      background-image: linear-gradient(#1095c1, #1095c1);
      background-size: 0 100%;
      background-repeat: no-repeat;
      transition: .4s;
    }

    .hover-1:hover {
      background-size: 100% 100%;
    }

    body {
      height: 100vh;
      margin: 0;
      display: grid;
      gap: 20px;
      place-content: center;
    }

    h3 {
      font-family: system-ui, sans-serif;
      font-size: 3rem;
      margin: 0;
      cursor: pointer;
      padding: 0 .07em;
    }
  </style>

</head>

<body>
  <h3 class="hover-1">Hover Me</h3>

</body>

</html>
CSS3动画（秒懂创建与使用动画）
百赢出品，必属精品
04-18 1489
要创建 CSS3 动画，你需要了解 @keyframes 规则。@keyframes 规则是创建动画。@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。CSS动画是通过CSS样式表来创建动态效果的技术。使用@keyframes规则定义动画的关键帧，描述动画在不同时间点的状态。使用animation属性将动画应用到元素上，包括动画名称、持续时间、时间函数、延迟等。使用等属性控制动画的延迟、重复次数、方向等。使用transition。
小程序CSS常用动画示例
郑海波(莫川)的CSDN博客
10-02 4460
小程序CSS常用动画示例 一、前言 正如android的四大动画一样： translate:移动 alpha:透明度变化 rotate:旋转 scale:尺寸变化 css也可以实现 二、CSS3的2D转换 2dtransform的方法: 我们能够对元素进行移动、缩放、转动、拉长或拉伸 函数 描述 translate(x,y) 定义 2D 转换，沿着 X 和 Y ...
【前端知识点总结】CSS 基础六 - 常见的CSS动画
jiang_ziY的博客
02-15 1207
本章内容包含： 1、空间 （3d）转换 移动、旋转、立体呈现， 2、动画， 3、精灵动画，4、常见的CSS动画效果,（1）立体导航效果，（2）双开门效果，（3），GIF动图效果，（4）钟表效果，（5）立方体旋转。.......等
css 常见动画总结
最新发布
Elaine20132014的博客
07-03 96
【代码】css 常见动画总结。
9种常用CSS动画
热门推荐
weixin_48871924的博客
10-28 1万+
复制可用 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>9种css动画</title> <link rel="stylesheet" type="text/css" href="css/demo2.css"/> <link rel="icon" sizes="any" mask="" href="./img/baidu.svg"
常用CSS动画
easyboot的专栏
12-07 272
这里面有常用的CSS动画 https://daneden.github.io/animate.css/
css常见动画
weixin_43411214的博客
04-16 1291
【代码】css常见动画。
CSS常用动画特效，CSS3新增背景CSS代码。颜色渐变，flex弹性布局
04-17
这里我们将深入探讨“CSS常用动画特效”、“CSS3新增背景CSS代码”、“颜色渐变”以及“flex弹性布局”这四个关键知识点。 首先，我们来看“CSS常用动画特效”。CSS3引入了`@keyframes`规则，允许开发者创建复杂的...
CSS3雾气飞过动画特效
04-25
【CSS3雾气飞过动画特效】是一种利用CSS3的强大功能和特性，为网页增添动态视觉效果的技术。这种特效通过一张静态的背景图片，并结合CSS3的动画（Animation）属性，创造出云雾在屏幕中飘动的效果，为用户带来更生动...
纯css3卡通小狗动画特效
04-25
在本项目中，我们主要探讨的是如何利用纯CSS3技术创建一个卡通小狗的动画效果。这个特效是一个小黄狗摇尾巴的情景，它完全依赖于HTML和CSS3，不涉及JavaScript，这使得它更适合初学者学习和理解CSS3的动画功能。 ...
CSS常用的动画
新阿巴阿巴
09-22 320
目录一、transform（平移、缩放、旋转）1. 设置元素的中心2. 平移3. 缩放4. 旋转5. 复合写法二、透视和3D效果1. 透视2. 开启盒子子元素的3D效果三、过渡四、动画1. 动画的使用2. 动画的复合写法 一、transform（平移、缩放、旋转） 1. 设置元素的中心 transform-origin: x y; -- 参数 x 和 y 用空格隔开 -- 针对缩放、旋转 -- 默认的中心点是元素的中心(50% 50%),等价于center center -
CSS3常用动画
刚刚好
07-21 901
CSS3常用动画
CSS动画
m0_58035213的博客
10-05 4122
动画基本使用； 动画序列； 动画常见属性； 动画简写属性； 大数据热点图案例； 速度曲线之steps步长；
常用的CSS动画效果
happy81997的博客
03-21 3387
【代码】常用的CSS动画效果。
CSS 动画效果（5种） - 附完整示例
m0_48968874的博客
02-17 6340
CSS动画（CSS Animations）可以使网页元素呈现平滑的动态效果。通过使用@keyframes规则和CSS的animation属性，你可以定义复杂的动画效果。
css 常见的动画效果
前端Cocoko
08-19 4160
[style] .container { position: absolute; width: 200px; height: 200px; padding: 5px; border: 5px solid rgb(118,218,255); top: 50%; left: 50%; transform: transla...
CSS3动画演示：常用动画效果集锦
描述中提到 "集结了一些CSS3常用的动画显示"，这意味着该文件可能包含了一系列CSS3动画示例，这些示例演示了CSS3中各种动画属性的应用，比如`@keyframes`规则、`animation`属性、过渡（Transitions）、变形...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端精髓

小礼物走一走，来CSDN关注我

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值