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