CSS学习(十四):动画(animation)和3d转换

1. 动画(animation)

动画(animation) 是CSS3中具有颠覆性的特征之一,可通过设置多个节点精确控制一个或一组动画,常用来实现复杂的动画效果。

相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。

1.1 动画的基本使用

制作动画分为两步:

  1. 先定义动画
  2. 再使用(调用)动画

首先使用keyframes 定义动画(类似定义类选择器),例如:

@keyframes 动画名称 {
            0% {
                width:100px;
            }
            100% {
                width:200px;
            }
}

动画序列

  • 0%是动画开始,100%是动画的完成。这样的规则就是动画序列。
  • @keyframes 中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果。
  • 动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的数量。
  • 百分比来规定变化发生的时间,或用关键词fromto,等同于0%和100%。

使用动画,需要用到animation-nameanimation-duration

/* 调用动画 */
animation-name: 动画名称;
/* 持续时间 */
animation-duration: 持续时间(s);

举一个简单的例子,想要页面一打开,一个盒子就从左边走到右边,盒子定义如下:

<div></div>

css如下:

 /*1.定义动画*/
@keyframes move {
    /*开始状态*/
    0% {
       transform: translateX(0px);
    }
    /*结束状态*/
    100% {
        transform: translateX(1000px);
    }
}
div {
    height: 200px;
    width: 200px;
    background-color: skyblue;
    /*2.调用动画*/
    /*动画名称*/
    animation-name: move;
    /*持续时间*/
    animation-duration: 2s;
}

这时不需要设置鼠标经过就可以完成动画效果,这是过渡做不到的。

1.2 动画常见属性

属性 描述
@keyframes 规定动画。
animation 所有动画属性的简写属性,除了animation-play-state属性。
animation-name 规定@keyframes动画名称。(必须的)
animation-duration 规定动画完成一个周期花费的秒或毫秒,默认是0.(必须的)
animation-timing-function 规定动画的速度曲线,默认是“ease”。
animation-delay 规定动画何时开始,默认是0.
animation-iteration-count 规定动画被播放的次数,默认是1,还有infinite。
animation-direction 规定动画是否在下一周期逆向播放,默认是“normal”,“alternate”是逆播放。
animation-play-state 规定动画是否正在运行或暂停,默认是“running”,还有“paused”。
animation-fill-mode 规定动画结束后状态,保持forwards,回到起始backwards(默认)。

1.3 动画简写属性

animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画其实或者结束的状态;

例如:

animation: move 5s linear 2s infinite alternate;
  • 简写属性不包含animation-play-state
  • 暂停动画:animation-play-state: paused; 经常和鼠标经过等其他配合使用。
  • 想要动画走回来,而不是直接跳回来:animation-direction: alternate;
  • 盒子动画结束后,停在结束位置:animation-fill-mode: forwards

1.4 速度曲线调节

animation-timing-function:规定动画的速度曲线,默认是“ease”。

描述
linear 动画从头到尾的速度是相同的,匀速。
ease 默认。动画以低速开始,然后加快,在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
steps() 指定了时间函数中的间隔数量(步长)。打字机效果。

2. 3D转换

我们生活的环境是3D的,照片就是3D物体在2D平面呈现的例子。

特点就是:近大远小,物体后面遮挡不可见。

3D转换最常用的是3D位移和3D旋转。

主要知识点

  • 3D位移:translate3d(x,y,z)
  • 3D旋转:rotate3d(x,y,z)
  • 透视:perspective
  • 3D呈现:transform-style

2.1 三维坐标系

三维坐标系其实就是指立体空间,立体空间是由三个轴共同组成的。

  • x轴:水平向右。x右边是正值,左边是负值。
  • y轴:垂直向下。y下面是正值,上面是复制。
  • z轴:垂直屏幕。往外面是正值,往里面是负值。

2.2 3D移动 translate3d

