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

CSS的常用动画

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

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动画
前端精髓
目录
相关文章
派大鑫的工作室
|
1月前
|
机器学习/深度学习 前端开发 JavaScript
CSS动画知识点
CSS动画知识点
派大鑫的工作室
66 2
游客fz577umxdejsg
|
3月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
游客fz577umxdejsg
73 2
光明顶阳顶天
|
25天前
|
前端开发 搜索推荐 UED
实现 CSS 动画效果的兼容性
【10月更文挑战第16天】实现 CSS 动画效果的兼容性需要对不同浏览器的特性有深入的了解，并采取适当的策略和方法。通过不断的实践和优化，你可以在各种浏览器上创造出流畅、美观且兼容的动画效果，为用户带来更好的体验。在实际开发中，要密切关注浏览器的发展动态，及时掌握最新的兼容性技巧和解决方案，以确保你的动画设计能够在广泛的用户群体中得到良好的呈现。
光明顶阳顶天
100 58
CamilleKing
|
3天前
|
Web App开发 前端开发 JavaScript
如何在不牺牲动画效果的前提下，优化 CSS3 动画的性能？
如何在不牺牲动画效果的前提下，优化 CSS3 动画的性能？
CamilleKing
10 1
chnjames
|
29天前
|
前端开发 JavaScript API
探索 CSS Houdini：轻松构建酷炫的 3D 卡片翻转动画
本文通过构建一个 3D 翻卡动画深入探讨了 CSS Houdini 的强大功能，展示了如何通过 Worklets、自定义属性、Paint API 等扩展 CSS 的能力，实现高度灵活的动画效果。文章首先介绍了 Houdini 的核心概念与 API，并通过构建一个动态星空背景、圆形进度条以及交互式 3D 翻卡动画的实际示例，展示了如何利用 CSS Houdini 赋予网页设计更多创造力。最后，还演示了如何将这种 3D 翻卡效果集成到公司网站中，提升用户体验。CSS Houdini 的创新能力为网页设计带来了前所未有的灵活性，推动了前端开发迈向新的高度。
chnjames
26 0
探索 CSS Houdini：轻松构建酷炫的 3D 卡片翻转动画
六卿
|
2月前
|
JavaScript 前端开发
JS配合CSS3实现动画和拖动小星星小Demo
本文通过代码示例展示了如何使用JavaScript和CSS3实现动画效果和拖动小星星的交互效果，包括文字掉落动画和鼠标拖动产生小星星动画的实现方法。
六卿
45 0
JS配合CSS3实现动画和拖动小星星小Demo
Li370234940
|
1月前
|
前端开发
CSS 动画介绍及语法
CSS 动画介绍及语法
Li370234940
27 0
蓝易云
|
3月前
|
前端开发 UED 开发者
有趣的CSS - 文字加载动画效果
这个文本加载动画简单而有趣，可以在网站标题、广告标语或者关键信息的展示上吸引用户的注意力。开发者可以根据需要调整动画的持续时间、步骤数，或者光标颜色等，来适应特定的设计需求。使用这种动态元素，增强网站的互动性和用户体验，同时也为网站增添了一抹活泼的风格。
蓝易云
76 5
游客fz577umxdejsg
|
3月前
|
前端开发 JavaScript
HTML+CSS如何打造撒花动画效果？3分钟学会，炫酷到爆！
HTML+CSS如何打造撒花动画效果？3分钟学会，炫酷到爆！
游客fz577umxdejsg
203 2
游客fz577umxdejsg
|
3月前
|
前端开发
CSS动画霓虹灯闪烁效果
CSS动画霓虹灯闪烁效果
游客fz577umxdejsg
55 2