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

代码语言：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 : "" ;
	position : absolute ;
	bottom : -30px ;
	left : 0 ;
	right : 0 ;
	margin : 0 auto ;
	width : 40px ;
	height : 25px ;
	border-radius : 3px ;
	background : #C8C9C9 ;
}
.keybord{
	position : relative ;
	top : 2px ;
	left : 2px ;
	display : flex ;
	flex-direction : column ;
	width : calc( 100% - 3px ) ;
	height : calc( 100% - 4px ) ;
}
.keybord__touchbar{
	width : 100% ;
	height : 6px ;
	border-radius : 3px ;
	background : #000 ;
}
.keybord__keyBox{
	display : grid ;
	grid-template-rows : 3fr 1fr ;
  grid-template-columns : 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
	width  : 100% ;
	height : 24px;
	margin : 1px 0 0 0 ;
	padding : 0 0 0 1px ;
	box-sizing : border-box ;
	list-style : none ;
}
.keybord__key{
	position : relative ;
	width : 8px ;
	height : 7px ;
	margin : 1px ;
	background : #000 ;
}
.keybord__keyBox .keybord__key{
	transform : translate( 60px , -60px );
	animation : key .2s 1.4s ease-out ;
	animation-fill-mode : forwards ;
	opacity : 0 ;
}
.keybord__keyBox .keybord__key::before,
.keybord__keyBox .keybord__key::after{
	content : "" ;
	position : absolute ;
	left : 0 ;
	width : 100% ;
	height : 100% ;
	background : #000 ;
}
.keybord__key::before{
	top : 8px ;
	transform : translate( 20px , -20px );
	animation : key1 .2s 1.5s ease-out ;
	animation-fill-mode : forwards ;
}
.keybord__key::after{
	top : 16px ;
	transform : translate( 40px , -40px );
	animation : key2 .2s 1.6s ease-out ;
	animation-fill-mode : forwards ;
}
.keybord__keyBox .key--12::before{
	width : 10px ;
}
.keybord__keyBox .key--13::before{
	height : 10px ;
}
.key--01{
	grid-row: 1 / 2;
  grid-column: 1 / 2;
}
.key--02{
	grid-row: 1 / 2 ;
  grid-column: 2 / 3;
}
.key--03{
	grid-row: 1 / 2 ;
  grid-column: 3 / 4 ;
}
.key--04{
	grid-row:.........完整代码请登录后点击上方下载按钮下载查看