2. 程式人生 > 其它 >CSS3動畫--木馬圖

CSS3動畫--木馬圖

阿新 • • 發佈：2020-12-17

技術標籤：cssjscss3前端html

前言:在學習了上一篇文章CSS3動畫之後,我們今天來做一個木馬圖來練習一下。

目錄:

一.Html

首先我們先進行具體的頁面設計,知道需要什麼元素來進行佈局:

` <div class="action">
<!--左邊的點選按鈕-->
     	<button class="left">&lt;</button>
     <!--主要的圖片-->
   		<div id="
 
menu-1" class="menu menu-1"></div>
 		<div id="menu-2" class="menu menu-2"></div>
		<div id="menu-3" class="menu menu-3"></div>
<!-- 右邊的點選按鈕 -->
		<button class="right">&gt;</button>
</
 
div>`

二.CSS

我們需要對其初始的css樣式進行設計,進行修飾樣式:

<style>
 div[class^="act"] {
     width: 800px;
     height: 400px;
     margin: 100px auto;
     position: relative;
     transform-style: preserve-3d;
     perspective: 1000px;
   }
       
       button {
           width: 20px;
           height
 
: 100px;
           position: absolute;
           top: 50%;
           margin-top: -50px;
       }
       
       button:first-child {
           left: 0;
       }
       
       button:last-child {
           right: 0;
       }
       
       .menu {
           width: 400px;
           height: 250px;
           position: absolute;
           transition: all 0.8s;
           filter: blur(3px);
           background-size: 400px 250px;
       }
       
       .menu-1 {
           background-image: url(img/貓和老鼠2.jpg);
       }
       
       .menu-2 {
           background-image: url(img/4.jpg);
       }
       
       .menu-3 {
           background-image: url(img/貓和老鼠.jpg);
       }
       
       #menu-1 {
           transform: translateZ(-300px) translateY(50px) translateX(500px) rotateY(-50deg);
       }
       
       #menu-2 {
           transform: translateZ(-300px) translateY(50px) translateX(-100px) rotateY(50deg);
       }
       
       #menu-3 {
           transform: translateY(50px) translateX(200px);
           filter: blur(0);
       }
</style>

三.JS

主要的邏輯由JS來進行實現,大概就是換置每一個圖片的ID屬性。

<script>
       window.onload = function() {
           var menu_1 = document.querySelector("#menu-1");
           var menu_2 = document.querySelector("#menu-2");
           var menu_3 = document.querySelector("#menu-3");
           var left = document.querySelector(".left");
           var right = document.querySelector(".right");
           // 封裝左邊的事件
           var run = function() {
               const ret = menu_1.id;
               menu_1.id = menu_3.id;
               menu_3.id = menu_2.id;
               menu_2.id = ret;
           };
           // 點選左邊按鈕執行的事件
           left.addEventListener("click", run);
           // 計時器自動執行事件
           setInterval(run, 1200);
           // 點選右邊按鈕執行的事件
           right.addEventListener("click", function() {
               const ret = menu_1.id;
               menu_1.id = menu_2.id;
               menu_2.id = menu_3.id;
               menu_3.id = ret;
           });
       }
   </script>

全部程式碼如下：

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div[class^="act"] {
            width: 800px;
            height: 400px;
            margin: 100px auto;
            position: relative;
            transform-style: preserve-3d;
            perspective: 1000px;
        }
        
        button {
            width: 20px;
            height: 100px;
            position: absolute;
            top: 50%;
            margin-top: -50px;
        }
        
        button:first-child {
            left: 0;
        }
        
        button:last-child {
            right: 0;
        }
        
        .menu {
            width: 400px;
            height: 250px;
            position: absolute;
            transition: all 0.8s;
            filter: blur(3px);
            background-size: 400px 250px;
        }
        
        .menu-1 {
            background-image: url(img/貓和老鼠2.jpg);
        }
        
        .menu-2 {
            background-image: url(img/4.jpg);
        }
        
        .menu-3 {
            background-image: url(img/貓和老鼠.jpg);
        }
        
        #menu-1 {
            transform: translateZ(-300px) translateY(50px) translateX(500px) rotateY(-50deg);
        }
        
        #menu-2 {
            transform: translateZ(-300px) translateY(50px) translateX(-100px) rotateY(50deg);
        }
        
        #menu-3 {
            transform: translateY(50px) translateX(200px);
            filter: blur(0);
        }
    </style>
</head>

