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 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;
width: 4px;
height: 17px;
border-radius: 5px;
transform: rotate(-45deg);
background: var(--ic);
margin-top: -11px;
margin-left: 10px;
}
/*** Font ***/
label[for="font-picker"]:before {
content: "";
position: absolute;
width: 6px;
height: 6px;
border-radius: 1px;
background: var(--ic);
margin-top: -22px;
margin-left: -20px;
box-shadow: 22px 0 0 0 var(--ic), 22px 22px 0 0 var(--ic), 0 22px 0 0 var(--ic);
}
label[for="font-picker"]:after {
content: "T";
font-family: serif !important;
position: absolute;
width: 24px;
height: 24px;
background: linear-gradient(
0deg,
var(--ic) 0 2px,
#fff0 0 calc(100% - 2px),
var(--ic) 0 100%
),
linear-gradient(
90deg,
var(--ic) 0 2px,
#fff0 0 calc(100% - 2px),
var(--ic) 0 100%
);
margin-top: 0px;
margin-left: 1px;
font-size: 19px;
font-weight: bold;
line-height: 23px;
text-align: center;
color: var(--ic);
}
/*** Image ***/
label[for="image-picker"]:before {
content: "";
position: absolute;
width: 28px;
height: 10px;
border-radius: 1px 1px 0 0;
margin-top: -12px;
margin-left: 0px;
background: radial-gradient(
circle at 6px 6px,
#fff0 0 2px,
var(--ic) 3px 100%
);
}
label[for="image-picker"]:after {
content: "";
position: absolute;
width: 28px;
height: 14px;
border-radius: 0 0 1px 1px;
margin-top: 11px;
margin-left: 0px;
background: linear-gradient(0deg, var(--ic) 0 3px, #fff0 0 100%),
linear-gradient(-125deg, var(--ic) 0 9px, #fff0 10px 100%),
linear-gradient(125deg, var(--ic) 0 11px, #fff0 12px 100%),
conic-gradient(
from -55deg at 45% 45%,
#fff0 0,
var(--ic) 1% 25%,
#fff0 25% 100%
);
}
/*** Checked Pickers ***/
input#color-picker:checked ~ section aside label[for="color-picker"],
input#font-picker:checked ~ section aside label[for="font-picker"],
input#image-picker:checked ~ section aside label[for="image-picker"],
aside > label:hover {
--ic: var(--cp);
box-shadow: 0 0 0 25px #212121;
transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
/*** Panels ***/
.panel {
position: absolute;
width: 250px;
height: 300px;
background: #222;
left: -200px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
align-items: center;
justify-content: center;
z-index: -3;
transition: var(--tran);
border-radius: 8px;
}
.panel:before {
content: "";
border: 25px solid #fff0;
position: absolute;
border-right: 15px solid #222;
left: -35px;
top: calc(50% - 25px);
}
.panel:after {
content: "COLOR PICKER";
position: absolute;
top: -50px;
background: #212121;
color: var(--cp);
width: 100%;
text-align: center;
border-radius: 5px 5px 0 0;
padding: 15px 0;
text-shadow: 0 -1px 1px #000, 0 1px 1px #fff4;
display: none;
}
.fp-panel:after {
content: "FONT PICKER";
}
/*** Panel Labels ***/
.panel label {
--bgc: #e6e6e6;
background: var(--bgc);
width: 45px;
height: 45px;
position: relative;
display: block;
border-radius: 100%;
border: 1px solid #fff4;
margin: 12px 12px 30px 12px;
box-shadow: 0px 5px 0 0 #0004, 0px 5px 0 0 var(--bgc), 0px 5px 5px 3px #000;
cursor: pointer;
transition: var(--tran);
}
.fp-panel label {
--bgc: #343434;
position: relative;
border-radius: 5px;
border: 1px solid #53535344;
transition: var(--tran);
color: #fff;
text-align: center;
line-height: 49px;
}
/*** Show Picker Panels ***/
input#color-picker:checked ~ section aside label[for="color-picker"] .cp-panel,
input#font-picker:checked ~ section aside label[for="font-picker"] .fp-panel,
input#image-picker:checked ~ section aside label[for="image-picker"] .ip-panel {
left: 100px;
}
/*** Colors ***/
label[for="cp-blue"] {
--bgc: #33a8c7;
}
label[for="cp-cyan"] {
--bgc: #52e3e1;
}
label[for="cp-green"] {
--bgc: #a0e426;
}
label[for="cp-yellow"] {
--bgc: #fdf148;
}
label[for="cp-orange"] {
--bgc: #ffab00;
}
label[for="cp-red"] {
--bgc: #ff5b57;
}
label[for="cp-pink"] {
--bgc: #f050ae;
}
label[for="cp-violet"] {
--bgc: #d883ff;
}
label[for="cp-purple"] {
--bgc: #9336fd;
}
input#cp-blue:checked ~ * {
--cp: #33a8c7;
}
input#cp-cyan:checked ~ * {
--cp: #52e3e1;
}
input#cp-green:checked ~ * {
--cp: #a0e426;
}
input#cp-yellow:checked ~ * {
--cp: #fdf148;
}
input#cp-orange:checked ~ * {
--cp: #ffab00;
}
input#cp-red:checked ~ * {
--cp: #ff5b57;
}
input#cp-pink:checked ~ * {
--cp: #f050ae;
}
input#cp-violet:checked ~ * {
--cp: #d883ff;
}
input#cp-purple:checked ~ * {
--cp: #9336fd;
}
/*** Panel Labels ***/
label[for^="cp-"]:before,
label[for^="fp-"]:before,
label[for^="ip-"]:before {
content: "";
position: absolute;
color: #fff;
font-size: 10px;
width: 100%;
text-align: center;
top: 60px;
line-height: 12px;
display: block;
transition: var(--tran);
}
label[for="cp-blue"]:before {
content: "BLUE";
}
label[for="cp-cyan"]:before {
content: "CYAN";
}
label[for="cp-green"]:before {
content: "GREEN";
}
label[for="cp-yellow"]:before {
content: "YELLOW";
}
label[for="cp-orange"]:before {
content: "ORANGE";
}
label[for="cp-red"]:before {
content: "RED";
}
label[for="cp-pink"]:before {
content: "PINK";
}
label[for="cp-violet"]:before {
content: "VIOLET";
}
label[for="cp-purple"]:before {
content: "PURPLE";
}
label[for^="fp-"]:first-letter {
font-size: 23px;
}
label[for="fp-ss"]:before {
content: "SMALL";
}
label[for="fp-sm"]:before {
content: "MEDIUM";
}
label[for="fp-sb"]:before {
content: "BIG";
}
label[for="fp-f1"]:before {
content: "VARELA";
}
label[for="fp-f2"]:before {
content: "ARIAL";
}
label[for="fp-f3"]:before {
content: "SERIF";
}
label[for="fp-si"]:before {
content: "ITALIC";
}
label[for="fp-sn"]:before {
content: "NORMAL";
}
label[for="fp-so"]:before {
content: "OBLIQUE";
}
/*** Checked Colors / Fonts / Image Pseudo ***/
input#cp-blue:checked ~ section aside label[for="cp-blue"]:before,
input#cp-cyan:checked ~ section aside label[for="cp-cyan"]:before,
input#cp-green:checked ~ section aside label[for="cp-green"]:before,
input#cp-yellow:checked ~ section aside label[for="cp-yellow"]:before,
input#cp-orange:checked ~ section aside label[for="cp-orange"]:before,
input#cp-red:checked ~ section aside label[for="cp-red"]:before,
input#cp-pink:checked ~ sectionaside label[for="cp-pink"]:before,
input#cp-violet:checked ~ section aside label[for="cp-violet"]:before,
input#cp-purple:checked ~ section aside label[for="cp-purple"]:before,
input#fp-ss:checked ~ section aside label[for="fp-ss"]:before,
input#fp-sm:checked ~ section aside label[for="fp-sm"]:before,
input#fp-sb:checked ~ section aside label[for="fp-sb"]:before,
input#fp-f1:checked ~ section aside label[for="fp-f1"]:before,
input#fp-f2:checked ~ section aside label[for="fp-f2"]:before,
input#fp-f3:checked ~ section aside label[for="fp-f3"]:before,
input#fp-si:checked ~ section aside label[for="fp-si"]:before,
input#fp-sn:checked ~ section aside label[for="fp-sn"]:before,
input#fp-so:checked ~ section aside label[for="fp-so"]:before,
input#ip-34:checked ~ section aside label[for="ip-34"]:before,
input#ip-50:checked ~ section aside label[for="ip-50"]:before,
input#ip-100:checked ~ section aside label[for="ip-100"]:before {
transform: translateY(-4px);
color: var(--cp);
transition: var(--tran);
}
/*** Checked Colors / Fonts / Image Size ***/
input#cp-blue:checked ~ section aside label[for="cp-blue"],
input#cp-cyan:checked ~ section aside label[for="cp-cyan"],
input#cp-green:checked ~ section aside label[for="cp-green"],
input#cp-yellow:checked ~ section aside label[for="cp-yellow"],
input#cp-orange:checked ~ section aside label[for="cp-orange"],
input#cp-red:checked ~ section aside label[for="cp-red"],
input#cp-pink:checked ~ section aside label[for="cp-pink"],
input#cp-violet:checked ~ section aside label[for="cp-violet"],
input#cp-purple:checked ~ section aside label[for="cp-purple"],
input#fp-ss:checked ~ section aside label[for="fp-ss"],
input#fp-sm:checked ~ section aside label[for="fp-sm"],
input#fp-sb:check.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0