前端JS特效第38波：js图片层叠布局旋转木马特效

强迫老板HelloWord

于 2024-07-15 18:00:00 发布

阅读量358

点赞数 3

文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/wangtianming88/article/details/139906513

版权

js图片层叠布局旋转木马特效，先来看看效果：

部分核心的代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>js图片层叠布局旋转木马特效 - php中文网</title>

<style type="text/css" media="screen">
html, body {
width: 100%;
}
ul li {
list-style: none;
}
*{margin:0;padding:0;}
#box {
width: 1200px;
margin: 20px auto;
}
.slide {
height: 500px;
position: relative;
}
.slide ul {
height: 100%;
}
.slide li {
position: absolute;
left:200px;
top:0;
}
.slide li img{
width: 100%;
}
.arraw {
opacity: 0;
}
.arraw a {
width: 70px;
height: 110px;
display: block;
position: absolute;
top: 50%;
margin-top: -55px;
z-index: 999;
}
.next {
background: url(image/right.png)

最低0.47元/天解锁文章