div+css布局实现一个mac笔记本电脑效果代码-html代码-BFW代码库

div+css布局实现一个mac笔记本电脑效果代码

代码语言：html

代码描述：div+css布局实现一个mac笔记本电脑效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
.container{
	display : flex ;
	justify-content: center ;
	align-items : center ;
	width : 100% ;
	height : 100vh ;
}
.macbook{
	position : relative ;
	width : 228px ;
	height : 260px ;
}
.macbook__topBord{
	position : absolute ;
	z-index : 0 ;
	top : 34px ;
	left : 0 ;
	width : 128px ;
	height : 116px ;
	border-radius : 6px ;
	transform-origin :center ;
	background : linear-gradient( -135deg ,  #C8C9C9 52% , #8C8C8C 56%);
	transform : scale(0) skewY(-30deg) ;
	animation : topbord .4s 1.7s ease-out ;
	animation-fill-mode : forwards ;
}
.macbook__topBord::before{
	content : "" ;
	position : absolute ;
	z-index : 2 ;
	top : 8px ;
	left : 6px ;
	width : 100% ;
	height: 100% ;
	border-radius : 6px ;
	background: #000 ;
}
.macbook__topBord::after{
	content : "" ;
	position : absolute ;
	z-index : 1 ;
	bottom : -7px ;
	left : 8px ;
	width : 168px;
	height: 12px ;
	transform-origin : left bottom ;
	transform : rotate(-42deg) skew(-4deg);
	background : linear-gradient( -135deg ,  #C8C9C9 52% , #8C8C8C 56%);
}
.macbook__display{
	position : absolute ;
	z-index : 10 ;
	top : 17px ;
	left : 12px ;
	z-index : 2 ;
	width : calc( 100% - 12px ) ;
	height : calc( 100% - 18px ) ;
	background : linear-gradient( 45deg ,  #3BA9FF , #C82AFF);
}
.macbook__display::before{
	content : "" ;
	position : absolute ;
	z-index :  5 ;
	top : -9px ;
	left : -6px ;
	width : calc( 100% + 12px );
	height : calc( 100% + 18px );
	border-radius : 6px ;
	background : linear-gradient( 60deg ,  rgba(255,255,255,0) 60% , rgba(255,255,255,.3) 60% );
}
.macbook__load{
	position : relative ;
	width : 100% ;
	height : 100% ;
	background : #222;
	animation : display .4s 4.3s ease ;
	opacity : 1 ;
	animation-fill-mode : forwards ;
}
.macbook__load:before{
	content : "" ;
	position : absolute ;
	top : 0 ;
	left : 0 ;
	right : 0 ;
	bottom : 0 ;
	margin : auto ;
	width : 80px ;
	height : 6px ;
	border-radius : 3px ;
	box-sizing : border-box ;
	border : solid 1px #FFF ;
}
.macbook__load:after{
	content : "" ;
	position : absolute ;
	top : 0 ;
	left : 18px ;
	bottom : 0 ;
	margin : auto ;
	width : 0 ;
	height : 6px ;
	border-radius : 3px ;
	background : #FFF ;
	animation : load 2s 2s ease-out ;
	animation-fill-mode : forwards ;
}
.macbook__underBord{
	position : relative ;
	left : 42px ;
	bottom : -145px ;
	width : 150px ;
	height : 90px ;
	border-radius : 6px ;
	transform-origin : center ;
	transform : rotate(-30deg) skew(30deg);
	background :linear-gradient( -45deg ,  #C8C9C9 61% , #8C8C8C 66%);
	animation : modal .5s 1s ease-out ;
	opacity : 0 ;
	animation-fill-mode : forwards ;
}
.macbook__underBord::before{
	content : "" ;
	position : absolute ;
	z-index : 3 ;
	top : -8px ;
	left : 8px ;
	width : 100% ;
	height: 100% ;
	border-radius : 6px ;
	background : #DCDEDE ;
}
.macbook__underBord::after{
	content : "" ;
	position : absolute ;
	z-index : 2 ;
	top : -8px ;
	left : 12px ;
	width : 170px ;
	height : 15px ;
	transform-origin : top left ;
	background :linear-gradient( -45deg ,  #C8C9C9 61% , #8C8C8C 66%);
	transform : rotate(31deg) skew(-16deg);
}
.macbook__keybord{
	position : relative ;
	top : 0 ;
	left : 16px ;
	z-index : 3 ;
	border-radius : 3px ;
	width : calc( 100% - 16px );
	height : 45px;
	background : #C8C9C9 ;
}
.macbook__keybord::before{
	content : "" ;
	posi.........完整代码请登录后点击上方下载按钮下载查看