CSS3新增动画、过渡效果及样式、移动端适配-一一网

CSS3新增动画、过渡效果

transform变形

`translate` 沿着两个方向位移

    transform: translate(第一个值,第二个值);
复制代码

第一个值x，第二个值y【可以是百分比，也可以是距离】
【使用百分比是移动容器本身的百分比不是父元素】

不知道小盒子本身大小的前提下，用定位配合transform可以实现水平垂直居中

    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            top: 50%;
            left: 50%;
            /*变动的是相对自身原本大小，而不是父元素*/
            transform: translate(-50%,-50%);
        }
    </style>
    <body>
        <div class="box"></div>
    </body>
复制代码

`translateX` 单独沿着x轴位移

    transform: translateX(值);
复制代码

`transLateY` 单独沿着y轴位移

    transform: translateY(值);
复制代码

        <style>
            .box{
                width: 100px;
                height: 100px;
                background-color: green;
                /* 第一个值是x轴 第二个值是y轴 */
                transform: translate(200px,200px);
                /* 沿着x轴运动 */
                /* transform: translateX(200px); */
                /* 沿着y轴运动 */
                /* transform: translateY(200px); */
            }
        </style>
    <body>
        <div class="box"></div>
    </body>
复制代码

scale变形

scale沿着两个方向缩放
scaleX将宽度缩放
scaleY将高度缩放

        <style>
            .box2{
                width: 300px;
                height: 300px;
                position: absolute;
                top: 50%;
                left: 50%;
                overflow: hidden;
                border: 2px solid red;
            }
            .box2 img{
                width: 300px;
                height: 300px;
            }
            .box2:hover img{
                transform: scale(1.5);
            }
        </style>
    <body>
        <div class="box2">
            <img src="加个图片" alt="">
        </div>
    </body>
复制代码

rotate绕轴旋转

rotateX绕x轴旋转
- 如果是一个正方形，绕x轴旋转360度扫过的面积形成的物体看起来是一个放倒的圆柱体，侧视图是一个圆形
rotateY绕y轴旋转
- 如果是一个正方形，绕y轴旋转360度扫过的面积形成的物体看起来是一个立起来的圆柱体，俯视图是一个圆形
rotateZ绕Z轴旋转
- 如果不修改作用点，那么看起来就是图形围绕着0坐标点旋转

        <style>
            .box{
                width: 100px;
                height: 100px;
                background-color: green;
                /* 为了能看出效果加了过渡 */
                transition:  all 1s linear;
            }
            .box:hover{
                /* 绕x轴旋转360度 */
                transform: rotateX(360deg);
                /* 绕y轴旋转360度 */
                /* transform: rotateY(360deg); */
                /* 绕z轴旋转360度 */
                /* transform: rotateZ(360deg); */
            }
        </style>
        <div class="box"></div>
复制代码

skew倾斜

skewX延x轴倾斜
- 图形在一二象限的观感为倒向第二象限，在三四象限的观感为倒向第四象限【值都为正的情况下】
skewY延y轴倾斜
- 图形在二三象限的观感为“被吸向第二象限”，在一四象限的观感为“向第四象限沉下去”【值都为正的情况下】
skew延两个方向倾斜

        <style>
            .box{
                width: 100px;
                height: 100px;
                background-color: green;
                /* 为了能看出效果加了过渡 */
                transition:  all 1s linear;
            }
            .box:hover{
                /* 水平方向倾斜36度 */
                transform: skewX(36deg);
                /* 垂直方向倾斜36度 */
                /* transform: skewY(36deg); */
                /* 水平垂直方向倾斜36度 */
                /* transform: skew(36deg 36deg); */
            }
        </style>
            <div class="box"></div>
复制代码

transform-origin改变作用点（默认在中心）

默认值是 center center

第一个值代表水平方向（left center right）
第二个值代表垂直方向（top center bottom）

        <style>
            .box{
                width: 100px;
                height: 100px;
                background-color: green;
                transition:  all 1s linear;
            }
            .box:hover{
                /* 绕x轴旋转360度 */
                transform: rotateX(360deg);
                /* 改变作用点为右下角 */
                transform-origin:right bottom;
            }
        </style>
            <div class="box"></div>
复制代码

perspective景深

给父元素设置，子元素会有近大远小的效果

        <style>
            .box{
                perspective:1000px;
            }
            .box2{
                width: 100px;
                height: 100px;
                background-color: green;
                transition:  all 1s linear;
            }
        </style>
            <div class="box">
                <div class="box2"></div>
            </div>
