让用户看起来是这样，而非实现起来一定是这样。
写特效时经常被逻辑思维所牵绊，A元素B元素分的太清了，反而麻烦。
最近在网上找了一些自己喜欢例子。
1.
effect.gif
html结构
<div class="menu menu1">
<div class="item">分页1</div>
<div class="item">分页2</div>
<div class="item">分页3</div>
<div class="item">分页4</div>
<div class="item">分页5</div>
<div class="bg"></div>
</div>
.bg的层在.item下面，.item背景色是透明的。
2.
html结构
<div class="menu menu2">
<div class="item current">分页1</div>
<div class="item">分页2</div>
<div class="item">分页3</div>
<div class="item">分页4</div>
<div class="item">分页5</div>
</div>
切换类的同时执行一个动画，动画执行完后回到初始状态
1，2 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Menu Go!</title>
<style>
.menu{
position: relative;
width: 80%;
margin: 100px auto;
height: 50px;
line-height: 50px;
text-align: center;
background-color: #202932;
color:#fff;
overflow: hidden;
transition: all 1s;
}
.menu::after{
content: "";
display: block;
clear: both;
}
.menu .item
{
width: 200px;
height: 100%;
float: left;
z-index: 100;
position: relative;
cursor: pointer;
}
.menu .bg{
position: absolute;
height: 100%;
width: 200px;
background-color: #208ff9;
cursor: pointer;
}
.menu1 .bg{
left: 0;
transition: left 0.25s ease;
}
.menu2 .item.current{
background-color: #208ff9;
animation:slideUp 0.35s ease-in-out;
}
@keyframes slideUp{
0%{
transform: translateY(-100%);
}
}
</style>
</head>
<body>
<div class="menu menu1">
<div class="item">分页1</div>
<div class="item">分页2</div>
<div class="item">分页3</div>
<div class="item">分页4</div>
<div class="item">分页5</div>
<div class="bg"></div>
</div>
<script>
let menu1_dom = document.getElementsByClassName('menu1')[0];
let menu1_bg = menu1_dom.querySelector('.bg');
menu1_dom.addEventListener('click',(event)=>{
menu1_bg.style.left = event.target.offsetLeft + 'px';
})
</script>
<div class="menu menu2">
<div class="item current">分页1</div>
<div class="item">分页2</div>
<div class="item">分页3</div>
<div class="item">分页4</div>
<div class="item">分页5</div>
</div>
<script>
let menu2_dom = document.getElementsByClassName('menu2')[0];
menu2_dom.addEventListener('click',(event)=>{
var ele_dom = event.target;
while (ele_dom = ele_dom.nextElementSibling) {
ele_dom.classList.remove('current');
}
ele_dom = event.target;
while (ele_dom = ele_dom.previousElementSibling) {
ele_dom.classList.remove('current');
}
event.target.classList.add('current');
})
</script>
</body>
</html>g'h
3.
effect1.gif
HTML结构
<div class="wrapper">
<form action="">
<div class="item">
<label >
<input name="selected" type="radio" >
<input type="reset">
<div class="first">
<div class="title"></div>
<p class="second">
Lorem ipsum dolor sit amet,
</p>
</div>
</label>
</div>
</form>
</div>
通过radio的单一状态实现状态切换，label的特性可以控制input的选中，
选中后，reset会覆盖整个区域，使得再次点击可以回到初始状态
左侧的线是wrapper元素的，两个球的层级在比线的高
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉手风琴</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="initial-scale=1.0,width=device-width">
<link rel="stylesheet" href="index.css">
<link href="http://cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
<style>
*{
margin: 0;
padding: 0;
}
body{
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
color: #305275;
}
.wrapper::before{
content: "";
position: absolute;
display: block;
width: 1px;
top:20px;
bottom: 20px;
left: -24px;
background-color: #550527;
}
.wrapper{
position: relative;
margin-top: 120px;
margin-left: auto;
margin-right: auto;
width: 505px;
}
.item{
background-color: #fff;
margin-bottom: 12px;
position: relative;
}
.item label{
display: block;
}
.item input{
display: none;
}
.item .first{
padding-left: 30px;
cursor: pointer;
transition: height .35s;
height: 52px;
box-shadow: 0px 2px 5px rgba(0,0,0,0.15);
background-image: linear-gradient(to bottom,#688e26 0%,#ff816a 100%);
background-size: 2px 100%;
background-repeat: no-repeat;
overflow: hidden;
}
.item input ~ input{
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
z-index: 12;
cursor: pointer;
}
.item input:not(:checked) ~ input{
display: none;
}
.item input:checked ~ .first{
height: 500px;
}
.item input:checked ~ .first .title:after{
content: "\f067";
}
.item input:checked{
display: none;
}
.item input:checked ~ input{
display: block;
}
.item .first .title{
line-height: 52px;
position: relative;
}
.item .second
{
padding-right: 15px;
line-height: 28px;
}
.item .first .title:before{
content: "Section1";
color: #550527;
font-size: 20px;
font-weight: 600;
}
.item .first .title:after{
display: block;
content: "\f068";
font-family: fontawesome;
width: 25px;
height: 25px;
line-height: 25px;
border-radius: 50%;
font-size: 15px;
font-weight: normal;
color: #688e26;
text-align: center;
border: 1px solid #688e26;
float: right;
margin-top: 12.5px;
margin-right: 15px;
}
.item:before{
display: block;
content: "";
width: 15px;
height: 15px;
border-radius: 50px;
background: #fff;
border: 1px solid #550527;
position: absolute;
top: 18.5px;
left: -32px;
}
</style>
</head>
<body>
<div class="wrapper">
<form action="">
<div class="item">
<label >
<input name="selected" type="radio" >
<input type="reset">
<div class="first">
<div class="title"></div>
<p class="second">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi aperiam esse voluptatem laboriosam labore distinctio ullam tempora soluta, molestias nesciunt eveniet eius debitis aspernatur ratione, natus commodi, culpa eum sequi doloribus exercitationem! Est doloribus tempora sint quas reprehenderit ut et nihil rem laudantium quidem dolorem consectetur eveniet, vel accusantium. Suscipit commodi nemo iusto quaerat molestias aut necessitatibus quae numquam neque dolorum tempora id quasi officia minima explicabo, est earum, sed accusamus obcaecati consequatur doloremque, doloribus asperiores velit, corporis. Minima consectetur ab sequi nam, sunt! Ut sed sunt laudantium, possimus illum aliquam corporis, tenetur pariatur eveniet iusto, nisi ipsum harum. Error.
</p>
</div>
</label>
</div>
<div class="item">a
<label >
<input type="radio" name="selected" >
<input type="reset">
<div class="first">
<div class="title"></div>
<div class="second">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, vel ratione animi quisquam placeat vitae architecto id ducimus labore repudiandae eaque atque incidunt dolorem culpa at similique saepe harum laboriosam assumenda nam numquam a! Veritatis a ab autem aspernatur quod, deleniti, adipisci suscipit mollitia voluptas numquam officiis nesciunt, cum voluptatem maxime accusantium iste in modi debitis totam quisquam! Fugit a minima sint facilis consequuntur dolorem iure tempora sit aperiam beatae sapiente assumenda quae dolores dolore repellat recusandae necessitatibus natus, architecto ex quod eos ipsa cum quia? Deserunt optio recusandae, in labore eos omnis maiores reprehenderit consequatur, quae sint accusamus quo.
</div>
</div>
</label>
</div>
</form>
</div>
</body>
</html>
网友评论