vue版，类似于翻比分牌效果。

浅浅的花香味﹌ 2023-06-24 04:57 12阅读 0赞

![在这里插入图片描述][2019122018171752.jpg]  
![在这里插入图片描述][2019122018172411.jpg]

<template>
        <div :class="'bodyStyle '+(isPlay?'play':'')">
            <div class="container">
                <ul class="flip secondPlay" v-for="p in [0,1,2,3,4,5]" :key="p">
                    <li :class="(activeNum[p]===0?'':'before')">
                        
                        
                        <a href="#">
                            <div class="up">
                                <div class="shadow"></div>
                                <div class="inn">0</div>
                            </div>
                            <div class="down">
                                <div class="shadow"></div>
                                <div class="inn">0</div>
                            </div>
                        </a>
    
                    </li>
                    <li :class="(activeNum[p]!==0?'active':'')">
                        <a href="#">
                            <div class="up">
                                <div class="shadow"></div>
                                <div class="inn">{ { activeNum[p]}}</div>
                            </div>
                            <div class="down">
                                <div class="shadow"></div>
                                <div class="inn">{ { activeNum[p]}}</div>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </template>
    
    <script>
    	export default { 
    		name: "clock",
    		data() { 
    			return { 
    				activeNum: [0, 0, 0, 0, 0, 0],
    				isPlay: false
    			}
    		},
    		methods: { },
    		created() { 
    			let id = window.$mine.id;
    			let aa = id*3+130000;
    			setTimeout(() => { 
    				this.activeNum = [parseInt(aa%1000000/100000), parseInt(aa%100000/10000), parseInt(aa%10000/1000), parseInt(aa%1000/100), parseInt(aa%100/10), aa%10];
    				this.isPlay = false;
    				this.isPlay = true;
    			}, 500);
    		}
    
    	}
    </script>
    
    <style scoped>
        /* Reset */
        * { 
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
    
        a { 
            cursor: pointer;
            text-decoration: none;
            color: #ccc;
        }
    
        a:hover { 
            color: #fff;
        }
    
        ul { 
            list-style: none
        }
    
        .clearfix:before,
        .clearfix:after { 
            content: " ";
            display: table;
        }
    
        .clearfix:after { 
            clear: both;
        }
    
        .clearfix { 
            *zoom: 1;
        }
    
        /* Main */
    
        html, body { 
            min-height: 100%;
        }
    
        .bodyStyle { 
            font: normal 11px "Helvetica Neue", Helvetica, sans-serif;
            user-select: none;
            color: #959595;
            text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
            background: rgb(204, 204, 204);
            background: -moz-radial-gradient(center, ellipse cover, rgb(204, 204, 204) 0%, rgb(164, 164, 164) 100%);
            background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(204, 204, 204, 1)), color-stop(100%, rgba(164, 164, 164, 1)));
            background: -webkit-radial-gradient(center, ellipse cover, rgba(204, 204, 204, 1) 0%, rgba(164, 164, 164, 1) 100%);
            background: -o-radial-gradient(center, ellipse cover, rgba(204, 204, 204, 1) 0%, rgba(164, 164, 164, 1) 100%);
            background: -ms-radial-gradient(center, ellipse cover, rgba(204, 204, 204, 1) 0%, rgba(164, 164, 164, 1) 100%);
            background: radial-gradient(ellipse at center, rgba(204, 204, 204, 1) 0%, rgba(164, 164, 164, 1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#969696', endColorstr='#595959', GradientType=1);
    
        }
    
        .container { 
    
        }
    
        #social { 
            text-align: center;
            position: absolute;
            bottom: 14%;
            width: 100%;
        }
    
        #social p { 
            margin-bottom: 10px;
        }
    
        #social ul,
        #social li { 
            display: inline-block;
        }
    
        /* Skeleton */
    
        ul.flip { 
            position: relative;
            float: left;
            margin: 5px;
            width: 45px;
            height: 60px;
            font-size: 50px;
            font-weight: bold;
            line-height: 60px;
            border-radius: 6px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, .7);
        }
    
        ul.flip li { 
            z-index: 1;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
    
        }
    
        ul.flip li:first-child { 
            z-index: 2;
        }
    
        ul.flip li a { 
            display: block;
            height: 100%;
            perspective: 200px;
        }
    
        ul.flip li a div { 
            z-index: 1;
            position: absolute;
            left: 0;
            width: 100%;
            height: 50%;
            overflow: hidden;
        }
    
        ul.flip li a div .shadow { 
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 2;
        }
    
        ul.flip li a div.up { 
            transform-origin: 50% 100%;
            top: 0;
        }
    
        ul.flip li a div.up:after { 
            content: "";
            position: absolute;
            top: 29px;
            left: 0;
            z-index: 5;
            width: 100%;
            height: 1px;
            background-color: rgba(22, 51, 46, 0.3);
        }
    
        ul.flip li a div.down { 
            transform-origin: 50% 0%;
            bottom: 0;
        }
    
        ul.flip li a div div.inn { 
            position: absolute;
            left: 0;
            z-index: 1;
            width: 100%;
            height: 200%;
            color: #636363;
            text-shadow: 0 1px 2px #000;
            text-align: center;
            background-color: #ffffff;
            border-radius: 6px;
        }
    
        ul.flip li a div.up div.inn { 
            top: 0;
    
        }
    
        ul.flip li a div.down div.inn { 
            bottom: 0;
        }
    
        /* PLAY */
    
        div.play ul li.before { 
            z-index: 3;
        }
    
        div.play ul li.active { 
            animation: asd .3s .3s linear both;
            z-index: 2;
        }
    
        @keyframes asd { 
            0% { 
                z-index: 2;
            }
            5% { 
                z-index: 4;
            }
            100% { 
                z-index: 4;
            }
        }
    
        div.play ul li.active .down { 
            z-index: 2;
            animation: turn .3s .3s linear both;
        }
    
        @keyframes turn { 
            0% { 
                transform: rotateX(90deg);
            }
            100% { 
                transform: rotateX(0deg);
            }
        }
    
        div.play ul li.before .up { 
            z-index: 2;
            animation: turn2 .3s linear both;
        }
    
        @keyframes turn2 { 
            0% { 
                transform: rotateX(0deg);
            }
            100% { 
                transform: rotateX(-90deg);
            }
        }
    
        /* SHADOW */
    
        /*div.play ul li.before .up .shadow {*/
        /* background: -moz-linear-gradient(top, rgba(245, 245, 245, 0.1) 0%, rgba(66, 66, 66, 1) 100%);*/
        /* background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(245, 245, 245, 0.1)), color-stop(100%, rgba(66, 66, 66, 1)));*/
        /* background: linear-gradient(top, rgba(245, 245, 245, 0.1) 0%, rgba(66, 66, 66, 1) 100%);*/
        /* background: -o-linear-gradient(top, rgba(245, 245, 245, 0.1) 0%, rgba(66, 66, 66, 1) 100%);*/
        /* background: -ms-linear-gradient(top, rgba(245, 245, 245, 0.1) 0%, rgba(66, 66, 66, 1) 100%);*/
        /* background: linear-gradient(to bottom, rgba(245, 245, 245, 0.1) 0%, rgba(66, 66, 66, 1) 100%);*/
        /* animation: show .5s linear both;*/
        /*}*/
    
        /*div.play ul li.active .up .shadow {*/
        /* background: -moz-linear-gradient(top, rgba(245, 245, 245, 0.1) 0%, rgba(66, 66, 66, 1) 100%);*/
        /* background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(245, 245, 245, 0.1)), color-stop(100%, rgba(66, 66, 66, 1)));*/
        /* background: linear-gradient(top, rgba(245, 245, 245, 0.1) 0%, rgba(66, 66, 66, 1) 100%);*/
        /* background: -o-linear-gradient(top, rgba(245, 245, 245, 0.1) 0%, rgba(66, 66, 66, 1) 100%);*/
        /* background: -ms-linear-gradient(top, rgba(245, 245, 245, 0.1) 0%, rgba(66, 66, 66, 1) 100%);*/
        /* background: linear-gradient(to bottom, rgba(245, 245, 245, 0.1) 0%, rgba(66, 66, 66, 1) 100%);*/
        /* animation: hide .5s .3s linear both;*/
        /*}*/
    
        /*!*DOWN*!*/
    
        /*div.play ul li.before .down .shadow {*/
        /* background: -moz-linear-gradient(top, rgba(66, 66, 66, 1) 0%, rgba(245, 245, 245, .1) 100%);*/
        /* background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(66, 66, 66, 1)), color-stop(100%, rgba(245, 245, 245, .1)));*/
        /* background: linear-gradient(top, rgba(66, 66, 66, 1) 0%, rgba(245, 245, 245, .1) 100%);*/
        /* background: -o-linear-gradient(top, rgba(66, 66, 66, 1) 0%, rgba(245, 245, 245, .1) 100%);*/
        /* background: -ms-linear-gradient(top, rgba(66, 66, 66, 1) 0%, rgba(245, 245, 245, .1) 100%);*/
        /* background: linear-gradient(to bottom, rgba(66, 66, 66, 1) 0%, rgba(245, 245, 245, .1) 100%);*/
        /* animation: show .5s linear both;*/
        /*}*/
    
        /*div.play ul li.active .down .shadow {*/
        /* background: -moz-linear-gradient(top, rgba(66, 66, 66, 1) 0%, rgba(245, 245, 245, .1) 100%);*/
        /* background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(66, 66, 66, 1)), color-stop(100%, rgba(245, 245, 245, .1)));*/
        /* background: linear-gradient(top, rgba(66, 66, 66, 1) 0%, rgba(245, 245, 245, .1) 100%);*/
        /* background: -o-linear-gradient(top, rgba(66, 66, 66, 1) 0%, rgba(245, 245, 245, .1) 100%);*/
        /* background: -ms-linear-gradient(top, rgba(66, 66, 66, 1) 0%, rgba(245, 245, 245, .1) 100%);*/
        /* background: linear-gradient(to bottom, rgba(66, 66, 66, 1) 0%, rgba(245, 245, 245, .1) 100%);*/
        /* animation: hide .5s .3s linear both;*/
        /*}*/
    
        @keyframes show { 
            0% { 
                opacity: 0;
            }
            100% { 
                opacity: 1;
            }
        }
    
        @keyframes hide { 
            0% { 
                opacity: 1;
            }
            100% { 
                opacity: 0;
            }
        }
    </style>

[2019122018171752.jpg]: https://img-blog.csdnimg.cn/2019122018171752.jpg
[2019122018172411.jpg]: https://img-blog.csdnimg.cn/2019122018172411.jpg