复制代码

transition过渡动画

transition-property 动画的属性
transition-duration 动画执行的时间
transition-timing-function 动画运动的曲线
- linear 匀速
- ease 【默认】动画以低速开始，然后加快，在结束前变慢
- ease-in 动画以低速开始
- ease-out 动画以低速结束
- ease-in-out 动画以低速开始、低速结束
- cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值
transition-delay 延迟的时间
【复合属性】 transition 过渡
- 第一个值动画的属性
  - all 代表所有变幻的属性
  - 或者单独写要变幻的属性
- 第一个值动画执行的时间
- 第一个值动画运动的曲线
- 第一个值延迟的时间

        <style>
            *{
                margin:0;
                padding:0;
            }
            .box{
                width: 100px;
                height: 100px;
                background:green;
                /* 过渡的属性 */
                transition-property: all;
                /* 动画执行的时间 */
                transition-duration: 1s;
                /* 动画运动的曲线 */
                transition-timing-function: ease;
                /* 延迟的时间  */
                transition-delay: 0s;
                /* 复合属性
                第一个值：过渡的属性
                第二个值：动画执行的时间
                第三个值：动画运动的曲线
                第四个值：延迟的时间            
                */
                /* transition:height 1s linear 1s,width 1s linear 1s; */
                /* 
                all 代表所有变换的属性
                */
                transition:all 1s linear 1s;

            }
            .box:hover{
                height: 500px;
                width:500px;
            }
        </style>
            <div class="box">
                <div class="box2"></div>
            </div>
复制代码

animation过渡动画【能精细控制每帧，流程】

相较于transition更加消耗性能
@keyframes关键帧
- animation动画能够逐过程控制动画的关键就在于@keyframes，关键帧 keyframes 可以控制动画序列的中间步骤。
- 用法
  - 创建一个带名称的 @keyframes ,后续在元素的样式中使用 animation-name 属性将动画同其关键帧声明匹配。
  - 每个 @keyframes 规则包含多个关键帧,每个关键帧有一个百分比值作为名称，代表在动画进行中，在哪个阶段触发这个帧所包含的样式。
  - 百分比的代码顺序不特定，执行时按照百分比进行顺序执行
  - 开始可以写作0%或form,结束可以写作100%或to
- 重复定义
  - 如果多个关键帧使用同一个名称，以最后一次定义的为准。所以动画在一个时刻（阶段）只会使用一个的关键帧的数据。
  - 如果一个@keyframes 内的关键帧的百分比存在重复的情况，则@keyframes规则中该百分比的所有关键帧都将用于该帧。如果多个关键帧指定了相同的百分比值，则@keyframes规则内是可以使用层叠样式的。
- 同一关键帧中的相同属性被重复定义
  - 如果某一个关键帧内某属性出现了重复的定义，且重复的关键帧中的 CSS 属性值不同，则以最后一次定义的属性为准。
