html+css布局初入门：动画效果和实现

最新推荐文章于 2024-08-07 15:34:36 发布

The..Fuir

最新推荐文章于 2024-08-07 15:34:36 发布

阅读量867

点赞数 1

分类专栏： html css 文章标签： css html

本文链接：https://blog.csdn.net/qq_51066068/article/details/123694688

版权

html 同时被 2 个专栏收录

50 篇文章 6 订阅

订阅专栏

css

45 篇文章 6 订阅

订阅专栏

动画

首先，放一个动画来激起小伙伴们的求知欲和好奇心吧

效果图：

代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            /* 动画名字 */
            animation-name: leftToRight;
            /* 动画持续时长 */
            animation-duration: 3s;
            /* 执行速率 */
            animation-timing-function: linear;
            /* 动画延迟执行时间 */
            animation-delay: 0s;
            /* 动画的播放次数 */
            animation-iteration-count: infinite;
            /* 是否轮流反向播放动画 */
            animation-direction: alternate;
            /* 速写 */
            animation: leftToRight 3s linear infinite alternate;
        }

        div:hover{
            /* 鼠标悬停在div内时，暂停 */
            animation-play-state: paused;
        }
        /* 定义动画 */
        /* @keyframes 动画名字{} */
        @keyframes leftToRight{
            /* 开始位置的动画状态 */
            from{
                margin-left: 0;
            }
            /* 结束位置的动画状态 */
            to{
                margin-left: 500px;
            }
        }
    </style>
</head>
<body>
  <div></div>
</body>
</html>
由于该技术的规范还没有稳定，在使用前要先确保浏览器对其兼容性。 Animations是css3的一个模块，使用keyframes定义如何随着时间的移动改变CSS的属性值，可以通过指定它们的持续时间，重复次数，如何重复来控制关键帧的行为。Animations由两部分组成：css动画的配置，以及一系列的keyframes（用来描述动画的开始、过程、结束状态）。不需要了解任何Js技术即可完成动画的制作

-过渡和动画之间的异同

不同点： 过渡必须人为的触发才会执行动画

动画不需要人为的触发就可以执行动画

相同点： 过渡和动画都是用来给元素添加动画的过渡和

动画都是系统新增的一些属性过渡和动画都需要满足三要素才会有动画效果

-animation-name 指定要绑定到选择器的关键帧的名称，告诉系统需要执行哪个动画

告诉系统我们需要自己创建一个名称叫做animiationName的动画

通过@keyframes来设置动画序列，序列中每个关键帧描述动画元素在动画序列的特定时间内如何渲染。关键帧使用了一个百分比来表示在动画序列中出现的时间。0%表示动画的初始时间，也可以通过from关键字表示。100%表示动画的结束时间，也可以通过to关键字表示。
    关键帧：
		   @keyframes animiationName{
                 keyframes-selector{
                      css-style;
                 }
			}

-animation-duration 动画指定需要多少秒或毫秒完成，告诉系统动画持续的时长

time 指定动画播放完成花费的时间。默认值为 0，意味着没有动画效果。

-animation-timing-function 设置动画将如何完成一个周期，告诉系统动画执行的速度

linear 动画从头到尾的速度是相同的。匀速

 ease 默认。动画以低速开始，然后加快，在结束前变慢。慢速-快-慢速

ease-in 动画以低速开始。

ease-out 动画以低速结束。

ease-in-out 动画以低速开始和结束。

cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

-animation-delay 设置动画在启动前的延迟间隔。（页面加载完成后延迟执行动画的时间）

-animation-iteration-count 定义动画的播放次数。告诉系统动画需要执行几次

n 一个数字，定义应该播放多少次动画  infinite 无限次往返执行

-animation-direction 指定是否应该轮流反向播放动画。

normal 默认的取值, 执行完一次之后回到起点继续执行下一次

alternate 往返动画, 执行完一次之后往回执行下一次

reverse 反向执行

-animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

none: 不做任何改变

forwards: 让元素结束状态保持动画最后一帧的样式

backwards: 让元素等待状态的时候显示动画第一帧的样式

both: 让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式

-animation-play-state 告诉系统当前动画是否需要暂停

running: 执行动画

paused: 暂停动画

-动画模块连写格式

animation:动画名称(animation-name) 动画时长(animation-duration) 动画运动速度(animation-timing-function) 延迟时间(animation-delay) 执行次数(animation-iteration-count) 往返动画(animation-direction);

-动画模块连写格式的简写

animation:动画名称动画时长;

animate.css

动态效果网站：

Animate.css | A cross-browser library of CSS animations.

1.引入animate的cdn或本地animate.css文件

<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">

2.给指定元素加入class"animate__animated <动效名称>"

<div class="animate__animated animate__fadeInUpBig">你好 animate</div>

举例说明：

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <!-- 引入第三方样式 animate  用link-->
    <link rel="stylesheet" href="animate.css">
</head>
<body>  
    <!--animate__animated 这个类名复制过来即可
         如果要使用animate.css的话，需要使用动画的话，我们得在动画名称前加animate__animatedName -->
    <h1 class="animate__animated animate__zoomOutLeft">第三方引入样式-----</h1>
</body>
</html>

2D转换模块

transform 属性向元素应用从2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或者倾斜。

-旋转 rotate

transform: rotate(45deg); 其中deg是单位, 代表多少度

-平移 translate

transform: translate(100px, 0px); 第一个参数:水平方向第二个参数:垂直方向

-缩放 scale

transform: scale(1.5); transform: scale(0.5, 0.5); 第一个参数:水平方向第二个参数:垂直方向注意点: 如果取值是1, 代表不变如果取值大于1, 代表需要放大如果取值小于1, 代表需要缩小 如果水平和垂直缩放都一样, 那么可以简写为一个参数

-综合转换连写格式

transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5);

/* 注意点: 1.如果需要进行多个转换, 那么用空格隔开

2.2D的转换模块会修改元素的坐标系, 所以旋转之后再平移就不是水平平移的 */

-形变中心点

transform-origin:  第一个参数:水平方向第二个参数:垂直方向

注意点取值有三种形式

具体像素 /transform-origin: 200px 0px;/

百分比 /transform-origin: 50% 50%;/ /transform-origin: 0% 0%;/

特殊关键字 /transform-origin: center center;/ 默认情况下所有的元素都是以自己的中心点作为参考来旋转的, 我们可以通过形变中心点属性来修改它的参考点

-旋转轴向

-默认情况下所有元素都是围绕Z轴进行旋转 transform: rotateZ(45deg);

围绕z轴旋转 transform: rotateX(45deg);

围绕x轴旋转 transform: rotateY(45deg);

围绕y轴旋转 -总结: 想围绕哪个轴旋转, 那么只需要在rotate后面加上哪个轴即可

-perspective

属性定义3D元素距视图的距离，以像素计，该属性允许改变3D元素查看3D元素的视图，当为元素定义perspective属性时，其子元素会获得透视效果，而不是元素本身

1.什么是透视 

近大远小

2.注意点 

一定要注意, 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面