CSS3入门之2D、3D、过度、动画

2D 3D 过度 动画

  • 2D效果 主要是平面的一些常规操作 transform属性
  1. 移动 transform: translate(20px,30px); 水平移动 和 垂直移动 水平沿X轴方向进行 垂直沿Y轴方向进行
    属性值可以为负值 水平方向负值往左移动 垂直方向负值往上移动
  2. 缩放 transform: scale(2, 4); 同样也是水平 和 垂直方向 的放大缩小
  3. 旋转 transform: rotate(90deg); 默认以中心坐标旋转 坐标点也可以指定 指定坐标点的属性 transform-origin: 50px 100px; 或者是方位值 可以是具体的像素值
  4. 倾斜 transform: skew(20deg, 30deg); 同样也是水平 和 垂直方向
  • 3D 主要是有立体感 实现一些炫酷的效果
  1. 旋转 transform: rotateX(50deg); transform: rotateY(50deg);等
  • 过度 从一种样式逐渐改变到另一种效果 需要满足两个条件
    1、添加到CSS属性上 transition: width 2s, height 2s, transform 2s; 作用于宽度、高度、2D效果上等
    2、设置效果时长
  • 动画 ->变形 过度 动画 通过animation属性实现 需要满足两个条件
    1、动画名称
    2、动画时长
    格式:
    标签 {
    /* 使用动画 anim 时长 3秒 */
    animation: anim 3s;
    }
    @keyframes anim{
    属性:值;
    }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .box1 {
            width: 100px;
            height: 60px;
            background-color: red;
            /* 移动 transform */
            /* 沿X轴移动 往右移动20像素 */
            /*transform: translateX(20px);*/
            /* 沿X轴移动往左移动50像素 */
            /*transform: translateX(-50px);*/
            /* 沿Y轴移动 往下移动50像素 */
            /*transform: translateY(50px);*/
            /* 沿Y轴移动 往上移动50像素 */
            /*transform: translateY(-50px);*/
            /* 沿X轴移动 往右移动20像素 沿Y轴移动 往下移动30像素 */
            /*transform: translate(20px,30px);*/

        }

        .box1 {
            /* 旋转 */
            /*margin-left: 50px;
            margin-top: 50px;*/
            /* 顺时针旋转90度 */
            /*transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            -o-transform: rotate(90deg);*/
            /* 3D旋转 */
            /*transform: rotateX(50deg);
            -webkit-transform: rotateX(50deg);*/
            /*transform: rotateY(50deg);
            -webkit-transform: rotateY(50deg);*/
        }

        .box1 {
            /* 缩放 */
            /* 放大原来的倍数 不能是具体的像素值 */
            /*transform: scale(2, 4);*//*水平放大2倍 垂直方向放大4倍*/
            /* X轴放大2倍 */
            /*transform: scaleX(2);*/
            /* Y轴放大2倍 */
            /*transform: scaleY(2);
            -webkit-transform: scaleY(2);*/
        }

        .box1 {
            /* 倾斜 */
            /*transform: skew(20deg, 30deg);*//* X轴倾斜20度 Y轴倾斜30度 */
            /* X轴倾斜20度 Y轴保持不变 */
            /*transform: skewX(20deg);*/
            /* Y轴倾斜20度 X轴保持不变 */
            /*transform: skewY(20deg);*/
            /* 矩阵 */
            /*transform: matrix(1,0,0,1,30,30);*/
            /* 基于坐标点 进行旋转 其它属性都可以配合使用 */
            /*-webkit-transform-origin: 50px 100px;*/ /* 原点变化为 50 100坐标点 */
            /*transform: rotate(30deg);*/
        }

        .box1 {
            /* 过度 从一种样式逐渐改变到另一种效果 满足条件*/
            /* 1. 添加到CSS属性上 */
            /* 2. 效果时长 */
            /* 鼠标悬浮上宽高从100px到300px 过度时间2秒 旋转也是*/
            transition: width 2s, height 2s, transform 2s;
        }

        .box1:hover {
            width: 300px;
            height: 300px;
            transform: rotate(50deg);
            -webkit-transform: rotate(50deg);
        }

        .box2 {
            /* 动画 满足条件 */
            /* 1. 动画名称 */
            /* 2. 动画时长 */
            width: 100px;
            height: 100px;
            background-color: blue;
            position: relative;
            animation: anim 3s;
            -webkit-animation: anim 5s;
        }
        @keyframes anim{
            /*from {
                background-color: #333;
            }
            to {
                background-color: yellow;
            }*/
            0% {
                background-color: #333;
                top: 0px;
                left: 0px;
            }
            25% {
                background-color: #666;
                top: 0px;
                left: 100px;
            }
            50% {
                background-color: #999;
                top: 100px;
                left: 100px;
            }
            75% {
                background-color: #0f0;
                top: 100px;
                left: 0px;
            }
            100% {
                background-color: #00f;
                top: 00px;
                left: 0px;
            }
        }

        @-webkit-keyframes anim{
            /*from {
                background-color: #333;
            }
            to {
                background-color: yellow;
            }*/
            0% {
                background-color: #333;
                top: 0px;
                left: 0px;
            }
            25% {
                background-color: #666;
                top: 0px;
                left: 100px;
            }
            50% {
                background-color: #999;
                top: 100px;
                left: 100px;
            }
            75% {
                background-color: #0f0;
                top: 100px;
                left: 0px;
            }
            100% {
                background-color: #00f;
                top: 00px;
                left: 0px;
            }
        }
        /*.box2:hover {
            animation: anim 3s;
            -webkit-animation: anim 5s;
        }*/

    </style>
</head>
<body>

    <!-- 移动 旋转 缩放 倾斜 -->

    <div class="box1">盒子</div>

    <div class="box2">盒子</div>

</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容