1. 动画（animation）
动画（animation） 是CSS3中具有颠覆性的特征之一，可通过设置多个节点精确控制一个或一组动画，常用来实现复杂的动画效果。
相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。
1.1 动画的基本使用
制作动画分为两步：
- 先定义动画
- 再使用（调用）动画
首先使用keyframes 定义动画（类似定义类选择器），例如:
@keyframes 动画名称 {
0% {
width:100px;
}
100% {
width:200px;
}
}动画序列
- 0%是动画开始，100%是动画的完成。这样的规则就是动画序列。
- 在@keyframes 中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
- 动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的数量。
- 用百分比来规定变化发生的时间，或用关键词
from和to，等同于0%和100%。
使用动画，需要用到animation-name和animation-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立体空间。- 代码写给父级，但是影响的是子盒子。
- 这个属性很重要。
https://parkauto.forum-top.ru/viewtopic.php?id=86#p223
http://cinemania.forum24.ru/?1-15-0-00000794-000-0-0-1706616226
https://angelladydety.getbb.ru/viewtopic.php?f=39&t=34774
http://www.jeromebaray.com/afm/wiki/index.php/Mp3gid.co
http://dog-ola.ru/viewtopic.php?f=5&t=6000
http://producm.ru/forum/messages/forum18/topic39748/message356888/?result=new#message356888
https://speterburg.rusff.me/viewtopic.php?id=8186#p276716
http://raussga.flybb.ru/viewtopic.php?f=12&t=1493
https://psychology.5bb.ru/viewtopic.php?id=1619#p4027
http://wiki.iurium.cz/w/U%C5%BEivatel:MarshallHerrera
http://sea.2bb.ru/viewtopic.php?id=1683#p3621
http://urbino.fh-joanneum.at/trials/index.php/Mp3gid.co
http://autoprajs.ru/13027.html
https://odessamama.net/forum.php?mod=viewthread&tid=278456&extra=
Мадонна, икона поп-музыки и культурного влияния, продолжает вдохновлять и поражать своей музыкой и стилем. Её карьера олицетворяет смелость, инновации и постоянное стремление к самовыражению. Среди её лучших песен можно выделить “Like a Prayer”, “Vogue”, “Material Girl”, “Into the Groove” и “Hung Up”. Эти треки не только доминировали на музыкальных чартах, но и оставили неизгладимый след в культурной и исторической панораме музыки. Мадонна не только певица, но и икона стиля, актриса и предприниматель, чье влияние простирается далеко за рамки музыкальной индустрии. Скачать mp3 музыку 2024 года и слушать онлайн бесплатно.