按钮:打开礼盒
教程地址:原文地址(YouTube)
B站教程:原文转载(bilibili)
两个视频的内容相同,第二个为转载
效果图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MM5rhmjK-1580695226576)(演示.gif)]
代码区
html
<div class="wrapper">
<ul>
<!-- 请自行添加图标进行引入 fontawesome -->
<li><i class="fa fa-qq fa-lg" aria-hidden="true"></i>
<span class="cover1"></span> <!-- 上下盒框 -->
<span class="cover2"></span> <!-- 左右盒框 -->
</li>
<li>
<i class="fa fa-weixin fa-lg" aria-hidden="true"></i>
<span class="cover1"></span>
<span class="cover2"></span>
</li>
<li>
<i class="fa fa-weibo fa-lg" aria-hidden="true"></i>
<span class="cover1"></span>
<span class="cover2"></span>
</li>
<li>
<i class="fa fa-youtube-play fa-lg" aria-hidden="true"></i>
<span class="cover1"></span>
<span class="cover2"></span>
</li>
</ul>
</div>
CSS
*{
margin: 0;/* 外边距 */
padding: 0;/* 内边距 */
}
body{
background: #e63946;/* 背景颜色 */
}
.wrapper{
position: absolute;/* 相对定位 */
top: 50%;/* 距上部 */
left: 50%;/* 距左部 */
transform: translate(-50%, -50%);/* X,Y轴移动 */
}
ul{
list-style: none;/* 清除默认样式 */
width: 600px; /* 宽度 */
}
ul li{
width: 70px;
height: 70px;
float: left;/* 左浮动 */
margin: 0 25px;
background-color: #fff;
position: relative;
cursor: pointer;/* 鼠标样式 */
border-radius: 5px;/* 圆角 */
transform-style: preserve-3d;/* 保留3D效果 */
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);/* 阴影效果,X,Y,模糊,颜色 */
}
/* 图标 */
ul li .fa{
position: absolute;
color: #e63946;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 40px;/* 字体大小 */
}
/* 下边 */
.cover1::before{
content: '';
position: absolute;
top: 0;
left: 0;
/* 通过3边角透明实现3角形状 */
border-left: 35px solid transparent;
border-right: 35px solid transparent;
border-bottom: 35px solid #1d3557;
border-top: 35px solid transparent;
border-radius: 5px;
opacity: 0.8;/* 透明度 */
transform-origin: bottom;/* 转变开始位置 */
transition: all 0.8s ease;/* 过渡时间 速率曲线 */
}
/* 上边 */
.cover1::after{
content: '';
position: absolute;
top: 0;
left: 0;
border-left: 35px solid transparent;
border-right: 35px solid transparent;
border-top: 35px solid #1d3557;
border-bottom: 35px solid transparent;
border-radius: 5px;
opacity: 0.8;
transform-origin: top;
transition: all 0.8s ease;
}
/* 左边 */
.cover2::before{
content: '';
position: absolute;
top: 0;
left: 0;
border-left: 35px solid #1d3557;
border-right: 35px solid transparent;
border-bottom: 35px solid transparent;
border-top: 35px solid transparent;
border-radius: 5px;
opacity: 0.8;
transform-origin: left;
transition: all 0.8s ease;
}
/* 右边 */
.cover2::after{
content: '';
position: absolute;
top: 0;
left: 0;
border-right: 35px solid #1d3557;
border-left: 35px solid transparent;
border-bottom: 35px solid transparent;
border-top: 35px solid transparent;
border-radius: 5px;
opacity: 0.8;
transform-origin: right;
transition: all 0.8s ease;
}
ul li:hover .cover1::before{/* 通过修改元素对应的旋转来进行打开效果 */
transform: rotateX(-180deg);
}
ul li:hover .cover1::after{
transform: rotateX(180deg);
}
ul li:hover .cover2::before{
transform: rotateY(-180deg);
}
ul li:hover .cover2::after{
transform: rotateY(180deg);
}
JS
教程地址:原文地址(YouTube)
B站教程:原文转载(bilibili)