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 :.........完整代码请登录后点击上方下载按钮下载查看