网站功能需求文档,app软件下载安装到手机,百度识图在线使用,国外网站发展建设目录 一、循环波浪二、关键帧呼应三、关键帧顺接四、利用 transform-origin 做拉伸五、大元素可拆分多个小元素联动六、预留视觉缓冲七、随机感#xff1a;动画周期设置八、抛物线#xff1a;两个内外div实现x和y向量运动 今天我们主要学习动画实现要素。 一、循环波浪 利用… 目录 一、循环波浪二、关键帧呼应三、关键帧顺接四、利用 transform-origin 做拉伸五、大元素可拆分多个小元素联动六、预留视觉缓冲七、随机感动画周期设置八、抛物线两个内外div实现x和y向量运动 今天我们主要学习动画实现要素。 一、循环波浪 利用 delay 时间差导致波浪平滑错位。 可以使用 CSS Animation 和 animation-delay 属性来实现一排蓝色的 div 循环波浪效果。以下是一个示例 !DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleWave Animation/title style.wave-container {display: flex;justify-content: space-between;margin-top: 50px;width: 100%;}.wave {width: 50px;height: 50px;background-color: blue;animation: wave 1s linear infinite;}.wave:nth-child(2) {animation-delay: 0.2s;}.wave:nth-child(3) {animation-delay: 0.4s;}.wave:nth-child(4) {animation-delay: 0.6s;}.wave:nth-child(5) {animation-delay: 0.8s;}keyframes wave {0% {transform: translateY(0);}50% {transform: translateY(-50px);}100% {transform: translateY(0);}} /style /head bodydiv classwave-containerdiv classwave/divdiv classwave/divdiv classwave/divdiv classwave/divdiv classwave/div/div /body /html在这个示例中使用了五个蓝色的 div 元素 .wave 来表示波浪效果。通过设置不同的 animation-delay 来创建时间差从而形成连续的波浪效果。 CSS 动画 wave 定义了元素的缩放动画使得波浪效果连续播放。 二、关键帧呼应 双盒弹跳联动。 可以注意到上述非常丝滑的模拟了两个盒子在不同阶段的弹跳效果。 三、关键帧顺接 四、利用 transform-origin 做拉伸 transform-origin: 48% 100% 从下往上扩展/拉伸transform-origin: 50% 5% 从上往下扩展/拉伸。 transform-origin 属性用于指定 CSS 变换的原点。默认情况下变换的原点为元素的中心点 (50% 50%)。通过调整 transform-origin 的值我们可以改变变换的起始位置从而实现不同的效果。 transform-origin: 48% 100%;这个值将变换的原点设置为元素的底部中心。因此当应用拉伸变换时元素会从底部向上扩展。具体而言变换会围绕元素底部边缘的水平中心点进行扩展。 transform-origin: 50% 5%;这个值将变换的原点设置为元素的顶部中心。因此当应用拉伸变换时元素会从顶部向下扩展。具体而言变换会围绕元素顶部边缘的水平中心点进行扩展。 以下是具体的代码示例 !DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleStretch Animation/title style.stretch-container {display: flex;margin-top: 50px;width: 100%;}.stretch {width: 50px;height: 50px;background-color: blue;border-radius: 50%;animation: stretch 1s linear infinite alternate;}.stretch:nth-child(1) {transform-origin: 48% 100%;}.stretch:nth-child(2) {transform-origin: 50% 5%;}keyframes stretch {0% {transform: scaleY(1);}100% {transform: scaleY(2);}} /style /head bodydiv classstretch-containerdiv classstretch/divdiv classstretch/div/div /body /html在这个示例中有两个蓝色的 div 元素 .stretch通过不同的 transform-origin 值分别实现了从底部向上拉伸和从顶部向下拉伸的效果。 五、大元素可拆分多个小元素联动 比如人物举着信封入场可以信封和手做额外的附属动画放大动作幅度。 图片来源陈*真腾讯 六、预留视觉缓冲 动画循环时可以设置 80% - 100% 关键帧之间不变。 预留视觉缓冲的目的是在动画循环的过程中使得动画的最后一帧保持一段时间以给用户提供视觉缓冲使动画更加平滑和自然。在 CSS 中可以通过设置关键帧动画的某些关键帧保持一段时间来实现预留视觉缓冲。 例如在动画的 80% 到 100% 之间保持最后一帧的状态可以让动画在结束阶段缓缓减速给用户一个更平滑的动画效果。 以下是一个具体的示例展示了如何在动画的 80% 到 100% 之间保持最后一帧的状态 !DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleAnimation with Visual Buffering/title style.box {width: 100px;height: 100px;background-color: blue;position: relative;animation: move 2s linear infinite;}keyframes move {0% {transform: translateX(0);}80% {transform: translateX(200px);}100% {transform: translateX(200px);}} /style /head bodydiv classbox/div /body /html在这个示例中动画从 0% 到 80% 的阶段进行了水平移动然后在 80% 到 100% 的阶段保持了最后一帧的状态即元素位于水平方向上的最终位置。 这样做可以使得动画在结束阶段缓缓减速给用户一个更平滑的动画体验。 七、随机感动画周期设置 多个元素同时运动可以设置不同 duration 和 delay。除⾮时间是各粒⼦时间的最⼩公倍数否则不会回归到初始状态从⽽产⽣随机感。 在多个元素同时运动时如果它们具有不同的 duration 和 delay它们的动画周期不会是一个固定的整数倍关系因此它们不会在同一时刻回归到初始状态从而产生了一种随机感。 这是因为当动画周期不是一个固定的整数倍关系时各个元素的动画在同一时刻处于不同的阶段导致它们的动画效果看起来更加错落有致、自然多样。 以下是一个具体示例展示了如何通过设置不同的 duration 和 delay使得多个元素同时运动产生随机感的动画效果 !DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleRandom Motion/title style.box {width: 50px;height: 50px;background-color: blue;position: absolute;border-radius: 50%;}.box:nth-child(1) {animation: move1 2s linear infinite;top: 100px;left: 100px;}.box:nth-child(2) {animation: move2 3s linear infinite;top: 200px;left: 200px;}keyframes move1 {0% {transform: translateX(0);}100% {transform: translateX(200px);}}keyframes move2 {0% {transform: translateY(0);}100% {transform: translateY(200px);}} /style /head bodydiv classbox/divdiv classbox/div /body /html在这个示例中有两个蓝色的圆形 .box 元素它们分别通过不同的 animation 属性设置了不同的动画效果move1 和 move2并且具有不同的起始位置和动画持续时间。 因此它们的动画周期不是一个固定的整数倍关系从而产生了一种随机感的动画效果。 八、抛物线两个内外div实现x和y向量运动 主要就是利用两个内外div实现x向量运动和y向量运动y向量运动引入贝塞尔曲线即可实现适当曲线运动。 在上一篇我们在学习贝塞尔曲线时实现过。 !DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleParabolic Motion/title style.ball {width: 50px;height: 50px;background-color: red;position: absolute;border-radius: 50%;animation: horizontalMove 2s linear forwards, verticalMove 2s cubic-bezier(.74,.2,.95,.47) forwards;}keyframes horizontalMove {0% {left: 0;}100% {left: 200px;}}keyframes verticalMove {0% {top: 0;}100% {top: 200px;}} /style /head bodydiv classball/div /body /html我们是实现了一个 div 在 left 和 top 两个方向属性上的不同速度的变化来模拟抛物线。 但假如我们定义了如下 keyframes horizontalMove {0% {transform: translateX(0);}100% {transform: translateY(200px);}}keyframes verticalMove {0% {transform: translateY(0);}100% {transform: translateY(200px);}}主要就是利用x向量运动和y向量运动x向量匀速运动y向量运动引入贝塞尔曲线即可实现适当曲线运动。 这种方法可以应用于各种场景比如游戏中的角色移动、用户界面中的动态效果、数据可视化中的图表动画等。通过调整贝塞尔曲线的控制点可以实现不同形状的曲线运动从而满足不同的需求和设计目的。 以下是一个更普适的示例演示了如何利用两个 div 元素和贝塞尔曲线来实现适当的曲线运动 !DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleBezier Curve Animation/title style.outer {position: relative;width: 400px;height: 400px;border: 1px solid black;overflow: hidden;}.inner {position: absolute;width: 50px;height: 50px;background-color: blue;border-radius: 50%;animation: moveX 2s linear infinite, moveY 2s cubic-bezier(.74,.2,.95,.47) infinite;}keyframes moveX {0% {left: 0;}100% {left: calc(100% - 50px);}}keyframes moveY {0% {top: 0;}100% {top: calc(100% - 50px);}} /style /head bodydiv classouterdiv classinner/div/div /body /html在这个示例中.outer div 元素作为外部容器限制活动范围.inner div 元素作为内部元素利用两个不同的动画分别控制 x 向量和 y 向量的运动。在 y 向量的运动中引入了贝塞尔曲线使得动画呈现出适当的曲线运动效果。