js+css实现简易图文编辑器代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：js+css实现简易图文编辑器代码，可实现背景换色、图文排版样式、图片大小及更换。

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    @import url("https://fonts.googleapis.com/css2?family=Varela+Round&display=swap");

:root {
	--ic: #fff;
	--cp: #33a8c7;
	--fsz: 16px;
	--isz: 34%;
	--tran: all 0.4s ease 0s;
	--bg: url(https://picsum.photos/800/600);
	--fds: drop-shadow(0px 1px 1px #0008) drop-shadow(0px -1px 1px #0004);
}

body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow-y: visible;
	overflow-x: hidden;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	font-family: "Varela Round", sans-serif;
}

aside {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	padding: 10px;
	background: #212121;
	display: flex;
	z-index: 3;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	filter: drop-shadow(2px 2px 5px #111);
}

aside:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: #212121;
	z-index: -2;
}

body > input {
	display: none;
}

section {
	position: absolute;
	padding: 50px 25px;
	z-index: 0;
	width: 100%;
	min-height: 100vh;
	box-sizing: border-box;
	left: 0;
	background: repeating-linear-gradient(
			0deg,
			transparent 0,
			transparent 1px,
			#00000060 2px
		),
		repeating-linear-gradient(
			90deg,
			transparent 0,
			transparent 1px,
			#00000060 2px
		),
		radial-gradient(ellipse at 50% 50%, var(--cp), #000) #000;
}

article {
	max-width: 800px;
	padding: 30px 50px;
	padding-left: 120px;
	border-radius: 8px;
	position: relative;
	overflow: hidden;
	margin: 0 auto;
	font-size: var(--fsz);
	font-family: var(--ffm);
	font-style: var(--fst);
}

article:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: var(--cp);
	z-index: -1;
	left: 0;
	top: 0;
	opacity: 0.25;
}

h2 {
	color: var(--cp);
	font-family: var(--ffm);
	font-size: calc(var(--fsz) * 2.5);
	font-style: var(--fst);
	text-align: center;
	margin-top: 10px;
	filter: var(--fds);
}

h2:before,
h2:after {
	content: "";
	background: var(--cp);
	width: 15px;
	height: 15px;
	display: inline-flex;
	border-radius: 100%;
	margin: 0 20px;
	position: relative;
	top: -1px;
	--sd: 20px;
	box-shadow: var(--sd) 0 0 -1px var(--cp),
		calc(var(--sd) * 2) 0 0px -2px var(--cp),
		calc(var(--sd) * 3) 0 0px -3px var(--cp),
		calc(var(--sd) * 4) 0 0px -4px var(--cp),
		calc(var(--sd) * 3) 0 0px -3px var(--cp),
		calc(var(--sd) * 4) 0 0px -4px var(--cp),
		calc(var(--sd) * 5) 0 0px -5px var(--cp),
		calc(var(--sd) * 5) 0 0px -5px var(--cp),
		calc(var(--sd) * 6) 0 0px -6px var(--cp),
		calc(var(--sd) * 7) 0 0px -7px var(--cp);
}

h2:before {
	--sd: -20px;
}

p {
	text-align: justify;
	text-shadow: 0px 1px 1px #fff6;
}

hr {
	border: 0;
	border-top: 5px dotted var(--cp);
	filter: var(--fds);
}

#img-post {
	width: var(--isz);
	float: right;
	margin: 0px 0px 10px 15px;
	border: 4px solid var(--cp);
	border-radius: 3px;
	padding: 2px;
	box-sizing: border-box;
	transform: var(--tran);
	filter: var(--fds);
}

cite {
	font-size: 18px;
	font-weight: bold;
	background: var(--cp);
	color: #0005;
	padding: 20px 30px;
	line-height: 25px;
	width: 33%;
	position: relative;
	text-transform: uppercase;
	float: left;
	text-align: center;
	margin: 5px 15px 5px 0;
	border-radius: 4px;
	text-shadow: 0 0 0px var(--cp), 0px -1px 1px #0008, 0px 1px 1px #fff8;
	filter: var(--fds);
}

cite:before,
cite:after {
	content: "''";
	font-size: 40px;
	line-height: 16px;
	bottom: -9px;
	position: relative;
	padding: 0 7px;
	filter: var(--fds);
}

/*** ICONS ***/

aside > label {
	width: 50px;
	height: 50px;
	background: #fff;
	margin: 20px 0;
	cursor: pointer;
	background: #fff0;
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 0 #212121;
	transition: var(--tran);
}

/*** Color ***/

label[for="color-picker"]:before {
	content: "";
	position: absolute;
	width: 30px;
	height: 10px;
	border-radius: 80% 10px 10px 80%;
	transform: rotate(-45deg);
	background: linear-gradient(45deg, var(--ic) 40%, #fff0 40%),
		linear-gradient(-90deg, var(--ic) 40%, #fff0 40%);
	box-shadow: -6px 0px 0 -3px var(--ic);
	margin-top: -3px;
	margin-left: 3px;
	box-shadow: 0 0 1px 3px var(--ic) inset, -6px 0px 0 -2px var(--ic);
}

label[for="color-picker"]:after {
	content: "";
	position: absolute;
	wi.........完整代码请登录后点击上方下载按钮下载查看