美文网首页
前端-第九天-学习

前端-第九天-学习

作者: 看三小 | 来源:发表于2018-10-25 18:57 被阅读2次

    CSS过度动画

    .box{
    width: 100px;
    height: 100px;
    background-color: gold;
    transition: width 500ms ease, height 500ms ease 500ms, background-color 500ms ease 1s, border-radius 500ms ease 1.5s;
    }
    .box:hover{
    width: 500px;
    height: 300px;
    background-color: red;
    border-radius: 50px;
    }
    </style>
    </head>
    <body>
    <div class="box"></div>
    </body>

    变形

    .box{
    width: 200px;
    height: 200px;
    background-color: gold;
    margin: 50px auto 0;
    transform: rotate(30deg);
    }
    .box1{
    width: 200px;
    height: 200px;
    background-color: gold;
    margin: 50px auto 0;
    transform: scale(0.5,0.5);
    }
    </style>
    </head>
    <body>
    <div class="box"></div>
    <div class="box1"></div>
    </body>
    CSS过渡动画:
    transition:width 3s ease,height 3s ease 1s,background-color 3s ease 2s; 宽先变,用时3s,高1s后变,颜色2s后变
    圆角:
    border-radius:1s ease 3s;
    transition:all 3s ease;一起变
    运动曲线:
    div:nth-child(1) 第一个div
    box-shadow:左右,垂直,阴影清楚与否,阴影大小
    insert 内阴影
    transition:all 1s linear:匀速
    transition:all ls ease; 中间快
    transition:all 1s ease-in;越来快,突然停
    transition:all 1s ease-out;越来慢,慢慢停
    transition:all 1s ease-in-out;同ease
    贝塞尔曲线:回弹
    display:none;默认隐藏
    display:block;出现
    变形:
    transform:translate(30px,20px); 水平,垂直位移 不影响别的
    旋转:
    transform:rotate(30deg) 转30度
    transform:scale(0.5,3) 缩放
    transform:skew(30deg,0) 水平斜切45度,垂直不变

    transform-style:preserve-3d;
    默认Z轴旋转
    transform:perspective(800px) rotateX(45deg) X轴旋转

    变形中心点:
    transition-origin:left center; 沿着左边中心点转
    transition-origin:left top; 左上角
    transition-origin:50px 50px;
    transition:all 1s ease;
    transform:rotate(90deg);

    背面可见:(默认)
    transition:all 1s ease;
    transform-style:preserve-3d;
    transform:perspective(800px) rotateY(0deg);
    transform-visibility:hidden; 背面不可见
    transition:rotateY(180deg); 翻转

    position:relative; 相对定位 父类定义,相对body
    position:absolute; 绝对定位 相对父类
    text-align:center; 文字居中

    animation动画:
    animation:moving 1s ease 1s 5(infinite) alternate forwards; 一次1s,5次(不限次),原路返回 ,停后不跳回
    animation-play-state:paused; 鼠标移入暂停
    running; 移入开动
    @keyframes moving{
    from{
    width:100px;
    }
    to{
    width:50px;
    }
    }
    border-radius:50px; 圆

    相关文章

      网友评论

          本文标题:前端-第九天-学习

          本文链接:https://www.haomeiwen.com/subject/uuictqtx.html