基于CSS3的苹果套件

最新推荐文章于 2023-02-20 09:09:41 发布

幻狐岚

最新推荐文章于 2023-02-20 09:09:41 发布

阅读量606

点赞数

分类专栏：前端文章标签： CSS3

本文链接：https://blog.csdn.net/huanhu821011/article/details/50001587

版权

这篇博客展示了一个完全使用CSS3编写的苹果套件模拟，包括Mac电脑、键盘、触摸板和iPhone。通过复杂的CSS样式和渐变，实现了逼真的视觉效果，如背景纹理、阴影和边框。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf8">
	<title>MAC</title>
	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	body{
		min-width: 1580px;
		width: 100%;
		height: 100%;
		text-align: center;
  		background-color: #282828;
  		background-image: 
			-webkit-radial-gradient(black 15%, transparent 16%), 
			-webkit-radial-gradient(black 15%, transparent 16%), 
			-webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%), 
			-webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%);
		background-image: 
			radial-gradient(black 15%, transparent 16%), 
			radial-gradient(black 15%, transparent 16%), 
			radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%), 
			radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%);
		background-position: 0 0px, 8px 8px, 0 1px, 8px 9px;
		background-size: 16px 16px;
	}
	.board{
		display: inline-block;
		width: 600px;
		height: 450px;
		position: relative;
		background: rgba(250,250,250,1);
		background-image: linear-gradient(60deg,rgba(250,250,250,1) 25%,rgba(210,210,210,1));
		background-image: -webkit-linear-gradient(60deg,rgba(250,250,250,1) 25%,rgba(210,210,210,1));
		box-shadow: 0px 3px 3px rgba(0,0,0,0.9);
		border:1px solid #ccc;
		border-radius: 20px;
		margin: 80px auto;
	}
	.board:before{
		content: '';
		width: 735px;
		height: 20px;
		position: absolute;
		top:-20px;
		left: -66.5px;
		background: rgb(210,210,210);
		border-radius: 0px 0px 3px 3px;
		border-top-left-radius: 390px 18px;
		border-top-right-radius: 390px 18px;
		border-bottom: 2px solid rgba(0,0,0,0.9);
		background:-webkit-linear-gradient(top,rgb(210,210,210) 50%,rgb(255,255,255));
		background:linear-gradient(top,rgb(210,210,210) 50%,rgb(255,255,255));
		box-shadow: inset 0px 5px 3px rgb(160,160,160);
	}
	.board:after{
		content: '';
		position: absolute;
		display: block;
		width: 96px;
		height: 5px;
		bottom:0;
		left: 252px;
		background: rgb(210,210,210);
		border-top-left-radius: 96px 40px;
		border-top-right-radius: 96px 40px;
		background:-webkit-linear-gradient(top,#c1c0c6 90%,#fff 95%,#747474);
		background:linear-gradient(top,#c1c0c6 90%,#fff 95%,#747474);
		box-shadow: inset 0px 5px 3px rgb(160,160,160);
	}
	.blackbar{
		margin-top: 2px;
		width: 450px;
		height: 18px;
		left: 75px;
		position: absolute;
		border-radius: 2px;
		border-bottom: 2px solid #ccc;
		border-right: 2px solid #ccc;
		background: -webkit-linear-gradient(to bottom,#161719 ,#151517 20%,#000 15%,#161719);
		background: linear-gradient(to bottom,#161719 ,#151517 20%,#000 15%,#161719);
	}
	.keyboard{
		position: absolute;
		width:537px;
		height: 216px;
		left: 31.5px;
		top: 35px;
		border: 1px solid rgb(180,180,180);
		border-radius: 8px;
		background:-webkit-linear-gradient(60deg,rgba(250,250,250,1) 25%,rgba(210,210,210,1));
		background:linear-gradient(60deg,rgba(250,250,250,1) 25%,rgba(210,210,210,1));
		box-shadow:-2px 0px 2px rgb(180,180,180) inset,
					0px -3px 3px rgb(180,180,180) inset,
					2px 0px 2px rgb(180,180,180) inset,
					0px 2px 2px #fff inset;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-sele

最低0.47元/天解锁文章

幻狐岚

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于CSS3的苹果套件

MAC *{ margin: 0; padding: 0; } body{ min-width: 1580px; width: 100%; height: 100%; text-align: center; background-color: #282828; background-image: -webkit-radial-gradien
复制链接

扫一扫

专栏目录