前端（动画）

作者: 埃菲尔上的铁塔梦i | 来源:发表于2018-08-19 18:30 被阅读0次

2020-04-11
前端(动画)
前端（动画）
前端（动画）
前端动画
前端—动画
前端——动画
前端动画
前端资源推荐-第0天
前端动效讲解与实战

变形中心点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变形中心点</title>
    <style type="text/css">
        div{
            width: 200px;
            height: 200px;
            background-color: gold;
            float: left;
            margin: 30px;
            transition: all 500ms ease;
        }
        div:hover{
            transform: rotate(-90deg);
        }
        div:nth-child(1){
            /*设置变形的中心点*/
            transform-origin: left center;
        }
        div:nth-child(2){
            transform-origin: left top;
        }
        div:nth-child(3){
            transform-origin: 50px 50px;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

背面可见

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背面可见</title>
    <style type="text/css">
        .con{
            width: 300px;
            height: 300px;
            margin: 50px auto 0;
            border: 1px solid #000;
        }
        .box{
            width: 300px;
            height: 300px;
            background-color: gold;
            text-align: center;
            line-height: 300px;
            font-size: 50px;
            transition: all 500ms ease;
            /*设置盒子按3d空间显示*/
            transform-style: preserve-3d;
            /*设置透视距离、三维旋转的初始角度*/
            transform: perspective(800px) rotateY(0deg);
            /*设置盒子背面是否可见*/
            backface-visibility: hidden;
        }
        .con:hover .box{
            transform: rotateY(180deg);
        }
    </style>
</head>
<body>
    <div class="con">
        <div class="box">div元素</div>
    </div>
</body>
</html>

图片翻面

这两句是为了演示图片和文字层重叠的效果：
            transform-style: preserve-3d;
            transform: perspective(800px) rotateY(45deg);初始旋转45度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片翻面</title>
    <style type="text/css">
        .con{
            width: 300px;
            height: 272px;
            margin: 100px auto 0;
            position: relative;
            
        }
        .pic, .info{
            width: 300px;
            height: 272px;
            position: absolute;
            left: 0;
            top: 0;
            /*图片和文字背面不可见，文字初始已翻转，所以隐藏露出底层图片*/
            backface-visibility: hidden;
            transform-style: preserve-3d;
            transform: perspective(800px) rotateY(0deg);
            transition: all 500ms ease;
        }
        .info{
            background-color: gold;
            text-align: center;
            line-height: 272px;
            /*transform: translateZ(10px);初始文字浮起10像素方便查看图片与文字分层的效果*/

            /*初始文字翻转，鼠标移入时才翻正显示*/
            transform: translateZ(2px) rotateY(180deg);
        }
        /*鼠标移入时图片翻为背面隐藏*/
        .con:hover .pic{
            transform: perspective(800px) rotateY(180deg);
        }
        /*鼠标移入时文字翻为正面显示*/
        .con:hover .info{
            transform: perspective(800px) rotateY(0deg);
        }
    </style>
</head>
<body>
    <div class="con">
        <div class="pic">
            <img src="img/location_bg.jpg" alt="玫瑰花">
        </div>
        <div class="info">玫瑰花的文字说明</div>
    </div>
</body>
</html>

animation动画

动画名称、时间、曲线、延迟、播放次数、结束后是否返回、动画前后的状态
           infinite不限制次数
           alternate动画结束后返回，返回也算次数
           animation-fill-mode 动画前后的状态
               forwards动画完成保持在最后一帧
               backwards在延迟时间内，在动画显示之前，应用from开始属性值（例如box宽100，from宽200，在延迟1s内显示200）
               both向前和向后填充模式都被应用（例如起始按200，结束停在最后一帧）

<meta charset="UTF-8">
    <title>animation动画</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-color: gold;
            
            animation: moving 1s ease 1s 5 alternate both;
            /*动画暂停*/
            /*animation-play-state: paused;*/
        }
        .box:hover{
            /*动画运行*/
            /*animation-play-state: running;*/
        }
        /*定义一个动画，名称为moving*/
        @keyframes moving{
            /*初始状态*/
            from{
                width: 200px;
            }
            /*结束状态*/
            to{
                width: 500px;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

多帧动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多帧动画</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-color: gold;
            margin: 50px auto 0;
            animation: moving 1s ease 1s both;
        }
        @keyframes moving{
            0%{
                /*位移动画*/
                transform: translateY(0px);
                background-color: cyan;
            }
            50%{
                transform: translateY(400px);
                background-color: gold;
                border-radius: 0px;
            }
            100%{
                transform: translateY(0px);
                background-color: red;
                border-radius: 50px;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

今天小练习 loading动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>loading动画</title>
    <style type="text/css">
        .box{
            width: 300px;
            height: 125px;
            border: 1px solid #000;
            margin: 200px auto 0;
        }
        .box p{
            text-align: center;
            width: 100%;

        }
        .box div{
            width: 30px;
            height: 70px;
            float: left;
            background-color: gold;
            margin: 15px;
            border-radius: 10px;
        }
        .box div:nth-child(1){
            background-color: red;
            animation: loading 500ms ease 0s infinite alternate;
        }
        .box div:nth-child(2){
            background-color: green;
            animation: loading 500ms ease 100ms infinite alternate;
        }
        .box div:nth-child(3){
            background-color: pink;
            animation: loading 500ms ease 200ms infinite alternate;
        }
        .box div:nth-child(4){
            background-color: greenyellow;
            animation: loading 500ms ease 300ms infinite alternate;
        }
        .box div:nth-child(5){
            background-color: cyan;
            animation: loading 500ms ease 400ms infinite alternate;
        }
        @keyframes loading{
            from{
                transform: scaleY(1);
            }
            to{
                transform: scaleY(0.5);
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <p>loading...</p>
    </div>
</body>
</html>