首页 > 其他分享 >CSS 动画专题

CSS 动画专题

时间:2024-07-23 16:08:53浏览次数:13  
标签:动画 专题 color transition transform ff7777 height background CSS

0x01 过渡 transition

  • 过渡(transition)是应用于特定元素的 CSS 属性,在指定时间内平滑过渡到目标样式

(1)必要属性

  • 使用 transition-property 指定需要过渡的 CSS 属性
    • 可以列入一个或多个 CSS 属性
    • 也可以使用 all 值,表示所有变化的 CSS 属性都需要过渡
    • 仅可以用于过渡的值是可以用数字表示的属性,浏览器会计算并插入中间值实现过渡
  • 使用 transition-duration 指定过渡需要的持续时间
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <style>
    button {
      width: 200px;
      height: 100px;
      font-size: 20px;
      border: none;
      color: white;
      background-color: red;
      cursor: pointer;

      transition-property: background-color;
      transition-duration: 1s;
    }

    button:hover {
      background-color: purple;
    }
  </style>
</head>

<body>
  <button>Button</button>
</body>

</html>

(2)其他属性

  • 使用 transition-timing-function 指定过渡的时序函数(指过渡的变化方式)
    • ease:慢入、快变、慢出(默认)
    • linear:匀速
    • ease-in:缓慢开始,结束前加快
    • ease-out:快速开始,结束前减慢
    • ease-in-out:与 ease 类似
  • 使用 transition-delay 指定过渡的延迟时间
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <style>
    button {
      width: 200px;
      height: 100px;
      font-size: 20px;
      border: none;
      color: white;
      background-color: red;
      cursor: pointer;

      transition-property: background-color;
      transition-duration: 1s;

      transition-timing-function: ease-in;
      transition-delay: 0.5s;
    }

    button:hover {
      background-color: purple;
    }
  </style>
</head>

<body>
  <button>Button</button>
</body>

</html>

(3)缩写属性

transition: property duration timing-function delay[, property duration timing-function delay];

0x02 变换 transform

  • 变换(transform)是指改变元素的尺寸、形状以及位置
  • 变换提供了 4 种函数来控制元素的显示方式:scaletranslaterotateskew
  • transform-origin:设定变换原点
    • 默认取值包括 topleftrightbottomcenter 以及 top lefttop rightbottom rightbottom left
    • 也可以通过百分比、数值分别设定在 \(x\) 与 \(y\) 轴构成的坐标

(1)scale

  • 通过放缩元素的宽高,改变元素的尺寸
  • scaleX():改变元素宽度,大于 \(1\) 表示放大倍数,\(0-1\) 之间表示缩小倍率(下同)
  • scaleY():改变元素高度
  • scale():一个值表示同时改变元素的宽高,两个值表示同时分别改变元素的宽度与高度
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <style>
    div {
      width: 300px;
      height: 200px;
      display: block;
      margin: auto;
      background-color: #ff7777;
      transition: transform 1s linear;
    }

    div:hover {
      transform: scale(1.5, 0.5);
    }
  </style>
</head>

<body>
  <div></div>
</body>

</html>

(2)translate

  • 通过平移的方式,改变元素的位置

  • 二维变换

    • translateX():沿 \(x\) 轴方向移动,正值向右、负值向左
    • translateY():沿 \(y\) 轴方向移动,正值向下、负值向上
    • translate(x, y):同时沿 \(x\) 与 \(y\) 轴移动,第一个参数是 \(x\) 轴方向移动,第二个参数是 \(y\) 轴方向移动
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="UTF-8">
      <style>
        div {
          width: 300px;
          height: 200px;
          display: block;
          margin: auto;
          background-color: #ff7777;
          transition: transform 1s linear;
        }
    
        div:hover {
          transform: translate(-100px, 100px);
        }
      </style>
    </head>
    
    <body>
      <div></div>
    </body>
    
    </html>
    
  • 三维变换

    • translateZ():沿 \(z\) 轴方向移动,正值向外、负值向内
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="UTF-8">
      <style>
        body {
          perspective: 1000px;	// 设定人眼与屏幕的距离为 1000px(即人眼在 z 轴 1000px 处)
        }
    
        div {
          width: 300px;
          height: 200px;
          display: block;
          margin: auto;
          background-color: #ff7777;
          transform-origin: bottom left;
          transition: transform 1s linear;
        }
    
        div:hover {
          transform: translateZ(300px);	// 效果看起来是放大(即近大远小)大于到人眼的距离时会消失
        }
      </style>
    </head>
    
    <body>
      <div></div>
    </body>
    
    </html>
    

