div+css实现移动风格打开载入单选框选择效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：div+css实现移动风格app打开载入单选框选择效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>
  <meta charset="UTF-8">
  

  
  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Rampart+One&amp;display=swap'>
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap");

:root {
	--main-bg-color: #969182;
	--scnd-bg-color: rgba(1, 1, 1, 0.2);
}

#toggleFullScreen {
	position: absolute;
	bottom: 0;
	right: 0;
	margin: 20px;
	background-color: white;
	border: none;
	padding: 10px;
	cursor: pointer;
	transition: transform 0.3s;
}

#toggleFullScreen:hover {
	transform: scale(0.9);
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--main-bg-color);
	font-family: "Lato", sans-serif;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1003%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(36%2c 38%2c 45%2c 1)'%3e%3c/rect%3e%3cpath d='M437.69 595.14C565.91 557.62 522.92 195.78 792.17 195.24 1061.42 194.7 1314.85 422 1501.13 424.84' stroke='rgba(129%2c 145%2c 161%2c 0.58)' stroke-width='2'%3e%3c/path%3e%3cpath d='M755.73 623.47C890.06 548.18 816.61 99.36 1068.57 92.85 1320.53 86.34 1532.66 253.93 1694.26 255.25' stroke='rgba(129%2c 145%2c 161%2c 0.58)' stroke-width='2'%3e%3c/path%3e%3cpath d='M204.81 596.61C389.9 586.96 514.28 265.6 864.63 258.55 1214.98 251.5 1356.11 124.83 1524.45 124.15' stroke='rgba(129%2c 145%2c 161%2c 0.58)' stroke-width='2'%3e%3c/path%3e%3cpath d='M346.16 577.83C469.18 564.06 541.72 294.87 751.25 293.06 960.78 291.25 953.79 363.06 1156.34 363.06 1358.88 363.06 1458.66 293.32 1561.43 293.06' stroke='rgba(129%2c 145%2c 161%2c 0.58)' stroke-width='2'%3e%3c/path%3e%3cpath d='M506.91 660.05C592.71 656.63 563.28 525.16 818.76 516.13 1074.23 507.1 1272.76 252.97 1442.45 247.33' stroke='rgba(129%2c 145%2c 161%2c 0.58)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1003'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
	background-size: cover;
}

.phone {
	--phone-bg-color: #596470;
	--phone-width: 250px;
	--phone-ratio: 2;
	--phone-height: calc(var(--phone-width) * var(--phone-ratio));
	width: var(--phone-width);
	height: var(--phone-height);
	background: var(--phone-bg-color);
	display: block;
	border-radius: 30px;
	border: 5px solid var(--scnd-bg-color);
	position: relative;
	overflow: hidden;
}

.phone::before {
	content: "";
	position: absolute;
	left: 25%;
	top: 0;
	width: 50%;
	height: 3%;
	background: var(--scnd-bg-color);
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
}

.screen {
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	flex-direction: column;
}

#loading {
	background-color: rgba(1, 1, 1, 0.7);
	animation: hideX 0.8s forwards ease-in-out 2s;
	transform-origin: left;
}

#form {
	transform-origin: left;
	background-color: rgba(1, 1, 1, 0.5);
	transform: translateX(-100%);
	animation: showX 0.8s forwards ease-in-out 2s;
}

#loading span {
	display: inline-block;
	font-size: 2em;
	margin: 0 5px;
}

#loading-bar {
	--bar-height: 7px;
	width: 70%;
	border-radius: var(--bar-height);
	height: var(--bar-height);
	background-color: transparent;
	margin-top: 30px;
	border: 1px solid whitesmoke;
	position: relative;
}

#loading-bar::after {
	--bar-margin: 4px;
	content: "";
	width: calc(100% - var(--bar-margin));
	background-color: wheat;
	height: 1px;
	position: absolute;
	top: 2px;
	transform: scaleX(0);
	left: calc(var(--bar-margin) / 2);
	animation: slideX 2s forwards ease-in-out;
	transform-origin: left;
}

@keyframes slideX {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}

@keyframes hideX {
	from {
		transform: translateX(0);
	}
	to {
		transform: translate(100%);
	}
}

@keyframes showX .........完整代码请登录后点击上方下载按钮下载查看