CSS3动画--木马图
程序员文章站
2022-03-19 15:49:02
...
前言:在学习了上一篇文章CSS3动画之后,我们今天来做一个木马图来练习一下。
一.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>
效果图：