<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
*{
padding: 0px;
margin: 0px;
list-style: none;
}
/* 设置大背景 */
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(circle at top center,#718497,#29323c);
}
.box{
width: 900px;
height: 400px;
border: 1px solid blue;
display: flex;
}
/* 设置未展开的item盒子 */
.box>.item{
/* border: 1px solid red; */
width: 60px;
border-radius: 30px;
margin: 10px;
/* 未展开时图片效果 */
background-size: cover;
background-position: center;
overflow: hidden;
position: relative;
/* 盒子缓慢展开效果 */
transition: all 1s ;
}
.box>.item .content{
width: 100%;
position: absolute;
left: 0px;
bottom: 10px;
right: 0px;
border: 1px solid blue;
display: fl
html5、css、js实现图片和文本手风琴效果
最新推荐文章于 2023-04-11 15:41:47 发布