PK creative Spring Festival, I am participating in the “Spring Festival creative submission contest”, please see: Spring Festival creative submission Contest

Of course, red envelopes are indispensable to welcome the New Year. The red envelopes here are not necessarily money, but can also be small gifts. Change the contents of the contentList. The reset method scrambles the contentList once, so that the output is random

        var contentList = [{
                    content: "Congratulations on getting 66.66"}, {content: "Congratulations on getting 88.88 red envelopes."}, {content: "Congratulations on getting a red envelope 168.88."}, {content: "Congratulations on getting a carton of milk."}, {content: "Congratulations on getting a 30-second snack shop.",}]function reset(){
            contentList.sort(function() {
                return (0.5-Math.random());
            });
            alert("Scrambled")
        }
        reset()
        let vm = new Vue({
            el: "#app".data: {
                contentList
            }
        })
Copy the code

Don’t forget to reference vue js files

<script src=". / static/vue - 2.4.0. Js. ""></script>
Copy the code

/static/img/huhu.jpg /static/img/huhu.jpg /static/img/huhu.jpg

    <div class="reset" onclick="reset()"</div><div id="app">
        <ul v-for="(item,index) in contentList">
            <li>
                <div class="box">
                    <div class="imgBox"> 
                        <img src="./static/img/huhu.jpg" alt="">  
                        <div class="btn">open</div>
                    </div>
                </div>
                <p> {{item.content}}</p>              
            </li>
        </ul>
    </div>
Copy the code

Next up is the CSS style. On the outer layer #app, open the elastic box model and solve the problem of spacing between the contentList displays. Use space-between to align the two ends so that the spacing between items is equal

    <style>
        *{
            margin: 0 ;
            padding: 0 ;
        }
        
        #app{
            width: 1200px;
            height: 300px;
            margin: 50px auto ;
            display: flex ;
            justify-content: space-between;
        }
        .reset{
            background-color:#A53D3C;
            color: white;
            width: 200px;
            height: 30px;
            line-height: 30px;
            margin: 50px auto;
            text-align: center;
            cursor: pointer;
        }
        #app ul{
            width: 1000px;
            height: 300px;
            list-style-type: none ;
        }
        #app li{
            width: 200px;
            height: 300px;
            position: relative;
        }
        .box{
            width: 200px;
            height: 320px;
            background-color: #A53D3C;
        }
        .btn{
            width: 70px;
            height: 70px;
            background-color: #FFA841;
            border-radius: 50%;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 30px;
            margin-top: 20px;
        }
Copy the code

Change the absolute position of the display reward P so that it is the same size and position as the cover of the red envelope. When the mouse does not float over the red envelope, the default img is turned to 0 degrees, which is the front display, and the P is turned to 90 degrees, which is blocked and disappeared. When floating, they flip and change form, that is, they have one front and one side at the same time

        img{
            width: 200px;
            height: 200px;
            transform: rotateY( 0deg );  / * * /
            transition: 1s ;
            border-radius: 45%;
        }
        p{
            position: absolute;
            left: 0 ;  top: 0 ;
            width: 200px;
            height: 220px;
            background-color: rgba(0.0.0.0.8);
            color: #fff;
            text-align: center;
            padding-top: 100px;

            transform: rotateY( 90deg ); /* * * */
            transition: 1s ;
        }
        #app ul li:hover p {
            transform: rotateY( 0deg );
        }
        #app ul li:hover img {
            transform: rotateY( -90deg );
            
        }
    </style>
Copy the code

The transform property applies 2D or 3D transformations to elements. This property allows you to rotate, scale, move, or tilt elements

Transformation: Rotation (Angle)

rotateY(angle) Define 3D rotation along the Y-axis.

Happy New Year to you all, the Year of the Tiger 🐅🍊