重学前端014 --- 响应式网页设计 CSS动画

div 通过css 线变成圆形

.wheel {border: 2px solid black;border-radius: 50%;margin-left: 50px;position: absolute;height: 55vw;width: 55vw;
}

transform-origin

transform-origin属性用于设置应用CSS转换的点。
例如，执行旋转时，变换原点决定了元素围绕哪个点旋转。

这将使原点从左边偏移 0%，从上面偏移 0%，把它设置在元素的左上角。

transform-origin: 0% 0%;

.line {background-color: black;width: 50%;height: 2px;position: absolute;top: 50%;left: 50%;transform-origin: 0% 0%;
}

transform

transform属性允许你改变一个元素的形状。 在这种情况下，使用 rotate(60deg) 值会将元素围绕其 transform-origin 点顺时针旋转 60 度。

.line:nth-of-type(2) {transform: rotate(60deg);
}
.line:nth-of-type(3) {transform: rotate(120deg);
}
.line:nth-of-type(4) {transform: rotate(180deg);
}
.line:nth-of-type(5) {transform: rotate(240deg);
}
.line:nth-of-type(6) {transform: rotate(300deg);
}

动画 @keyframes

@keyframes at规则用于定义CSS动画的流程。
在@keyframes规则中，您可以为动画序列中的特定点（如0%或25%）创建选择器，或者使用from和to定义序列的开始和结束。

形状的变化

@keyframes wheel {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}
}

背景颜色的变化

@keyframes cabins {0% {transform: rotate(0deg);}25% {background-color: yellow;}50% {background-color: purple;}100% {transform: rotate(-360deg);}
}

动画相关属性

animation-name 属性用于将@keyframes规则链接到CSS选择器。此属性的值应与@keyframes规则的名称匹配。
animation-duration 属性用于设置动画应该在多长时间内完成。时间应以秒（s）或毫秒（ms）为单位指定。
animation-iteration-count 属性设置动画应重复的次数。这可以设置为一个数字，也可以设置为infinite无限以无限期重复动画。

animation-timing-function 属性设置动画随着时间的推移应该如何进行。 这个属性有几个不同的值，但你希望摩天轮动画从开始到结束以相同的速度运行。值设置为 linear。
linear: 匀速
ease-in-out: 此设置将告诉动画以较慢的速度开始和结束，但在循环的中间移动得更快。

animation 属性设置为 cabins 10s linear infinite。 这将按顺序设置 animation-name、animation-duration、animation-timing-function 和 animation-iteration-count 属性。