Front-End-Spezialeffekte 520 Geständnis-Artefakt-rotierende Fotowand-CSS-Kenntnisse-php.cn

Heim

tägliche Programmierung

CSS-Kenntnisse

Front-End-Spezialeffekte 520 Geständnis-Artefakt-rotierende Fotowand

安安杰尼

Apr 28, 2020 pm 06:42 PM

520 kommt bald und ich werde Ihnen beibringen, wie man das White-Magic-Tool verwendet. Single-Programmierer sind der Meinung, dass es sehr einfach zu erlernen ist.

Produktionsschritte:

1. Erstellen Sie ein neues Codeverzeichnis, erstellen Sie eine neue Datei index.html und kopieren Sie den folgenden Code in die Datei

2. Erstellen Sie ein neues Dateiclip-Bild, suchen Sie 12 Bilder und fügen Sie sie ein, ändern Sie das src-Attribut, das dem imgae-Tag entspricht, und die coole Fotodrehung ist abgeschlossen.

3. Der Codeeffekt ist wie folgt: Doppelklicken Sie auf index.html oder ziehen Sie es direkt in den Browser, um es zu öffnen

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>520表白神器-照片特效</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        #react{
            width: 200px;
            height:200px;
            margin: 200px auto;
            transform-style:preserve-3d;
            animation:rotate 20s infinite;
            animation-timing-function: linear;
        }
        #react div{
            position:absolute;
            transition: all .4s;
        }
        div .out_pic{
            width:200px;
            height:200px;
            opacity:0.9;
        }
        div .in_pic{
            width:100px;
            height:100px;
        }
        #react span{
            display:block;
            position:absolute;
            width:100px;
            height:100px;
            top:50px;
            left:50px;
        }
        @keyframes rotate{
            from{transform: rotateX(0deg) rotateY(0deg);}
            to{transform: rotateX(360deg) rotateY(360deg);}
        }
        .out_frount{
            transform:translateZ(100px);
        }
        .out_back{
            transform:translateZ(-100px);
        }
        .out_left{
            transform:rotateY(90deg) translateZ(100px);
        }
        .out_right{
            transform: rotateY(-90deg) translateZ(100px);
        }
        .out_top{
            transform:rotateX(90deg) translateZ(100px);
        }
        .out_bottom{
            transform: rotateX(-90deg) translateZ(100px);
        }
        .in_frount{
            transform:translateZ(50px);
        }
        .in_back{
            transform:translateZ(-50px);
        }
        .in_left{
            transform:rotateY(90deg) translateZ(50px);
        }
        .in_right{
            transform: rotateY(-90deg) translateZ(50px);
        }
        .in_top{
            transform:rotateX(90deg) translateZ(50px);
        }
        .in_bottom{
            transform: rotateX(-90deg) translateZ(50px);
        }
        #react:hover .out_frount{
            transform:translateZ(200px);
        }
        #react:hover .out_back{
            transform:translateZ(-200px);
        }
        #react:hover .out_left{
            transform:rotateY(90deg) translateZ(200px);
        }
        #react:hover .out_right{
            transform: rotateY(-90deg) translateZ(200px);
        }
        #react:hover .out_top{
            transform:rotateX(90deg) translateZ(200px);
        }
        #react:hover .out_bottom{
            transform: rotateX(-90deg) translateZ(200px);
        }
        @charset "utf-8";
        /* CSS Document */
    </style>
</head>

<body>
<div id="react">
    <div class="out_frount">
        <image src="image/1.jpg" class="out_pic">
    </div>
    <div class="out_back">
        <image src="image/1.jpg" class="out_pic">
    </div>
    <div class="out_left">
        <image src="image/1.jpg" class="out_pic">
    </div>
    <div class="out_right">
        <image src="image/1.jpg" class="out_pic">
    </div>
    <div class="out_top">
        <image src="image/1.jpg" class="out_pic">
    </div>
    <div class="out_bottom">
        <image src="image/1.jpg" class="out_pic">
    </div>
    <span class="in_frount">
        <image src="image/1.jpg" class="in_pic">
    </span>
    <span class="in_back">
        <image src="image/1.jpg" class="in_pic">
    </span>
    <span class="in_left">
        <image src="image/1.jpg" class="in_pic">
    </span>
    <span class="in_right">
        <image src="image/1.jpg" class="in_pic">
    </span>
    <span class="in_top">
        <image src="image/1.jpg" class="in_pic">
    </span>
    <span class="in_bottom">
        <image src="image/1.jpg" class="in_pic">
    </span>
</div>
</body>
</html>

Nach dem Login kopieren

Front-End-Spezialeffekte 520 Geständnis-Artefakt-rotierende Fotowand

Das ist Der einzige Schritt, um das Single-Dasein loszuwerden. Beeilen Sie sich und lernen Sie, und denken Sie daran, zurückzukommen und uns zu folgen!

Das obige ist der detaillierte Inhalt vonFront-End-Spezialeffekte 520 Geständnis-Artefakt-rotierende Fotowand. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn