一.2D转换

转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果

转换(transform)可以简单理解为变形

  • 移动:translate

  • 旋转:rotate

  • 缩放:scale

1.1 二维坐标系

2D转换是改变标签在二维平面上的位置和形状的一种技术

1.2 2D转换之移动translate

2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位

语法:

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

重点:

  • 定义2D转换中的移动,沿着x和y轴移动元素

  • translate最大的优点:不会影响到其他元素的位置

  • translate中的百分比单位是相对于自身元素的translate:(50%,50%);

  • 对行内标签没有效果

1.3 2D转换之旋转rotate

2D旋转指的是让元素在2维平面内顺时针或逆时针旋转

语法:

transform:rotate(度数)

重点:

  • rotate里面跟度数,单位是deg 比如 rotate(45deg)

  • 角度为正时,顺时针,负时,逆时针

  • 默认旋转的中心点是元素的中心点

1.4 2D转换中心点transform-origin

可以设置元素的中心点

语法:

transform-origin:x y;

重点:

  • 注意后面的参数x和y用空格分开

  • x y默认转换的中心点是元素的中心点(50% 50%)

  • 还可以给x y设置像素或者方位名词(top bottom left right center)

1.5 2D转换之缩放scale

给元素添加上这个属性就能控制它放大还是缩小

语法:

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.6 2D转换综合写法

注意

  1. 同时使用多个转换,其格式为:transform:translate()rotate()scale()… 等

  2. 顺序会影响转换的效果

  3. 当我们同时有位移和其他属性的时候,要将位移放到最前

1.7 2D 转换总结

  • 转换transform 我们简单理解就是变形有2D和3D之分

  • 我们暂且学了三个分别是位移旋转和缩放

  • 2D移动translate(x,y)最大的优势是不影响其他盒子,里面参数用%,是相对于自身宽度和高度来计算的 可以分开写比如translateX(x)和translateY(y)

  • 2D旋转rotate(度数)可以实现旋转元素度数的单位是deg

  • 2D缩放sacle(x,y)里面参数是数字不跟单位可以是小数最大的优势不影响其他盒子

  • 设置转换中心点transform-origin:x y;参数可以百分比、像素或者是方位名词

  • 当我们进行综合写法,同时有位移和其他属性的时候,记得要将位移放到最前

二、CSS3 动画

动画(animation)是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果

相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果

2.1 动画的基本使用

制作动画分为两步

  1. 先定义动画

  2. 再使用(调用)动画

2.1.1 用keyframes定义动画(类似定义类选择器)

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

动画序列

  • 0%是动画的开始,100%是动画的完成。这样的规则就是动画序列

  • @keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果

  • 动画是使元素从一种样式逐渐变化为另一种样式的效果,可以改变任意多的样式任意多的次数

  • 请用百分比来规定变化发生的时间,或用关键词from和to,等同于0%和100%

2.1.2 元素使用动画

div {
    width:200px;
    height:200px;
    background-color:aqua;
    margin:100px auto;
    调用动画
    animation-name:动画名称;
    持续时间
    animation-duration:持续时间
}

2.2 动画常用属性

属性描述
@keyframes规定动画
animation所有动画属性的简写属性,除了animation-play-state
animation-name规定动画名称(必须的)
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

2.3 动画简写属性

animation :动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束状态

animation:myfirst 5s linear 2s infinite alternate

动画名称 持续时间 一定要写

注意:

  • 简写属性里面不包含 animation-play-state

  • 暂停动画: animation-play-state: puased; 经常和鼠标经过等其他配合使用

  • 想要动画走回来,而不是直接跳回来:animation-direction : alternate

  • 盒子动画结束后,停在结束位置: animation-fill-mode : forwards

案例——热点图案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #333;
        }

        .map {
            position: relative;
            width: 747px;
            height: 617px;
            background: url(media/map.png) no-repeat;
            margin: 0 auto;
        }

        .city {
            position: absolute;
            top: 227px;
            right: 193px;
            color: #fff;
        }

        .tb {
            top: 500px;
            right: 80px;
        }

        .gz {
            top: 544px;
            right: 195px;
        }

        .dotted {
            width: 8px;
            height: 8px;
            background-color: #09f;
            border-radius: 50%;
        }

        .city div[class^="pulse"] {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            box-shadow: 0 0 12px #009dfd;
            border-radius: 50%;
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
            animation: pulse 1.2s linear infinite;
        }

        .city div .pulse2 {
            animation-delay: 0.4s;
        }

        .city div.pulse3 {
            animation-delay: 0.8s;
        }

        @keyframes pulse {
            0% {}

            70% {
                width: 40px;
                height: 40px;
                opacity: 1;
            }

            100% {
                width: 70px;
                height: 70px;
                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <div class="map">
        <div class="city">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
        <div class="city tb">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
        <div class="city gz">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
    </div>
</body>

</html>

2.4 速度曲线细节

animation-timing-function:规定动画的曲线,默认是“ease”

描述
linear动画从头到尾的速度是相同的。匀速
ease默认。动画从低速开始,然后加快,在结束前变慢
ease-in动画以低俗开始
ease-out动画以低俗结束
ease-in-out动画以低俗开始和结束
steps()指定了时间函数中的间隔数量(步长)

案例——奔跑的熊大

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #ccc;
        }

        div {
            position: absolute;
            width: 200px;
            height: 100px;
            background: url(media/bear.png) no-repeat;
            /* 元素可以添加多个动画。用逗号分隔 */
            animation: bear 1s steps(8) infinite, move 3s forwards;
        }

        @keyframes bear {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: -1600px 0;
            }
        }

        @keyframes move {
            0% {
                left: 0;
            }

            100% {
                left: 50%;
                /* margin-left: -100px; */
                transform: translateX(-50%);
            }
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

 有不完整和有误的地方欢迎各位小伙伴指正,一起学习!

更多推荐