HTML5 動畫用 animation transform transition 作的兩個例子

時間 2019-12-08

標籤 html5 html 動畫 animation transform transition 兩個例子欄目 HTML5 简体版

原文原文鏈接

1，左右移動，自我翻轉的圓javascript

<!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>

效果以下css

2，洗牌html

<!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>