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

js+css实现简易图文编辑器代码

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