console
cmputerDom = document.getElementById('mycomputer');
powerButton = document.getElementById('power-oper');
powerButton.addEventListener("click",function() {
if(powerButton.classList.contains('text-show')) {
powerButton.classList.remove('text-show');
}
if(cmputerDom.classList.contains('power-on') || cmputerDom.classList.contains('start-work')) {
cmputerDom.classList.remove('power-on','start-work');
cmputerDom.classList.add('compt-power-off');
setTimeout(() => {
cmputerDom.classList.remove('compt-power-off');
},3000);
} else {
cmputerDom.classList.add('power-on');
setTimeout(() => {
cmputerDom.classList.remove('power-on');
cmputerDom.classList.add('start-work');
},4500);
}
});
setTimeout(() => {
powerButton.classList.add('text-show');
},500);
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="computer" id="mycomputer">
<div class="computer-head">
<div class="computer-screen">
<div class="login-on">
<span class="login-logo logo-outing">
<span class="apple-logo">
<span class="logo"></span>
<span class="logo"></span>
<span class="logo-down"></span>
<span class="logo-up"></span>
<span class="logo-leaf"></span>
<span class="logo-eat"></span>
</span>
</span>
<span class="login-loading">
<span></span>
</span>
</div>
<div class="login-out"></div>
</div>
<div class="computer-opertion">
<span>
<span></span>
<span></span>
</span>
<span id="power-oper">
<span class="fa fa-power-off"></span>
<span class="text">点我开机</span>
</span>
</div>
</div>
<div class="computer-body"></div>
<div class="computer-foot"></div>
</div>
.computer {
margin: 15px auto;
display:flex;
flex-direction:column;
align-items:center;
}
.computer .computer-head {
width: 900px;
height: 500px;
background:#e6e6e6;
border: solid 2px #f2f2f2;
border-radius:10px;
box-sizing:border-box;
padding:20px 20px 50px;
position:relative;
}
.computer-head .computer-screen {
width:100%;
height:100%;
background: #808080;
position:relative;
}
.start-work .computer-head .computer-screen {
background: #808080 url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1555952653308&di=e6f362899090ffb4b54711abf8383c25&imgtype=0&src=http%3A%2F%2Fdesk-fd.zol-img.com.cn%2Ft_s960x600c5%2Fg5%2FM00%2F02%2F03%2FChMkJ1bKx1eIQkW8AAEYMtP-r6EAALHyQMDcL0AARhK342.jpg') no-repeat;
background-size: 100% 100%;
}
.computer-screen .login-on {
display: none;
flex-direction: column;
justify-content:space-between;
width:160px;
height:160px;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
opacity: 0;
}
.power-on .computer-screen .login-on {
display:inline-flex;
opacity: 1;
}
.login-on .login-logo {
display:inline-block;
margin: 0 auto 80px;
}
.login-on .login-logo.logo-outing {
animation: loging-logo 1.5s linear;
}
@keyframes loging-logo
{
0% {opacity: 0}
100% {opacity: 1;}
}
.login-logo .apple-logo {
position:relative;
display:flex;
}
.apple-logo .logo {
display:inline-block;
width:36px;
height:50px;
background:#fff;
float:left;
border-radius: 50% 50% 50% 50% / 18px 18px 32px 32px;
}
.apple-logo .logo:first-child {
margin-right:-5px;
transform:rotate(-8deg)
}
.apple-logo .logo:nth-child(2) {
margin-left:-5px;
transform:rotate(8deg)
}
.apple-logo .logo-down {
display:inline-block;
width:18px;
height: 10px;
border:solid 7px #fff;
border-color: #fff transparent transparent transparent;
border-radius: 50%;
position:absolute;
top:100%;
left:15px;
margin-top:-10px;
}
.apple-logo .logo-up {
display:inline-block;
width:18px;
height: 10px;
border:solid 7px #fff;
border-color: transparent transparent #fff transparent;
border-radius: 50%;
position:absolute;
bottom:100%;
left:15px;
margin-bottom:-10px;
}
.apple-logo .logo-leaf {
display:inline-block;
position:absolute;
transform:rotate(45deg);
left:53%;
top:-20px;
height:22px;
width:10px;
background:#fff;
border-radius:50%;
}
.apple-logo .logo-eat {
display:inline-block;
height:30px;
width:15px;
background:#808080;
border-radius:100% 0 0 100% / 50% 0 0 50%;
position:absolute;
left:100%;
top:6px;
margin-left:-13px;
}
.login-on .login-loading {
display:inline-block;
width:100%;
height:10px;
background: #595959;
border-radius: 5px;
position:relative;
}
.login-on .login-loading span {
display:inline-block;
width:100%;
height:10px;
background: #f2f2f2;
border-radius: 5px;
position:absolute;
animation: login-loaing 4s linear;
}
@keyframes login-loaing
{
0% {width: 0%;}
100% {width: 100%;}
}
.computer-head .computer-opertion {
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
margin-top:15px;
}
.computer-opertion > span:first-child {
display:inline-block;
margin-left:10px;
}
.computer-opertion > span:first-child span {
display:inline-block;
height:6px;
width:13px;
border: solid 3px #666;
border-color: transparent #666 #666 #666;
border-radius: 0 0 50% 50% / 0 0 70% 70%;
position:relative;
margin-right:16px;
}
.computer-opertion > span:first-child span:before {
content: "";
display:inline-block;
height:6px;
width:6px;
border: solid 3px #666;
border-color: #666 #666 transparent transparent;
border-radius: 0 70% 0 0 / 0 70% 0 0;
position:absolute;
bottom:100%;
right:100%;
margin-bottom:-4px;
}
.computer-opertion > span:first-child span:after {
content: "";
display:inline-block;
height:6px;
width:6px;
border: solid 3px #666;
border-color: #666 transparent transparent #666;
border-radius: 70% 0 0 0 / 70% 0 0 0;
position:absolute;
bottom:100%;
left:100%;
margin-bottom:-4px;
}
.computer-opertion > span:last-child {
display:inline-flex;
justify-content:center;
align-items:center;
height:20px;
width:20px;
border-radius:50%;
background:#666;
cursor:pointer;
position:relative;
}
.computer-opertion > span:last-child .fa {
font-size:12px;
color:#b3b3b3;
}
.power-on .computer-opertion > span:last-child .fa {
color:#fff;
}
.computer-opertion > span:last-child .text {
position:absolute;
color:#666;
left:160%;
bottom:0%;
display:inline-block;
padding: 10px;
font-size:12px;
background-color:#ffffcc;
border-radius:6px;
width:50px;
opacity:0;
transition:opacity 500ms;
}
.computer-opertion > span:last-child .text:before {
content:"";
position:absolute;
right:100%;
bottom:6px;
display:inline-block;
border:solid 8px #ffffcc;
border-color: transparent #ffffcc transparent transparent;
}
.computer-opertion > span.text-show:last-child span.text {
opacity:1;
}
.compt-power-off .computer-screen .login-out {
display: inline-block;
width:20px;
height:20px;
border: solid 6px #e6e6e6;
border-right-color: transparent;
border-radius:50%;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
animation: login-offing 1s infinite linear;
}
@keyframes login-offing
{
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
.computer .computer-body {
width: 130px;
height: 150px;
background:#e6e6e6;
}
.computer .computer-foot {
width: 260px;
height: 36px;
background:#b3b3b3;
border-radius: 25% 25% 0 0 / 100% 100% 0 0;
}