话不多说,老规矩,先上预览:blogai.cn
由于新换了服务器,还在备案审核中,所以,前面的预览地址都打不开了,等过几天就好了。
首先,我们先用css实现一个摇动的手机,能很好地带入用户。
实现如下:
<style rel="stylesheet" type="text/css">
*{
box-sizing: border-box;
}
body{
background: cornflowerblue;
}
.phone{
width: 400px;
height: 800px;
background: #ffffff;
border: 1.5px solid #000000;
text-align: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin:auto;
border-radius: 60px;
animation: shake 2s ease infinite;
}
.screen{
background: #000000;
width: 90%;
height: 7