AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

CSS的常用动画

2023-02-26 79
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 酷炫的动画效果

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>
文章标签：
前端开发
关键词：
CSS动画
前端精髓
目录
相关文章
派大鑫的工作室
|
2月前
|
机器学习/深度学习 前端开发 JavaScript
CSS动画知识点
CSS动画知识点
派大鑫的工作室
80 2
疯狂的猿
|
1月前
纯css3实现的百分比渐变进度条加载动画源码
纯css3实现的百分比渐变进度条加载动画特效源码
疯狂的猿
57 31
光明顶阳顶天
|
2月前
|
前端开发 搜索推荐 UED
实现 CSS 动画效果的兼容性
【10月更文挑战第16天】实现 CSS 动画效果的兼容性需要对不同浏览器的特性有深入的了解，并采取适当的策略和方法。通过不断的实践和优化，你可以在各种浏览器上创造出流畅、美观且兼容的动画效果，为用户带来更好的体验。在实际开发中，要密切关注浏览器的发展动态，及时掌握最新的兼容性技巧和解决方案，以确保你的动画设计能够在广泛的用户群体中得到良好的呈现。
光明顶阳顶天
116 58
疯狂的猿
|
17天前
|
Web App开发 移动开发 JavaScript
纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码
这是一款基于纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码。画面中左下角是一个圆锥形礼炮卡通效果，呈现出节日庆祝时礼花爆破、五彩纸屑纷飞的动画特效。整体动画效果采用纯css3+svg实现，没有引入任何外部图形或js脚本元素。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
疯狂的猿
33 6
众所周知
|
27天前
|
前端开发 JavaScript UED
CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随，再到滚动触发动画
本文探讨了CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随，再到滚动触发动画，这些效果增强了页面的吸引力和互动性。视差滚动通过不同层次元素的差异化移动，增加了页面的深度感和沉浸感。文章还讨论了实现方法、性能优化及案例分析，旨在为设计师和开发者提供实用指导。
众所周知
54 7
疯狂的猿
|
1月前
CSS3制作的聚光灯下倒影文字选装动画特效源码
CSS3聚光灯下倒影文字特效是一段基于CSS3实现的聚光灯下带倒影的文字旋转动画效果代码，具有真实的视觉感，同时文字还会在旋转过程中显示出灯光的反射效果，很有意思，欢迎对此段代码感兴趣的朋友前来下载使用。
疯狂的猿
31 6
john散漫
|
1月前
|
移动开发 前端开发 JavaScript
除了 CSS3，还有哪些技术可以实现动画效果？
除了 CSS3，还有哪些技术可以实现动画效果？
john散漫
58 5
疯狂的猿
|
1月前
纯css3加载loading发光变色动画代码
纯css3加载loading发光变色动画特效代码是一款基于css3 keyframes属性实现的发光变色圆点串联旋转loading加载动画
疯狂的猿
24 2
疯狂的猿
|
1月前
|
Web App开发 前端开发 iOS开发
CSS加载动画大全 126种
CSS加载动画大全是一个css Loaders加载动画特效汇总，一共包含126种加载动画效果，不同样式不同图案，简单实用，一览包含所有，会让你在等待的过程中，体验视觉盛宴，给用户不一般的加载体验，欢迎下载试试！代码适用浏览器：搜狗、360、FireFox(建议)、Chrome、Safari、Opera、傲游、世界之窗，是一款不错的的特效插件，希望大家喜欢！
疯狂的猿
28 2
我是快乐的嘟嘟
|
1月前
|
JavaScript 前端开发
CSS3 动画和 JavaScript 动画的性能比较
具体的性能表现还会受到许多因素的影响，如动画的复杂程度、浏览器的性能、设备的硬件条件等。在实际应用中，需要根据具体情况选择合适的动画技术。
我是快乐的嘟嘟
27 1