• The development train of thought
  1. Local interface
  2. Make a 3D spin player
  3. Add ❤ Animation
  4. Add background music

Development technology

  • html
  • css

The core logic

  • HTML layout interface
  • CSS for animation
  • Source code acquisition

The core code

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ice Ice Edition -3D music player</title>
    <style>* {margin: 0;
            padding: 0;
        }
        body{
            background: url("images/jacky/bg.png") no-repeat;
            background-size:cover;
            overflow: hidden;
        }
        ul{
            width: 200px;
            height: 200px;
            /*background-color: red; * /
            position: absolute;
            bottom: 100px;
            left: 50%;
            margin-left: -100px;
            transform-style: preserve-3d;
            /*transform: rotateX(-10deg); * /
            animation: sport 6s linear 0s infinite normal;
        }
        ul li{
            list-style: none;
            width: 200px;
            height: 200px;
            font-size: 60px;
            text-align: center;
            line-height: 200px;
            position: absolute;
            left: 0;
            top: 0;
            background-color: black;
        }
        ul li:nth-child(1) {transform: rotateY(60deg) translateZ(200px);
        }
        ul li:nth-child(2) {transform: rotateY(120deg) translateZ(200px);
        }
        ul li:nth-child(3) {transform: rotateY(180deg) translateZ(200px);
        }
        ul li:nth-child(4) {transform: rotateY(240deg) translateZ(200px);
        }
        ul li:nth-child(5) {transform: rotateY(300deg) translateZ(200px);
        }
        ul li:nth-child(6) {transform: rotateY(360deg) translateZ(200px);
        }
        ul li img{
            width: 200px;
            height: 200px;
            border: 5px solid skyblue;
            box-sizing: border-box;
        }
        ul:hover{
            animation-play-state: paused;
        }
        ul:hover li img{
            opacity: 0.5;
        }
        ul li:hover img{
            opacity: 1;
        }
        @keyframes sport {
            from{
                /* Note: 1. If the animation has a property with the same name as the default style, the default style property 2 will be overridden. When writing an animation, the fixed values are written first and the values that need to be changed */ are written after
                transform: rotateX(-10deg) rotateY(0deg);
            }
            to{
                transform: rotateX(-10deg) rotateY(360deg); }}.heart{
            width: 173px;
            height: 157px;
            position: absolute;
            left: 100px;
            bottom: 100px;
            animation: move 10s linear 0s infinite normal;
        }
        @keyframes move {
            0%{
                left: 100px;
                bottom: 100px;
                opacity: 1;
            }
            20%{
                left: 300px;
                bottom: 300px;
                opacity: 0;
            }
            40%{
                left: 500px;
                bottom: 500px;
                opacity: 1;
            }
            60%{
                left: 800px;
                bottom: 300px;
                opacity: 0;
            }
            80%{
                left: 1200px;
                bottom: 100px;
                opacity: 1;
            }
            100%{
                left: 800px;
                bottom: -200px; }}</style>
</head>
<body>
<ul>
    <li><img src="images/jacky/1.png" alt=""></li>
    <li><img src="images/jacky/2.png" alt=""></li>
    <li><img src="images/jacky/3.png" alt=""></li>
    <li><img src="images/jacky/4.png" alt=""></li>
    <li><img src="images/jacky/5.png" alt=""></li>
    <li><img src="images/jacky/6.png" alt=""></li>
</ul>
<img src="images/jacky/xin.png" class="heart">
<! -- Add music -->
<audio src="images/jacky/bingbing.mp3" autoplay="autoplay" loop="loop"></audio>
</body>
</html>
Copy the code

Please remember to like it before you collect it! Good articles deserve to be seen by more people.

Finally, one more sentence, fans rhyming, pay attention to guagao not lost, take you to program on the highway.