(3)rotate

  • 通过旋转,改变元素的角度

  • 二维变换

    • rotate():默认以元素中心为中心,旋转指定角度(deg)、指定梯度(grad)或旋转圈数(turn),正值顺时针、负值逆时针
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="UTF-8">
      <style>
        div {
          width: 300px;
          height: 200px;
          display: block;
          margin: auto;
          background-color: #ff7777;
          transition: transform 1s linear;
        }
    
        div:hover {
          transform: rotate(1turn);
        }
      </style>
    </head>
    
    <body>
      <div></div>
    </body>
    
    </html>
    
  • 三维变换

    • rotateX():沿 \(x\) 轴旋转,正负值旋转方向不同(下同)
    • rotateY():沿 \(y\) 轴旋转
    • rotateZ():沿 \(z\) 轴旋转
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="UTF-8">
      <style>
        body {
          perspective: 1000px;
        }
    
        div {
          width: 300px;
          height: 200px;
          display: block;
          margin: auto;
          background-color: #ff7777;
          transition: transform 1s linear;
        }
    
        div:hover {
          transform: rotateX(30deg);
        }
      </style>
    </head>
    
    <body>
      <div></div>
    </body>
    
    </html>
    

(4)skew

  • 通过根据 \(x\) 轴或 \(y\) 轴倾斜,改变元素的形状
  • skewX():在 \(x\) 轴方向上倾斜指定角度,正负值方向不同(下同)
  • skewX():在 \(y\) 轴方向上倾斜指定角度
  • skew(x, y):同时分别改变元素在 \(x\) 与 \(y\) 轴上的倾斜
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <style>
    body {
      perspective: 1000px;
    }

    div {
      width: 300px;
      height: 200px;
      display: block;
      margin: auto;
      background-color: #ff7777;
      transition: transform 1s linear;
    }

    div:hover {
      transform: skewX(30deg);
    }
  </style>
</head>

<body>
  <div></div>
</body>

</html>

(5)案例

a. 旋入

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <style>
    body {
      height: 100vh;
      display: flex;
    }

    a {
      text-decoration: none;
      margin: auto;
      border: 3px solid black;
      padding: 30px 80px;
      font-size: 30px;
      font-weight: bolder;
      position: relative;
      overflow: hidden;
    }

    a::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 105%;
      height: 100%;
      background-color: #ff7777;
      z-index: -1;
      transition: transform 0.5s ease-out;
      transform-origin: bottom left;
      transform: rotate(-90deg);
    }

    a:hover::before {
      transform: rotate(0deg);
    }
  </style>
</head>

<body>
  <a>Hover me</a>
</body>

</html>

b. 滑入

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <style>
    body {
      height: 100vh;
      display: flex;
    }

    a {
      text-decoration: none;
      margin: auto;
      border: 3px solid black;
      padding: 30px 80px;
      font-size: 30px;
      font-weight: bolder;
      color: #ff7777;
      position: relative;
      overflow: hidden;
      transition: all 1s ease-out;
    }

    a::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #ff7777;
      z-index: -1;
      transition: all 0.5s ease-out;
      transform: translateX(-100%);
    }

    a:hover {
      color: white;
    }

    a:hover::before {
      transform: translateX(0);
    }
  </style>
</head>

<body>
  <a>Hover me</a>
</body>