3D移动在2D移动的基础上多加了一个可以移动的方向,就是z轴方向。

  • transform: translateX(100px):仅仅是在x轴上移动。
  • transform: translateY(100px):仅仅是在y轴上移动。
  • transform: translateZ(100px):仅仅是在z轴上移动。(注意translateZ一般用px单位)
  • transform: translate3d(x,y,z):其中x、y、z分别指要移动的轴的方向的距离。

例如:

transform: translateX(100px) translateY(100px) translateZ(100px);
 /*x y z 不能省略,如果没有就写0*/
transform: translate3d(100px, 100px, 100px);

2.3 透视 perspective

在2D平面产生近大远小视觉立体,但是只是效果二维的

  • 如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内)。
  • 模拟人类的视觉位置,可认为安排一只眼睛去看。
  • 透视我们也称为视距:视距就是人的眼睛到屏幕的距离。
  • 距离视觉点越近的在电脑平面成像越大,越远成像越小。
  • 透视单位也是像素。

透视写在被观察元素的父盒子上面.

translateZ越大,我们看到的物体就越大。translateZ越大表示物体离我们眼睛越近,视距不变,则在屏幕上显示的物体就越大。

2.4 3D旋转 rotate3d

3D 旋转指可以让元素在三维平面内沿着x轴,y轴,z轴或者自定义轴进行旋转。

语法:

  • transform;rotateX(45deg) :沿着x轴正方向旋转45度。
  • transform;rotateY(45deg) :沿着y轴正方向旋转45度。
  • transform;rotateZ(45deg) :沿着z轴正方向旋转45度。
  • transform;rotate3d(x,y,z,deg) :沿着自定义轴旋转deg为角度(了解即可)。

左手准则(rotateX)

  • 左手的大拇指指向x轴的正方向
  • 其余手指的弯曲方向就是该元素沿着x轴旋转的方向

左手准则(rotateY)

  • 左手的大拇指方向指向y轴正方向
  • 其余手指弯曲的方向就是该元素沿着y轴旋转的方向

2.5 3D呈现 transform-style

  • 控制子元素是否开启三维立体环境。
  • transform-style: flat; 子元素不开启3d立体空间(默认)。
  • transform-style: preserve-3d;子元素开启3d立体空间。
  • 代码写给父级,但是影响的是子盒子。
  • 这个属性很重要。

评论

  1. Sebastian4345
    9月前
    2024-2-29 5:13:00
  2. Cristian3708
    9月前
    2024-2-29 4:43:42
  3. Asia2167
    9月前
    2024-2-28 23:17:23
  4. Kara621
    9月前
    2024-2-28 20:41:56
  5. Eva3830
    9月前
    2024-2-28 9:49:07
  6. Matthias4018
    9月前
    2024-2-28 8:59:55
  7. Joyce4007
    9月前
    2024-2-28 8:25:51
  8. Payton2264
    9月前
    2024-2-28 3:26:09
  9. Lincoln3477
    9月前
    2024-2-28 3:12:24
  10. Ally713
    9月前
    2024-2-28 0:24:27
  11. Norman3070
    10月前
    2024-2-26 8:51:37
  12. Mark2152
    10月前
    2024-2-23 20:50:04
  13. Jay1230
    10月前
    2024-2-22 7:59:53
  14. Millie1910
    10月前
    2024-2-22 6:30:46
  15. Hazel2377
    10月前
    2024-2-12 13:29:14

    Мадонна, икона поп-музыки и культурного влияния, продолжает вдохновлять и поражать своей музыкой и стилем. Её карьера олицетворяет смелость, инновации и постоянное стремление к самовыражению. Среди её лучших песен можно выделить “Like a Prayer”, “Vogue”, “Material Girl”, “Into the Groove” и “Hung Up”. Эти треки не только доминировали на музыкальных чартах, но и оставили неизгладимый след в культурной и исторической панораме музыки. Мадонна не только певица, но и икона стиля, актриса и предприниматель, чье влияние простирается далеко за рамки музыкальной индустрии. Скачать mp3 музыку 2024 года и слушать онлайн бесплатно.

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