方法有很多种，下面我介绍一种纯CSS的实现的方式：
<!DOCTYPE html><html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title></title>
<style>
html,
body {
margin: 0;
padding: 0;
}
main {
width: 460px;/每个box的宽度为150px,间隔为52/
margin: 0 auto;
}
demo {
float: left;
display: inline-block;
}
box {
height: 150px;
width: 150px;
background: #3695d5;
position: relative;
overflow: hidden;
}
inbox {
height: 50px;
line-height: 50px;
text-align: center;
color: #FFF;
width: 100%;
position: absolute;
bottom: -50px;
background: rgba(0, 0, 0, 03);
transition: 1s;/过渡效果/
}
box:hover>inbox {
bottom: 0;
}
</style>
</head>
<body>
<div class="main">
<div class="demo">
<div class="box">
<div class="inbox">
文字
</div>
</div>
</div>
<div class="demo" style="margin: 0 5px 0 5px;">
<div class="box">
<div class="inbox">
文字
</div>
</div>
</div>
<div class="demo">
<div class="box">
<div class="inbox">
文字
</div>
</div>
</div>
</div>
</body>
</script>
</html>
首先我们创建一个html文件，写出html文件的一些基础代码
然后我们在网页中新建一个div，并新建一个
无序列表并创建4个然后使用浏览器直接打开html文件，查看效果，可以看到我们创建的标签自带有一定的格式，
接下来我们使用下面的代码去除标签的格式，其中：list-style:none; 表示去除标签的格式width:160px; 表示设置标签的宽height:240px;表示设置标签的高background:#666666;表示设置标签的背景色float:left;表示设置标签浮动显示，并且为左浮动margin-right:20px;表示设置标签右外边距
刷新浏览器中html文件查看效果，
这里我们开始添加动画：
给
标签添加：
transition:transform 01s;
transform表示变换的属性，01上表示表换所需要的时间另外给标签添加鼠标滑动属性
li:hover{cursor:pointer;transform:translate(0,-10px);}
cursor:pointer;表示鼠标滑过显示为小手形状
transform:translate(0,-10px);translate表示移动，第一个参数为水平移动值，第二个参数为垂直移动值，
进入浏览器直接查看效果，如下图实现了鼠标滑过块，块上移的动画特效，如下图：
微信表白墙本质上就是微信墙的一种创意运用。微信墙根据其具体功能还可以细分为微信会议墙、微信活动墙、微信年会墙等等。微信表白墙通过投影仪大屏幕与微信连接，实现多人互动参与。但是微信表白墙并不是微信自带的功能，而是微信第三方服务商提供的相关技术支持。想要获得此类服务，就需要到第三方平台申请相应的功能，支付使用费用才能实现。
欢迎分享，转载请注明来源：表白网
微信扫一扫
支付宝扫一扫
评论列表（0条）