HTML学习（五）

最新推荐文章于 2023-04-11 21:44:33 发布

不断充电的兔子

最新推荐文章于 2023-04-11 21:44:33 发布

阅读量57

点赞数

分类专栏： HTML学习文章标签： css html

本文链接：https://blog.csdn.net/m0_49049653/article/details/117553691

版权

HTML学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

CSS续

CSS动画基础
- 2D转换
- 动画

CSS动画基础

2D转换

2D转换就是改变标签在二维平面上的位置和形状。
移动

语法：

transform:translate(x,y);
transform:translateX(n);
transform:translateY(n);

x代表在水平方向上移动，y代表在竖直方向上移动。

实例：
1、没有设置移动以前的实现效果如下：
在这里插入图片描述

2、设置为transform:translate(x,y)实现结果如下：
在这里插入图片描述

3、设置为transform:translateX(n)实现结果如下：
在这里插入图片描述

4、设置为transform:translateY(n)实现结果如下：
在这里插入图片描述
注意通过上面的实验及测试，我们可以发现上述三个语法不能一起使用，一般只能实现最后一次出现的语法。

旋转

在2D平面上顺时针或者逆时针旋转。单位是deg（度）。顺时针是正值，逆时针是负值。

语法：

transform:rotate(度数);

旋转中心一般默认为元素的中心点。旋转中心的语法如下：

transform-orgin:x y;

注意：参数x，y用空格隔开；x y 默认旋转的中心点是元素的中心点即(50% 50%)；还可以给x和y设置像素或者方位名词(top right bottom left center)。

实例：
1、没有设置旋转之前的实现效果：
在这里插入图片描述

2、设置旋转效果及旋转中心以后的实现效果如下：

在这里插入图片描述

缩放
缩放，即缩小和放大。

语法：

transform:scale(x,y);

注意：
x代表水平方向上的缩放，y代表竖直方向的缩放。
transform: scale(1, 1): 宽和高都放大了一倍，相当于没有放大
transform: scale(2, 2): 宽和高放大了2倍
transform: scale(2): 只写一个参数，第二个参数则和第一个参数一样，相当于scale(2, 2)
transform: scale(0.5, 0.5): 缩小
scale缩放最大的优势：可以设置转换中心点缩放，默认以中心带你缩放的，而且不影响其他盒子。

实例：
1、没有设置缩放之前的实现效果：
在这里插入图片描述

2、设置放大两倍的效果：
在这里插入图片描述

3、设置缩小一半的效果：
在这里插入图片描述

动画

动画的使用步骤如下：
i、定义动画
语法：

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

注意：
1、在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果
2、动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数
3、用百分比来规定变化发生的时间，或用from和to，等同于 0% 和 100%
4、0% 是动画的开始位置，100 % 是动画的完成位置。

ii、使用动画（在相应的里调用定义的动画）
语法：

div {
      /* 调用动画 */    
      animation-name: 动画名称;
      /* 持续时间 */
      animation-duration: 持续时间；
      ...
}

** 常见属性**

属性	描述
@keyframes	定义动画
animation	所有动画属性的简写属性，除了animation-play-state属性
animation-name	动画名称，必不可少的
animation-duration	规定动画完成一个周期的时间，默认是0（必须的）
animation-timing-function	规定动画的过渡类型
animation-delay	设置动画的延迟时间
animation-iteration-count	设置动画循环次数
animation-direction	设置动画是否逆向播放
animation-play-state	设置动画是否正在运行或暂停
animation-fill-mode	设置动画结束后状态

实例：

实现一个圆形从页面最左边中间移动到正中间变为正方形，然后又从正方形移动到最右边中间，并实现一个颜色的渐变。能够实现循环播放（由于还不清楚怎么上传视频，这里只放一下代码。具体实现效果，大家可以自己下去实现一下。）

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
    *{
        padding:0px;
        margin: 0px;
    }
    body{
        width: 1400px;
        height:600px;
        background-color: #65C;
    }
    #box{
        width:200px;
        height: 200px;
        margin:auto,0;
        animation-name: move;
        animation-duration: 5s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }
    @keyframes move{
        0%{
            transform: translate(0,200px);
            border-radius: 50%;
            background-color: blue;
        }
        25%{
            transform: translate(550px,200px);
            border-radius: 0%;
            background-color: blue;
        }
        50%{
            transform: translate(550px,200px);
            border-radius: 0%;
            background-color: #a67;
        }
        100%{
            transform: translate(1170px,200px);
            border-radius: 50%;
            background-color: #a67;
        }
    }
    </style>
</head>
<body>
    <div id="box">
    </div>
</body>
</html>

不断充电的兔子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习（五）

CSS续CSS动画基础2D转换动画CSS动画基础2D转换2D转换就是改变标签在二维平面上的位置和形状。移动语法：transform:translate(x,y);transform:translateX(n);transform:translateY(n);x代表在水平方向上移动，y代表在竖直方向上移动。实例：1、没有设置移动以前的实现效果如下：2、设置为transform:translate(x,y)实现结果如下：3、设置为transform:translateX(n)实
复制链接

扫一扫