div+css布局实现笔记本电脑开机打开网页点击粒子碎片动画效果代码-html代码-BFW代码库

代码语言：html
代码描述：div+css布局实现笔记本电脑开机打开网页点击粒子碎片动画效果代码，点击笔记本电脑的开机键，开机后点击网页的两个按钮看效果。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>
  <meta charset="UTF-8">
  
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap" rel="stylesheet">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Shadows+Into+Light+Two&display=swap" rel="stylesheet">
  
<style>
body {
	background: rgb(83, 80, 80);
	background: radial-gradient(
		circle,
		rgb(114, 113, 113) 32%,
		rgb(75, 74, 74) 100%
	);
	color: white;
}

body.active {
	background: rgb(83, 80, 80);
	background: radial-gradient(circle, rgb(99, 98, 98) 32%, rgb(34, 34, 34) 100%);
}

/* Basis styling voor de notificatie */
.notification {
	position: fixed;
	bottom: -100px; /* Startpositie, buiten het scherm */
	right: 20px;
	background-color: #333;
	font-family: "Shadows Into Light Two", serif;
	color: #fff;
	padding: 15px 20px;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	opacity: 0;
	transition: all 0.5s ease; /* Smooth effect */
}

/* Actieve class voor het tonen van de notificatie */
.notification.show {
	bottom: 20px; /* Eindpositie, zichtbaar op het scherm */
	opacity: 1;
	z-index: 9999;
}

h4 {
	margin: 0;
	font-size: 20px;
	letter-spacing: 3px;
	color: orangered;
}

p {
	letter-spacing: 3px;
}

.container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.screen {
	margin: auto;
	width: 763px;
	height: 395px;
	border: 1px solid #000000;
	background-color: rgb(0, 0, 0);
	color: #f1f1f1;
	margin-left: -1px;
	border: 6px solid rgb(32, 32, 32);
	border-bottom: 20px solid rgb(32, 32, 32);
	outline: 3px solid #3a3a3a;
	border-radius: 5px;
	background: rgb(85, 85, 85);
	background: linear-gradient(0deg, rgb(29, 29, 29) 0%, rgb(3, 3, 3) 100%);
	box-shadow: 10px 10px 20px rgb(0, 0, 0);
}

.screen-content {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-family: "Audiowide", cursive;
	font-size: 1.5rem;
	letter-spacing: 0.5px;
	display: none;
}

/*screen content*/

.screen-content.active {
	width: 100%;
	height: 100%;
	display: flex;
	cursor: pointer;
	overflow: hidden;
	background-color: black;
	border: 1px solid #313030;
}

.screen-tt {
	display: flex;
	width: 756px;
	height: 20px;
	cursor: pointer;
	background-color: #222;
}

.codepen-tab {
	display: flex;
	padding-left: 5px;
	font-family: "Sans-Serif";
	align-items: center;
	width: 75px;
	height: 18px;
	color: #f1f1f1;
	font-size: 0.6rem;
	border-radius: 2px;
	text-align: center;
	background: #555;
}

span.tab-close {
	position: absolute;
	left: 80px;
	font-size: 0.6rem;
	font-weight: 800;
}

.br-title {
	width: 82%;
	text-align: center;
}

.browser-min,
.browser-wide,
.browser-close {
	color: #f1f1f1;
	font-size: 0.6rem;
	text-align: center;
	width: 20px;
}

.screen-work {
	display: flex;
	align-items: center;
	width: 756px;
	height: 20px;
	font-size: 0.7rem;
	cursor: pointer;
	background-color: #555;
}

.arrow-left,
.arrow-right,
.refresh {
	width: 20px;
	color: #fff;
	text-align: center;
}

.arrow-right {
	color: #bbb;
}

.refresh {
	font-size: 0.8rem;
	margin-bottom: 3px;
	color: #bbb;
}

.home-icon {
	width: 50px;
}

.lock-icon {
	width: 20px;
	height: 20px;
	font-size: 0.8rem;
	text-align: center;
	color: #f1f1f1;
}

.url-container {
	display: flex;
	align-items: center;
	width: 450px;
	height: 14px;
	cursor: pointer;
	background-color: #444;
	border-radius: 3px;
}

.url-form {
	font-family: "sans-serif";
	width: 450px;
	color: #f1f1f1;
	font-size: 0.5rem;
	text-align: left;
}

.https {
	color: rgb(7, 226, 7);
	font-size: 0.5rem;
}

