前言
文章使用Vue框架来制作,对Vue感兴趣的小伙伴可以点点收藏哦。
一、效果图片
二、使用步骤
1.代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<style>
#app {
font-family: "microsoft yahei";
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('images/bg.jpg') center / cover
}
#mine {
position: absolute;
bottom: 5vh;
width: 100%;
text-align: center;
}
#computer {
position: absolute;
top: 5vh;
width: 100%;
text-align: center;
transform: scale(0.6);
}
#computer.closed {
transform-style: preserve-3d;
perspective: 1000px;
}
img {
border-radius: 0.6vw;
box-shadow: 1px 1px 3vw rgba(0, 0, 0, 0.5);
}
#computer.closed img {
transform: rotateX(30deg);
}
#call {
position: fixed;
top: 50vh;
width: 320px;
left: calc(50% - 160px);
background: rgba(255, 255, 255, 0.8);
box-shadow: 1px 1px 16px rgba(0, 0, 0, 0.6);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
z-index: 99;
height: 150px;
font-size: 30px;
text-align: center;
padding-top: 10px;
line-height: 60px;
color: #fff;