- 关键帧中出现的 !important 将会被忽略。
animation-name 动画的名字
animation-duration 动画执行的时间
animation-timing-function 动画运动的曲线
- linear 匀速
- ease 【默认】动画以低速开始，然后加快，在结束前变慢
- ease-in 动画以低速开始
- ease-out 动画以低速结束
- ease-in-out 动画以低速开始、低速结束
- cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值
- steps 两个参数，第一个是一个大于0的整数，他是将两个关键帧之间的间隔动画等分成指定数目的小间隔动画【如设置为5，则0-25%之间变化五次】；第二个参数来决定显示效果
- steps-start 实际为steps的第二个参数，step-start在变化过程中都是以下一帧的显示效果来填充间隔动画
- steps-end 实际为steps的第二个参数，step-end在变化过程中都是以上一帧的显示效果来填充间隔动画
animation-iteration-count 动画运动的次数
- infinite 无限次
- n 次数
animation-delay 动画的延迟
animation-direction 动画每次运动的方向
- normal 【默认值】动画按正常播放。
- reverse 动画反向播放
- alternate 动画在奇数次正向播放，在偶数次反向播放。
- alternate-reverse 动画在偶数次正向播放，在奇数次反向播放。
- initial 保持元素最初的属性
- inherit 从父元素继承该属性
animation-fill-mode设置动画的状态
- none: 不改变默认行为
- forwards: 当动画结束，停留在最后一帧
- backwards: 在动画中有延迟的时候，设置backwards，会迅速的跑到第一桢开始执行动画
- both: 当设置的有延迟的时候，动画迅速以第一桢开始，当动画结束的时候，停留在最后一帧
animation 【复合属性】
- 第一个值：动画的名字
- 第二个值：动画执行的时间
- 第三个值：动画运动的曲线
- 第四个值：动画延迟的时间
- 第五个值：动画运动的次数
- 第六个值：动画运动方向
```
    
    animation:run 1s linear 1s infinite alternate ;
复制代码
```
例子

    <style>
        body{
            background-color: black;
        }
        .outer{
            width: 300px;
            height: 285px;
            /* border: 1px solid red; */
            position: absolute;
            left: 50%;
            top: 50%;
            /* margin-top: -142px; */
            /* margin-left: -150px; */
            /* 写在这里会被后面的动画覆盖，直接写到后面的动画里，或者直接使用margin */
            transform: translate(-50%,-50%);

        }
        .outer img{
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
        }
        .outer img:nth-child(1){
            animation: love 1s infinite linear;
        }
        .outer img:nth-child(2){
            animation: love 1s infinite 0.25s linear;
        }
        .outer img:nth-child(3){
            animation: love 1s infinite 0.5s linear;
        }
        .outer img:nth-child(4){
            animation: love 1s infinite 0.75s linear;
        }
        @keyframes love{
            0%{
                opacity: 0;
                transform: scale(0);
            }
            25%{
                opacity: 0.5;
                transform: scale(1);
            }
            50%{
                opacity: 1;
                transform: scale(2);
            }
            75%{
                opacity: 0.5;
                transform: scale(3);
            }
            100%{
                opacity: 0;
                transform: scale(4);
            }
        }
    </style>
    <body>
        <div class="outer">
            <img src="图片路径" alt="">
            <img src="图片路径" alt="">
            <img src="图片路径" alt="">
            <img src="图片路径" alt="">
        </div>
    </body>
复制代码

Css3新增的样式

boder-radius 边框弧度

大于等于宽度一半就是圆，宽高一致

    <style>
        .outer{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            -webkit-border-radius:50%;
            -webkit-transform: translate(-50%,-50%);
        }
    </style>
    <body>
        <div class="outer"></div>
    </body>
复制代码

box-shadow阴影

第一个值水平偏移量
第二个值垂直偏移量
第三个值模糊程度
第四个值阴影大小
第五个值阴影颜色
第六个值 inset 内阴影【不写默认外阴影 outset 】

            div{
                box-shadow:10px 10px 10px 10px yellow inset;
            }
复制代码

可以用来做容器的边框，不占位置；【border是占据实际位置的】

            div{
                width:100px;
                height:100px;
                background-color:yellow;
                /* 没有偏移 模糊程度为0 剩余的值按需调整 */
                /* 使用阴影来制作边框线不占位置 */
                box-shadow:0 0 0 10px green;
            }
复制代码

多圈边框，不占位置；【border是占据实际位置的】

            div{
                width:100px;
                height:100px;
                background-color:yellow;
                /* 没有偏移 模糊程度为0 剩余的值按需调整 */
                /* 使用阴影来制作边框线不占位置 */
                box-shadow:0 0 0 10px green
                            0 0 0 30px red
                            0 0 0 60px blue
                            0 0 0 90px orange
                            0 0 0 120px black;
            }
复制代码

box-sizing盒模型转换

渐变

线性渐变 (Linear Gradients)- 向下/向上/向左/向右/对角方向
- 可加多种颜色,最少两种
- 方向默认从上往下，可以修改,写起点或方向或角度就是起始位置；若组合方向，那就是起点和终点
- 也可以写角度，则按照角度渐变
- 颜色的占比也可以用百分数控制

            div{
                height:5000px;
                background:-webkit-linear-gradient(left top,lightcoral 20%,lightseagreen 80%,lightsalmon 20%);
                }
复制代码

径向渐变 (Radial Gradients)- 由它们的中心定义
- 可加多种颜色,最少两种
- 可以设置渐变中心、形状、大小
```
    div {
        background-image: radial-gradient(center,circle,red, yellow, green);
        }
复制代码
```

媒体查询【多用于移动端适配】