.star-icon {
	width: 22px;
	height: 20px;
	font-size: 1.1rem;
	text-align: center;
	color: red;
	padding-bottom: 5px;
}

.hamburger-icon {
	position: absolute;
	right: 15px;
	width: 20px;
	height: 20px;
	font-size: 0.7rem;
	text-align: center;
	color: #f1f1f1;
}

/* end screen tt */

/* start screen middle */

.cpc-container {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 756px;
	height: 330px;
	gap: 20px;
	background-color: antiquewhite;
}

.button-container {
	position: relative;
}

button {
	padding: 6px 12px;
	cursor: pointer;
	border: none;
}

button.trick-button {
	color: black;
	background-color: orange;
	text-shadow: 1px 2px 2px #555;
	box-shadow: 1px 1px 1px #555;
	border-radius: 2px;
}

button.treat-button {
	color: orange;
	background-color: black;
	text-shadow: 1px 2px 2px #555;
	box-shadow: 1px 1px 1px #555;
	border-radius: 2px;
}

/* the trick particles */

/* Stijl voor de knop */
#ghostButton {
	padding: 6px 12px;
	background-color: #ffa500; /* Halloween oranje */
	color: white;
	border: none;
	cursor: pointer;
}
/* Basisstijl voor spookjes */
.ghost {
	position: absolute;
	font-size: 30px;
	opacity: 0;
	transition: opacity 0.5s, transform 1.5s;
}

/* end screen middle */

/* start screen bottom taskbar */
.screen-bb {
	display: flex;
	align-items: center;
	width: 756px;
	height: 20px;
	font-size: 0.7rem;
	cursor: pointer;
	background-color: #444;
}

.os-icon {
	width: 20px;
	padding-top: 2px;
	padding-left: 5px;
	font-size: 0.8rem;
	text-align: left;
	color: #f1f1f1;
}

.firefox-icon {
	width: 600px;
	padding-top: 2px;
	padding-left: 5px;
	font-size: 0.8rem;
	text-align: left;
	color: #f1f1f1;
}

.speaker-icon {
	width: 18px;
	padding-top: 1px;
	font-size: 0.6rem;
	text-align: center;
	color: #f1f1f1;
}

.on-off-icon {
	width: 20px;
	padding-top: 3px;
	font-size: 0.6rem;
	text-align: center;
	color: #f1f1f1;
}

#date-time {
	position: absolute;
	font-family: "sans-serif";
	right: 25px;
	color: #f1f1f1;
	font-size: 8px;
}

/* end screen bottom taskbar */

/*end screen*/

.keyboard {
	margin: auto;
	padding: 5px;
	padding-top: 1rem;
	width: 760px;
	display: flex;
	gap: 5px;
	flex-direction: column;
	border: 4px solid rgb(63, 62, 62);
	outline: 3px solid #222222;
	border-radius: 5px;
	font-family: "Audiowide", cursive;
	font-size: 0.8rem;
	letter-spacing: 0.5px;
	background: rgb(85, 85, 85);
	background: linear-gradient(0deg, rgb(58, 58, 58) 0%, rgb(43, 42, 42) 100%);
	box-shadow: 10px 10px 20px rgb(0, 0, 0);
}

.power {
	width: 35px;
	height: 20px;
	border: 1px solid #000000;
	border-radius: 4px;
	text-align: center;
	font-size: 14px;
	background-color: #383737;
	background: linear-gradient(to bottom, #4e4e4e 0%, #111111 100%);
	border: 3px solid #000;
	outline: 1px solid #555;
	cursor: pointer;
}

/* on and off styles for the power button */

.mini-text {
	font-size: 0.6rem;
}

.row {
	display: flex;
	column-gap: 5px;
	flex-direction: row;
	width: 760px;
}

.key {
	width: 37px;
	height: 30px;
	    line-height: 30px;
	color: #f1f1f1;
	border-radius: 5px;
	border: 3px solid #000;
	outline: 1px solid #555;
	text-align: center;
	background: rgb(85, 85, 85);
	background: linear-gradient(
		0deg,
		rgba(85, 85, 85, 1) 0%,
		rgba(17, 17, 17, 1) 100%
	);
}

.brand {
	font-size: 0.8rem;
	letter-spacing: 0.6px;
	text-shadow: 1px 1px 1px rgb(0, 0, 0);
}

.space {
	width: 38px;
}

.small-space {
	width: 10px;
}

.bcksp {
	width: 65px;
	height: 30px;
	color: #f1f1f1;
	border-radius: 3px;
	border: 3px solid #000;
	outline: 1px solid #555;
	text-align: center;
	background: rgb(85, 85, 85);
	background: linear-gradient(
		0deg,
		rgba(85, 85, 85, 1) 0%,
		rgb(39, 39, 39) 100%
	);
}

.tab {
	width: 60px;
	height: 30px;
	color: #f1f1f1;
	border-radius: 3px;
	border: 3px solid #000;
	outline: 1px solid #555;
	text-align: center;
	background: rgb(85, 85, 85);
	background: linear-gradient(
		0deg,
		rgba(85, 85, 85, 1) 0%,
		rgba(17, 17, 17, 1) 100%
	);
}

.tab-r {
	width: 47px;
	height: 30px;
	color: #f1f1f1;
	border-radius: 3px;
	border: 3px solid #000;
	outline: 1px solid #555;
	text-align: center;
	background: rgb(85, 85, 85);
	background: linear-gradient(
		0deg,
		rgba(85, 85, 85, 1) 0%,
		rgba(17, 17, 17, 1) 100%
	);
}

.caps {
	width: 85px;
	height: 30px;
	color: #f1f1f1;
	border-radius: 3px;
	border: 3px solid #000;
	outline: 1px solid #555;
	text-align: center;
	background: rgb(85, 85, 85);
	background: linear-gradient(
		0deg,
		rgba(85, 85, 85, 1) 0%,
		rgba(17, 17, 17, 1) 100%
	);
}

.caps-l {
	width: 60px;
	height: 30px;
	color: #f1f1f1;
	border-radius: 3px;
	border: 3px solid #000;
	outline: 1px solid #555;
	text-align: center;
	background: rgb(85, 85, 85);
	background: linear-gradient(
		0deg,
		rgba(85, 85, 85, 1) 0%,
		rgba(17, 17, 17, 1) 100%
	);
}

.enter {
	width: 70px;
	height: 30px;
	color: #f1f1f1;
	border-radius: 3px;
	border: 3px solid #000;
	outline: 1px solid #555;
	text-align: center;
	background: rgb(85, 85, 85);
	background: linear-gradient(
		0deg,
		rgba(85, 85, 85, 1) 0%,
		rgba(17, 17, 17, 1) 100%
	);
}

.shift {
	width: 80px;
	height: 30px;
	color: #f1f1f1;
	border-radius: 3px;
	border: 3px solid #000;
	outline: 1px solid #555;
	text-align: center;
	background: rgb(85, 85, 85);
	background: linear-gradient(
		0deg,
		rgba(85, 85, 85, 1) 0%,
		rgba(17, 17, 17, 1) 100%
	);
}

.shift-r {
	width: 80px;
	height: 30px;
	color: #f1f1f1;
	border-radius: 3px;
	border: 3px solid #000;
	outline: 1px solid #555;
	text-align: center;
	background: rgb(85, 85, 85);
	background: linear-gradient(
		0deg,
		rgba(85, 85, 85, 1) 0%,
		rgba(17, 17, 17, 1) 100%
	);
}

.spatie {
	width: 248px;
	height: 30px;
	color: #f1f1f1;
	border-radius: 3px;
	border: 3px solid #000;
	outline: 1px solid #555;
	text-align: center;
	background: rgb(85, 85, 85);
	background: linear-gradient(
		0deg,
		rgba(85, 85, 85, 1) 0%,
		rgb(17, 17, 17, 1) 100%
	);
}

.alt {
	width: 60px;
	height: 30px;
	color: #f1f1f1;
	border-radius: 3px;
	border: 3px solid #000;
	outline: 1px solid #555;
	text-align: center;
	background: rgb(85, 85, 85);
	background: linear-gradient(
		0deg,
		rgba(85, 85, 85, 1) 0%,
		rgba(17, 17, 17, 1) 100%
	);
}

.crt {
	width: 45px;
	height: 30px;
	color: #f1f1f1;
	border-radius: 3px;
	border: 3px solid #000;
	outline: 1px solid #555;
	text-align: center;
	background: rgb(85, 85, 85);
	background: linear-gradient(
		0deg,
		rgba(85, 85, 85, 1) 0%,
		rgba(17, 17, 17, 1) 100%
	);
}

/*.line {
    margin: auto;
    margin-top: 4px;
    width: 50px;
    height: 2px;
    background-color: #f1f1f1;
}*/

.touchpad {
	margin: auto;
	margin-top: 1rem;
	margin-bottom: 0.5rem;
	width: 200px;
	height: 120px;
	border: 1px solid #333;
	outline: 1px solid #555;
	border-radius: 10px;
	background: rgb(85, 85, 85);
	background: radial-gradient(
		circle,
		rgba(85, 85, 85, 1) 0%,
		rgba(17, 17, 17, 1) 100%
	);
}

/* Styling voor de 'power' div */
#powerToggle {
	display: inline-block;
	color: white;
}

#powerToggle.active {
	background-color: green;
}

/* De standaard key styling */
.key {
	color: white;
}

.key.active {
	color: lightblue;
	box-shadow: 1px 1px 1px 1px lightblue;
}

/* De standaard tab styling */
.color1 {
	color: white;
}

/* Als de tab div actief is, wordt de kleur blauw */
.color1.active {
	color: orange;
	box-shadow: 1px 1px 1px 1px orange;
}

.color2 {
	color: white;
}

.color2.active {
	display: inline-block;
	background-color: black;
}

.color3 {
	color: white;
}

.color3.active {
	color: rgb(57, 206, 12);
	box-shadow: 1px 1px 1px 1px rgba(11, 226, 4, 0.658);
}

@media screen and (max-width: 760px) {
	.keyboard {
		width: 650px;
		font-size: 0.6rem;
	}

	.key {
		width: 25px;
		height: 20px;
		font-size: 0.5rem;
	}

	.tab {
		width: 43px;
		height: 20px;
		font-size: 0.5rem;
	}

	.tab-r {
		width: 25px;
		height: 20px;
		font-size: 0.5rem;
	}

	.caps-l {
		width: 55px;
		height: 20px;
		font-size: 0.5rem;
	}

	.caps {
		width: 50px;
		height: 20px;
		font-size: 0.5rem;
	}

	.shift {
		width: 70px;
		height: 20px;
		font-size: 0.5rem;
	}

	.shift-r {
		width: 70px;
		height: 20px;
		font-size: 0.5rem;
	}

	.spatie {
		width: 220px;
		height: 20px;
		font-size: 0.5rem;
	}

	.enter {
		width: 50px;
		height: 20px;
		font-size: 0.5rem;
	}

	.bcksp {
		width: 43px;
		height: 20px;
		font-size: 0.5rem;
	}

	.crt {
		width: 50px;
		height: 20px;
		font-size: 0.5rem;
	}

	.alt {
		width: 20px;
		height: 20px;
		font-size: 0.5rem;
	}

	.up {
		margin-left: 40px;
	}

	.space {
		width: 7px;
		height: 20px;
	}

	.delete {
		width: 20px;
		height: 20px;
		font-size: 0.5rem;
	}

	.line {
		width: 30px;
		height: 1px;
		margin-top: 6px;
	}

	.touchpad {
		width: 100px;
		height: 70px;
	}
}
</style>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tsparticles.confetti.bundle.2.11.0.js"></script>
  <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
</head>

<body translate="no">
  
<!--- begin notificatie  -->
<div id="notification" class="notification">
	<h4>Happy Halloween!</h4>
	<p>Press the <span style="color: orange;">power</span> button on the laptop!</p>
	<p>Than press <span style="color: orange;">"Trick or Treat" button.</span></p>
	<p><span style="color: orangered;">Have Fun!</span></p>
</div>
<div class="container">

	<!--- begin screen -->
	<div class="screen">
		<div class="screen-content">

			<div class="screen-content">
				<div class="screen-tt">
					<div class="codepen-tab">Bfw<span class="tab-close">✕</span></div>
					<div class="br-title"></div>
					<div class="browser-min"><span class="browser-min">−</span></div>
					<div class="browser-wide"><span class="browser-wide">⌑</span></div>
					<div class="browser-close"><span class="browser-close">✕</span></div>
					<!--  end screen tt -->
				</div>
				<div class="screen-work">

					<div class="arrow-left">&#129128;</div>
					<div class="arrow-right">&#129130;</div>
					<div class="refresh">&#10227;</div>
					<div class="home-icon"></div>

					<div class="url-container">

						<div class="schild-icon"></div>
						<div class="lock-icon"><span style="font-size:0.4rem;">🔒</span></div>
						<div class="url-form"><span class="https">https</span>://bfw.wiki/</div>
						<div class="magnifying-glass"></div>
						<div class="translate-icon"></div>
						<div class="star-icon">&#11089;</div>

						<!--end url container -->
					</div>

					<div class=""></div>
					<div class="user-icon">
						<!-- optioneel -->
					</div>
.........完整代码请登录后点击上方下载按钮下载查看