<body>
    <div class="action">
        <button class="left">&lt;</button>
        <div id="menu-1" class="menu menu-1"></div>
        <div id="menu-2" class="menu menu-2"></div>
        <div id="menu-3" class="menu menu-3"></div>
        <button class="right">&gt;</button>
    </div>
    <script>
        window.onload = function() {
            var menu_1 = document.querySelector("#menu-1");
            var menu_2 = document.querySelector("#menu-2");
            var menu_3 = document.querySelector("#menu-3");
            var left = document.querySelector(".left");
            var right = document.querySelector(".right");
            // 封裝左邊的事件
            var run = function() {
                const ret = menu_1.id;
                menu_1.id = menu_3.id;
                menu_3.id = menu_2.id;
                menu_2.id = ret;
            };
            // 點選左邊按鈕執行的事件
            left.addEventListener("click", run);
            // 計時器自動執行事件
            setInterval(run, 1200);
            // 點選右邊按鈕執行的事件
            right.addEventListener("click", function() {
                const ret = menu_1.id;
                menu_1.id = menu_2.id;
                menu_2.id = menu_3.id;
                menu_3.id = ret;
            });
        }
    </script>
</body>

</html>

效果圖：
在這裡插入圖片描述

相關推薦

CSS3動畫--木馬圖

技術標籤：cssjscss3前端html 前言:在學習了上一篇文章CSS3動畫之後,我們今天來做一個木馬圖來練習一下。

CSS3動畫效果--2D

知識點一：旋轉 transform: rotate(180deg)//只能傳一個引數，，正值是順時針負值是逆時針

css3 動畫

目錄animation-name 使元素從一種樣式逐漸變化為另一種樣式的效果。 相容性 IE10+、 FireFox6+ Chrome43+、 Safari!9+、 Opera30+、 Android -webkit-

CSS3動畫

1. 涉及動畫的元素最好用塊級標籤，如div ，嚴禁用span i 等行類標籤，用行類標籤導致動畫在ios中不執行而在安卓正常，

CSS3 動畫基本使用

css 使用 transition（平滑過渡） 、animation （動畫） 、transform （轉換）實現動畫效果。

一篇文章教會你使用html+css3製作GIF圖

【一、專案背景】 生活中經常會見到很多gif圖，那麼gif圖到底是什麼？GIF是一種點陣圖。簡單來說就是通過每一張張靜圖，通過控制它的關鍵幀，從而達到靜態圖動起來的效果。

css3動畫新增間隔

因專案需要，需要在元素上實現動畫效果，並且需要有動畫間隔。坑爹的是animation-delay只有在第一次動畫開始的時候才起效。

css3動畫 Transition

csstransitions提供了一種在更改css屬性時控制動畫速度的方法。 其可以讓屬性變化成為一個持續一段時間的過程，而不是立即生效的。比如，將一個元素的顏色從白色改為黑色，通常這個改變是立即生效的，使用 CSS trans

CSS3 動畫的實現

任務 我們最近在SeatGeek更新了我們的“跟蹤\"圖示，以匹配我們的新iPhone應用程式。 首席設計師在PSD中建立了具有不同狀態的心臟圖示，並在下面建立了動畫：

CSS3動畫：animation

可以讓頁面中指定的元素按照設定的方式“動”起來，運用的是人視覺延遲的原理，連續地在上一張圖消失之前插入下一張。

css3動畫 實現大資料波紋熱點

<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">

值得你收藏的10個CSS3動畫工具

人類對於運動的食物往往會投入更多的關注，因此巧妙的使用動畫能夠極大地提升網站的使用者體驗，快速喚起使用者對重要元素的關注。

用 Css3動畫 繪製 水波紋DIV

技術標籤：JavaScript學習前端CSS學習javascriptcss3 效果圖 <!DOCTYPE html> <html>

css3動畫編寫圖片無縫滾動的效果

技術標籤：css3 css3動畫編寫圖片無縫滾動的效果 程式碼編寫如下 <!doctype html>

css3動畫手勢指引

技術標籤：css3animation <div class="wrapper"> <div class="circle">完善資訊</div>

實現行內文字滾動,法一:css3動畫,法二:js操作dom

技術標籤：小技巧 需求: 因一行內的文字太多,需要滾動以展示所有的文字; 法一 利用css3中的動畫進行展示; 定義動畫:

13 CSS3過渡屬性、CSS3的transform 屬性、CSS3動畫屬性、動畫庫

13 CSS3過渡屬性、CSS3的transform 屬性、CSS3動畫屬性、動畫庫 CSS3過渡屬性 通過CSS3可以在不使用Flash動畫或JavaScript的情況下，為元素從一種樣式變 換為另一種樣式時新增效果。而CSS3過渡就是元素從一種樣式逐

CSS3中精靈圖設定不同圖片妙用class

技術標籤：css3css3 <!-- 區域性導航欄 --> <ul class="local-nav"> <li>

【小5聊】CSS3動畫屬性animation

技術標籤：前端css3動圖animation 【語法】 animation: name duration timing-function delay iteration-count direction;

H5+CSS3動畫彙總(送給物件520的小禮物) 原始碼奉上

#1.實現的動畫效果 圖片用的是我和我物件的，可以自行替換 #2.實現原理 html5+css3進行實現，