</html>
  • 带入文字

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="UTF-8">
      <style>
        body {
          height: 100vh;
          display: flex;
        }
    
        a {
          text-decoration: none;
          margin: auto;
          border: 3px solid black;
          padding: 30px 80px;
          font-size: 30px;
          font-weight: bolder;
          color: #ff7777;
          position: relative;
          overflow: hidden;
        }
    
        a::before {
          content: "YEAH!";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: #ff7777;
          color: white;
          transition: all 0.5s ease-out;
          transform: translateY(-100%);
    
          display: flex;
          align-items: center;
          justify-content: center;
        }
    
        a:hover::before {
          transform: translateY(0);
        }
      </style>
    </head>
    
    <body>
      <a>Hover me</a>
    </body>
    
    </html>
    
  • 伪闪光滑入

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="UTF-8">
      <style>
        body {
          height: 100vh;
          background-color: #333;
          display: flex;
        }
    
        a {
          text-decoration: none;
          margin: auto;
          border: 3px solid black;
          padding: 30px 80px;
          font-size: 30px;
          font-weight: bolder;
          color: #ff7777;
          position: relative;
          overflow: hidden;
          transition: all 0.5s ease-out;
        }
    
        a::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 50%;
          background-color: white;
          z-index: -1;
          transition: all 0.5s ease-out;
          transform: translateX(-100%) rotate(45deg);
        }
    
        a:hover {
          background-color: #ff7777;
          color: white;
        }
    
        a:hover::before {
          transform: translateX(100%) rotate(45deg);
        }
      </style>
    </head>
    
    <body>
      <a>Hover me</a>
    </body>
    
    </html>
    

c. 十字扩展(三维变换)

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <style>
    body {
      height: 100vh;
      display: flex;
    }

    a {
      text-decoration: none;
      margin: auto;
      border: 3px solid black;
      padding: 30px 80px;
      font-size: 30px;
      font-weight: bolder;
      color: #ff7777;
      position: relative;
      overflow: hidden;
      transition: all 1s ease-out;
    }

    a::before,
    a::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #ff7777;
      z-index: -1;
      transition: all 0.5s ease-out;
    }

    a::before {
      transform: rotateX(90deg);
    }

    a::after {
      transform: rotateY(90deg);
    }

    a:hover {
      color: white;
    }

    a:hover::before {
      transform: rotateX(0);
    }

    a:hover::after {
      transform: rotateY(0);
    }
  </style>
</head>

<body>
  <a>Hover me</a>
</body>

</html>
  • 文字放大退出

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="UTF-8">
      <style>
        body {
          height: 100vh;
          display: flex;
        }
    
        a {
          perspective: 500px;
          text-decoration: none;
          margin: auto;
          border: 3px solid black;
          padding: 30px 80px;
          font-size: 30px;
          font-weight: bolder;
          color: #ff7777;
          position: relative;
          overflow: hidden;
          transition: all 0.5s ease-out;
        }
    
        a::before {
          content: "Hover me";
          font-size: 30px;
          font-weight: bolder;
          color: white;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: #ff7777;
          z-index: -1;
          transition: all 0.5s ease-out;
          transform: translateZ(800px);
          display: flex;
          align-items: center;
          justify-content: center;
        }
    
        a:hover {
          color: white;
        }
    
        a:hover::before {
          transform: translateZ(0);
        }
      </style>
    </head>
    
    <body>
      <a>Hover me</a>
    </body>
    
    </html>
    
  • 切牌

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="UTF-8">
      <style>
        body {
          height: 100vh;
          display: flex;
        }
    
        a {
          text-decoration: none;
          margin: auto;
          border: 3px solid black;
          padding: 30px 80px;
          font-size: 30px;
          font-weight: bolder;
          color: transparent;
          position: relative;
          overflow: hidden;
        }
    
        a::before,
        a::after {
          content: "Hover me";
          font-size: 30px;
          font-weight: bolder;
          color: white;
          position: absolute;
          top: 0;
          width: 100%;
          height: 100%;
          background-color: #ff7777;
          transition: all 0.5s ease-out;
          display: flex;
          align-items: center;
          justify-content: center;
        }
    
        a::before {
          left: 0;
        }
    
        a::after {
          left: -100%;
        }
    
        a::before {
          transform: rotateY(0deg) scale(1);
        }
    
        a::after {
          transform: rotateY(360deg) scale(0);
        }
    
        a:hover::before {
          left: 100%;
          transform: rotateY(360deg) scale(0);
          opacity: 0;
        }
    
        a:hover::after {
          left: 0;
          transform: rotateY(0) scale(1);
          opacity: 1;
        }
      </style>
    </head>
    
    <body>
      <a>Hover me</a>
    </body>
    
    </html>
    

d. 点入后放大

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <style>
    body {
      height: 100vh;
      display: flex;
    }

    a {
      text-decoration: none;
      margin: auto;
      padding: 30px;
      font-size: 30px;
      font-weight: bolder;
      color: #ff7777;
      position: relative;
      overflow: hidden;
      transition: all 0.5s ease-out 0.5s;
    }

    a::before,
    a::after {
      content: "";
      position: absolute;
      top: 50%;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      transform: translateY(-50%);
      background-color: transparent;
      z-index: -1;
      transition: all 0.5s ease-out;
    }

    a::before {
      left: 0;
      box-shadow: -100px 0 0 #ff7777;
    }

    a::after {
      right: 0;
      box-shadow: 100px 0 0 #ff7777;
    }

    a:hover {
      color: white;
      background-color: #ff7777;
    }

    a:hover::before {
      left: 50%;
      background-color: #ff7777;
      box-shadow: -30px 0 0 #ff7777;
      transform: translateX(-50%) translateY(-50%);
    }

    a:hover::after {
      right: 50%;
      background-color: #ff7777;
      box-shadow: 30px 0 0 #ff7777;
      transform: translateX(50%) translateY(-50%);
    }
  </style>
</head>

<body>
  <a>Hover me</a>
</body>

</html>

f. 取景框

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <style>
    body {
      height: 100vh;
      display: flex;
    }

    a {
      text-decoration: none;
      margin: auto;
      padding: 30px;
      font-size: 30px;
      font-weight: bolder;
      color: #ff7777;
      position: relative;
      transition: all 0.5s ease-out 0.5s;
    }

    a::before,
    a::after {
      content: "";
      position: absolute;
      width: 30px;
      height: 30px;
      background-color: transparent;
      z-index: -1;
      transition: all 0.5s ease-out;
    }

    a::before {
      top: -5px;
      left: -5px;
      border-top: 3px solid #ff7777;
      border-left: 3px solid #ff7777;
    }

    a::after {
      right: -5px;
      bottom: -5px;
      border-right: 3px solid #ff7777;
      border-bottom: 3px solid #ff7777;
    }

    a:hover {
      color: white;
      background-color: #ff7777;
    }

    a:hover::before,
    a:hover::after {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <a>Hover me</a>
</body>

</html>

0x03 动画与关键帧 animation & keyframes

(1)基本使用

  • 使用步骤:
    1. 定义 CSS 动画规则(即关键帧)
    2. 将该动画添加到需要动画的元素上
  • @keyframes identifier:定义关键帧
  • animation-name:通过名称使用相应的动画
  • animation-duration:动画持续时间
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <style>
    div {
      width: 100px;
      height: 100px;
      display: block;
      background-color: #ff7777;
    }

    div:hover {
      animation-name: moving;
      animation-duration: 3s;
    }

    @keyframes moving {
      0% {
        transform: translate(0);
      }

      30% {
        transform: translate(150px);
      }

      100% {
        transform: translate(300px);
      }
    }
  </style>
</head>

<body>
  <div></div>
</body>

</html>

(2)其他属性

  • animation-fill-mode:填充模式,设置 CSS 动画在执行之前和之后如何将样式应用于其目标(详解
    • noneforwardbackwardboth
  • animation-iteration-count:迭代次数,设置 CSS 动画重复执行次数
    • 取值 infinite 表示无限重复
  • animation-timing-function:时序函数,与 transition-timing-function 类似
  • animation-direction:动画方向
    • reverse:逆向
    • alternate:交替
    • alternate-reverse:逆向交替
  • animation-delay:延时

(3)缩写属性

animation: name duration ...args

  • ...args 表示其他属性,没有规定顺序

(4)案例:牛顿摆

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <style>
    body {
      height: 100vh;
      background-color: #333;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    div {
      display: flex;
      border-top: 10px solid white;
    }

    span {
      display: block;
      width: 3px;
      height: 300px;
      background-color: white;
      margin: 0 30px;
      position: relative;
      transform-origin: top;
    }

    span::before {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 60px;
      aspect-ratio: 1;
      border-radius: 50%;
      background-color: white;
      transform: translateX(-50%);
    }

    span:first-child {
      animation: left 2s ease-in infinite;
    }

    span:last-child {
      animation: right 2s ease-in infinite;
    }

    @keyframes left {
      0% { transform: rotate(0deg); }
      25% { transform: rotate(60deg); }
      50% { transform: rotate(0deg); }
      100% { transform: rotate(0deg); }
    }

    @keyframes right {
      0% { transform: rotate(0deg); }
      50% { transform: rotate(0deg); }
      75% { transform: rotate(-60deg); }
      100% { transform: rotate(0deg); }
    }
  </style>
</head>

<body>
  <div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</body>

</html>

-End-

标签:动画,专题,color,transition,transform,ff7777,height,background,CSS
From: https://www.cnblogs.com/SRIGT/p/18318668

相关文章

  • css 蛇形排序
    先看效果需求:一个【4 *?】的网格布局,奇数行布局从左往右,偶数行布局从右往左。思路1:js将数组按4个每份进行分割,将偶数份进行反向,然后再将分割后的数据,重新组装。(太麻烦,劝退。)思路2:flex布局,然后用order属性来更改排列顺序。补充:or......
  • html+css 简易摩天轮效果
    vuedom<divclass="ferris_wheel"><divclass="wheelBg"></div><divclass="wheelBox"><divclass="bg"></div><ulclass="list">......
  • Tailwind CSS 实现响应式布局
    TailwindCSS实现响应式布局CSS3如何实现响应式先聊聊纯CSS方案是怎么做的:使用CSS3特性:@mediascrren表示设备屏幕,and用于并列多个条件一般来讲每个响应式系统的ui规范都要有多个断点:small:640px起,横向模式显示状态的手机medium:768px起,平板large:1024px起,电脑......
  • 在 PyQt6 中,为小部件制作动画背景的好方法是什么?
    在QT中,您可以使用QLabel和QMovie来播放gif。我希望其他小部件位于动画背景前面,但您不能将其他小部件放置在QLabel中。例如,我有这个对话框。每个小部件都放置在QFramemain_frame中这就是我想要实现的目标,这里我使用静态图像作为main_frame上的背景。我想获得相......
  • HTML5+CSS3学习笔记第二天
    二、HTML第二天(列表、表格、表单)1.列表无序列表:每行前面多一个小点<ul><li>列表条目1</li><li>列表条目2</li><li>列表条目3</li></ul>有序列表:每行前面自动加1.2.3.的序号<ol><li>有序列表条目1</li><li>有序列表条......
  • HTML5+CSS3学习笔记第一天
    一、HTML初体验11.HTML定义:超文本标记语言超文本:链接标记:标签、带尖括号的文本2.标签语法双标签:成对出现,中间包裹内容单标签:只有开始标签eg:水平线hr、换行br<>放英文字母即标签名结束标签多一个/3.HTML基本骨架<html> <head> <title>网页标题</title> </head>......
  • 在 Django 表单中使用正确的 Bootstrap CSS 进行单选表单输入
    如何让Django表单将正确的Bootstrap渲染到Radioselect表单输入?我在表单中传递了form-controlform-checkclassess,但生成的表单HTML对于radioselect选项并不准确。我正在寻找渲染引导程序原色和内联单选按钮。表单classPersonForm(forms.Form......
  • 一文掌握 Tailwind CSS 基础
    一文掌握TailwindCSS基础工欲善其事,必先利其器先推荐一些好用的工具:TailWindCSS代码提示功能的vscode插件:TailwindCSSIntelliSense再推荐一个TailwindCSS速查网站:https://tailwind.muzhifan.top/本文假定读者已经有一定的CSS基础1宽高1.使用预定义类名如......
  • 04 CSS 轮播图无缝滚动
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=......
  • 389.权志龙明星主题网页 大学生期末大作业 Web前端网页制作 html5+css+js
    欢迎光临仙女的网页世界!这里有Web前端网页制作的各行各业的案例,样式齐全新颖,并持续更新!感谢CSDN,提供了这么好的知识学习、技术交流的平台,让我们在这里相遇,小伙伴们,来吧,让我们一起开启Web前端网页制作的奇妙之旅!说起Web前端,大学开启这扇技术之门以来,一切起始于兴趣爱好和......