HTML5 动画 animation transform transition

1，左右移动，自我翻转的圆

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>移动的圆</title>
    <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
            background: #ffffff;
            outline: none;
            letter-spacing: 0
        }
        .box {
            margin: 120px auto 0 auto;
            padding: 100px 0 0 0;
            width: 680px;
            height: 400px;
            background: #000000;
        }
        /* 指定偏移过程中的 */
        @keyframes myAnimation {
            0%     { transform: rotate3d(0, 1, 0,   0deg); margin-left: 0 }
            16.67% { transform: rotate3d(0, 1, 0,  60deg); margin-left: 200px }
            33.34% { transform: rotate3d(0, 1, 0, 120deg); margin-left: 400px }
            50.01% { transform: rotate3d(0, 1, 0, 180deg); margin-left: 600px }
            66.68% { transform: rotate3d(0, 1, 0, 240deg); margin-left: 400px }
            83.35% { transform: rotate3d(0, 1, 0, 300deg); margin-left: 200px }
            100%   { transform: rotate3d(0, 1, 0, 360deg); margin-left: 0 }
        }
        .test {
            width: 80px;
            height: 80px;
            font-size: 16px;
            font-weight: bold;
            line-height: 80px;
            text-align: center;
            background: red;
            border-radius: 50%;
            color: #ffffff;
            animation-name: myAnimation;         /* 使用的动画名称 */
            animation-duration: 2s;              /* 一次动画持续时间 */
            animation-timing-function: linear;   /* 动画变化快慢方式 */
            animation-iteration-count: infinite; /* 动画循环的次数，infinite 无限循环 */
        }
    </style>
</head>
<body>
<div class="box">
    <div class="test">文字</div>
</div>
</body>
</html>

效果如下

2，洗牌

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>洗牌</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.6.8/vue.min.js"></script>
</head>
<style type="text/css">
    #box {
        position: relative;
        width: 360px;
        background: #CCCCCC;
        margin: 200px auto 0 auto;
    }
    .content {
        position: absolute;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 16px;
        border: 2px solid white;
        box-sizing: border-box;
        background: #CCCCCC;

        transition-property: top, left;  /* 这里指动画会接管 top 和 left 属性，一般需要能计量的属性 */
        transition-duration: 2s, 2s;     /* 这里指当被接管的属性发生变化时，动画过度的完成时间 */
    }
    .button {
        width: 360px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 19px;
        color: white;
        background: black;
        margin: 400px 0 0 0;
    }
</style>
<body>
    <div id="box">
        <div v-for="(num, index) in numArr"
             class="content"
             :style="{'top': num.top, 'left': num.left}"
        >
            {{num.content}}
        </div>
        <input type="button" value="点击" class="button" @click="shuffle()" />
    </div>
</body>
<script type="text/javascript">

    // 组装初始化数组
    var numArr = [];
    for (var i = 0; i < 9; i++) {
        for(var j = 0; j < 9; j++){
            var num = {};
            num.top = i * 40 + 'px';
            num.left = j * 40 + 'px';
            num.content = (numArr.length + 1) % 9;
            numArr.push(num);
        }
    }

    // 数组验重
    function havaObjArr(obj, arr){
        for(var i = 0; i < arr.length; i++){
            if(obj.left == arr[i].left && obj.top == arr[i].top){
                return true;
            }
        }
        return false;
    }

    // 用 VUE 绑定数据
    var vm = new Vue({
        data: {
            numArr: numArr
        },
        methods: {
            // 重组数组
            shuffle() {
                var numArr = [];
                while (numArr.length < 81) {
                    var num = {};
                    num.left = parseInt(Math.random() * 9) * 40 + 'px';
                    num.top = parseInt(Math.random() * 9) * 40 + 'px';
                    if (!havaObjArr(num, numArr)) {
                        num.content = (numArr.length + 1) % 9;
                        numArr.push(num);
                    }
                }
                this.numArr = numArr;
            }
        }
    }).$mount('#box');
</script>
</html>

效果如下

HTML5 动画 animation transform transition

猜你喜欢