@media 针对不同媒体类型可以定制不同的样式规则。
在不同的条件下设定不同的样式
语法
- @media 设备 and 条件 and... 条件可加多个

    <style>
        .box{
            width:200px;
            height:200px;
            background:black;
        }
        /* 当视口宽度小于等于我们设定的最大宽度时 */
        @media screen and (max-width:768px){
            .box{
                width:100px;
                height:100px;
                background:yellow;
            }
        }
        /* 当视口宽度大于等于我们设定的最小宽度时 */
        /* @media screen and (min-width:991px){
            .box{
                width:100px;
                height:100px;
                background:red;
            }
        } */
        /* 当视口宽度【大于等于我们设定的最小宽度】且【小于等于我们设定的最大宽度】时 */
        /* @media screen and (min-width:768px) and (max-width:992px){
            .box{
                width:100px;
                height:100px;
                background:red;
            }
        } */
    </style>
    <div class="box">
    </div>
复制代码

兼容处理【为了使样式兼容不同浏览器】

若要使样式兼容不同的浏览器，可以给样式加上特定的前缀。
-webkit- 谷歌【移动端】
-moz- 火狐【不常用】
-ms- ie
-o- 欧朋【不常用】

文章版权归作者所有，未经允许请勿转载。

THE END

前端

Google Search Appliance跨站脚本攻击漏洞

Drummon Miles A1Stats目录遍历漏洞

悠悠图v1.83 聚合图片搜索工具

10张脑图带你快速入门Vue3 | 附高清原图

IP.Gallery HTML注入漏洞

Aspirin_v1.7.6 扁平化可爱图标包

CSS3新增动画、过渡效果及样式、移动端适配

CSS3新增动画、过渡效果

transform变形

translate 沿着两个方向位移

translateX 单独沿着x轴位移

transLateY 单独沿着y轴位移

scale变形

scale沿着两个方向缩放

scaleX将宽度缩放

scaleY将高度缩放

rotate绕轴旋转

rotateX绕x轴旋转

rotateY绕y轴旋转

rotateZ绕Z轴旋转

skew倾斜

skewX延x轴倾斜

skewY延y轴倾斜

skew延两个方向倾斜

transform-origin改变作用点（默认在中心）

第一个值代表水平方向（left center right）

第二个值代表垂直方向（top center bottom）

perspective景深

transition过渡动画

transition-property 动画的属性

transition-duration 动画执行的时间

transition-timing-function 动画运动的曲线

transition-delay 延迟的时间

【复合属性】 transition 过渡

第一个值 动画的属性

第一个值 动画执行的时间

第一个值 动画运动的曲线

第一个值 延迟的时间

animation过渡动画【能精细控制每帧，流程】

@keyframes关键帧

用法

重复定义

同一关键帧中的相同属性被重复定义

animation-name 动画的名字

animation-duration 动画执行的时间

animation-timing-function 动画运动的曲线

animation-iteration-count 动画运动的次数

animation-delay 动画的延迟

animation-direction 动画每次运动的方向

animation-fill-mode设置动画的状态

animation 【复合属性】

第一个值：动画的名字

第二个值：动画执行的时间

第三个值：动画运动的曲线

第四个值：动画延迟的时间

第五个值：动画运动的次数

第六个值：动画运动方向

例子

Css3新增的样式

boder-radius 边框弧度

box-shadow阴影

可以用来做容器的边框，不占位置；【border是占据实际位置的】

多圈边框，不占位置；【border是占据实际位置的】

box-sizing盒模型转换

渐变

线性渐变 (Linear Gradients)- 向下/向上/向左/向右/对角方向

径向渐变 (Radial Gradients)- 由它们的中心定义

媒体查询【多用于移动端适配】

语法

兼容处理【为了使样式兼容不同浏览器】

`translate` 沿着两个方向位移

`translateX` 单独沿着x轴位移

`transLateY` 单独沿着y轴位移

第一个值动画的属性

第一个值动画执行的时间

第一个值动画运动的曲线

第一个值延迟的时间

`@keyframes`关键帧

`animation-name` 动画的名字

`animation-duration` 动画执行的时间

`animation-timing-function` 动画运动的曲线

`animation-iteration-count` 动画运动的次数

`animation-delay` 动画的延迟

`animation-direction` 动画每次运动的方向

`animation-fill-mode`设置动画的状态

`animation` 【复合属性】

线性渐变 `(Linear Gradients)- 向下/向上/向左/向右/对角方向`

径向渐变 `(Radial Gradients)- 由它们的中心定义`