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