前言:在学习了上一篇文章​​CSS3动画​​之后,我们今天来做一个木马图来练习一下。


目录:

  • 一.Html
  • 二.CSS
  • 三.JS


一.Html

首先我们先进行具体的页面设计,知道需要什么元素来进行布局:

` <div class="action">
<!--左边的点击按钮-->
<button class="left"><</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">></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"><</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">></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动画--木马图_js