vue-color实现多种渐变色css代码生成器效果代码
代码语言：html
所属分类：选择器
代码描述：vue-color实现多种渐变色css代码生成器效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
@import url("https://fonts.googleapis.com/css?family=Roboto:400,900");
@import url("https://fonts.googleapis.com/css?family=Baloo:400,900");
@import url("https://fonts.googleapis.com/css?family=Fredoka+One");
body {
background-color: gray;
font-size: 16px;
margin: 0;
}
body * {
box-sizing: border-box;
font-family: "Roboto", sans-serif;
/* iOS Safari */
-webkit-touch-callout: none;
/* Safari */
-webkit-user-select: none;
/* Konqueror HTML */
-khtml-user-select: none;
/* Firefox */
-moz-user-select: none;
/* Internet Explorer/Edge */
-ms-user-select: none;
/* Non-prefixed version, currently supported by Chrome and Opera */
user-select: none;
}
#background-display {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
transition: transform 0.3s linear;
background: linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), white;
background-position: 0 0, 1em 1em;
background-size: 2em 2em;
}
#background-display .show-gradient {
width: 100%;
height: 100%;
}
#background-display.show-social-networks {
transform: translatey(-10vh);
}
#dont-use-ie {
position: fixed;
top: 0;
left: 0;
width: 100vw;
padding: 0.8em;
display: flex;
font-size: 1.1em;
background: #fde073;
animation: show-ie 0.5s forwards;
color: #6f5802;
}
#dont-use-ie .text {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
}
#dont-use-ie .text a {
margin: 0 5px;
}
#dont-use-ie .close {
font-size: 1.3em;
cursor: pointer;
width: 1.3em;
display: flex;
justify-content: center;
align-items: center;
opacity: 0.6;
transition: all 0.3s;
}
#dont-use-ie .close:hover {
opacity: 1;
}
#presets-fullview-container {
position: fixed;
bottom: 0;
width: 90vw;
left: 5vw;
height: 60vh;
background-color: white;
padding: 40px 20px;
z-index: 5;
transition: all 0.4s ease-in-out;
transform: translateY(110%);
}
#presets-fullview-container.show {
transform: translateY(0);
}
#presets-fullview-container .presets-wrapper {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, 90px);
grid-gap: 20px;
overflow: auto;
}
#presets-fullview-container .presets-wrapper > div {
height: 90px;
border: 2px solid white;
box-shadow: 0 0 1px 2px rgba(180, 180, 180, 0.8);
border-radius: 3px;
overflow: hidden;
cursor: pointer;
}
#share-container {
position: fixed;
bottom: 0;
left: 0;
height: 10vh;
width: 100vw;
background-color: #bdc3c7;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
transition: transform 0.3s linear;
transform: translateY(100%);
}
#share-container.show {
transform: translateY(0%);
}
#share-container > div {
cursor: pointer;
width: 1em;
height: 1em;
display: flex;
justify-content: center;
align-items: center;
margin: 0 15px;
opacity: 0.8;
border-radius: 2px;
transition: all 0.2s;
font-family: 'Socicon' !important;
color: white;
}
#share-container > div i {
font-size: 0.5em;
}
#share-container > div:hover {
opacity: 1;
}
#info-box-wrapper {
position: fixed;
bottom: 0;
left: 0;
height: 100vh;
width: 100vw;
transition: all 0.3s ease-in-out;
z-index: 5;
background: #c1b6a4;
}
#info-box-wrapper .info-box {
padding: 50px;
position: relative;
display: grid;
grid-template-columns: 15% 60% 15%;
grid-template-rows: 15% 85%;
grid-gap: 4em;
height: 100%;
}
#info-box-wrapper .info-box .logo {
grid-column: 1 / 4;
grid-row: 1;
font-size: 3.5em;
background: purple;
background-color: #DCD9D4;
background-image: linear-gradient(90deg, #9795f0, #fbc8d4, #13547a, #80d0c7, #88d3ce, #6e45e2);
background-size: 600% 600%;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-family: "Fredoka One";
animation: move-gradient 30s ease infinite reverse;
}
#info-box-wrapper .info-box h1 {
font-size: 1.5em;
margin: 15px 0;
font-family: Baloo;
color: #48443a;
}
#info-box-wrapper .info-box h2 {
font-size: 1.2em;
margin: 5px 0;
font-family: Baloo;
color: #48443a;
}
#info-box-wrapper .info-box p {
margin: 20px 0;
font-size: 0.8em;
line-height: 1.5em;
text-align: justify;
color: #48443a;
}
#info-box-wrapper .info-box p:first-child {
margin-top: 0;
}
#info-box-wrapper .info-box .close {
position: absolute;
top: 3%;
right: 2%;
width: 1em;
height: 1em;
font-size: 2em;
font-weight: bold;
transition: all 0.2s;
opacity: 0.8;
color: #100f0c;
cursor: pointer;
justify-content: center;
align-items: center;
display: flex;
}
#info-box-wrapper .info-box .close:hover {
opacity: 1;
}
#info-box-wrapper .info-box .howto {
position: relative;
}
#info-box-wrapper .info-box .howto .howto-wrapper {
column-count: 3;
column-gap: 2.5em;
}
#info-box-wrapper .info-box .howto .howto-wrapper::after, #info-box-wrapper .info-box .howto .howto-wrapper::before {
content: "";
height: 80%;
width: 1px;
background-color: rgba(72, 68, 58, 0.1);
position: absolute;
right: -3.5%;
top: 10%;
}
#info-box-wrapper .info-box .howto .howto-wrapper::after {
left: -3.5%;
}
#info-box-wrapper .info-box .resources li {
list-style-type: none;
font-size: 0.9em;
line-height: 2em;
}
#info-box-wrapper .info-box .resources li a {
transition: all 0.2s;
opacity: 0.7;
color: #48443a;
text-decoration: none;
}
#info-box-wrapper .info-box .resources li a:hover {
opacity: 1;
}
#info-box-wrapper .info-box .resources li a:active, #info-box-wrapper .info-box .resources li a:visited {
color: #48443a;
}
#info-box-wrapper .info-box .resources hr {
border: 0.5px solid;
width: 50%;
position: relative;
color: rgba(72, 68, 58, 0.1);
}
#controls-container {
position: fixed;
bottom: 0;
left: 0;
min-height: 35vh;
width: 100vw;
transition: all 0.4s ease-in-out;
transform: translateY(80%);
}
#controls-container.show {
transform: translateY(0);
}
#controls-container .controls-wrapper {
padding: 0 20px;
box-shadow: 2px 0 2px 0 rgba(0, 0, 0, 0.15);
background-color: white;
display: grid;
grid-template-columns: 100px minmax(150px, 170px) minmax(200px, 250px) 240px minmax(50px, 100px);
grid-gap: 35px;
max-width: 1040px;
left: 50%;
position: relative;
height: 100%;
transform: translateX(-50%);
}
#controls-container .controls-wrapper .colors-slider {
width: 100%;
height: 40px;
margin-top: 10px;
position: relative;
grid-column: 1 / 6;
grid-row: 1;
}
#controls-container .controls-wrapper .colors-slider::after {
position: absolute;
bottom: -20px;
left: 0;
width: 100%;
height: 1px;
background-color: rgba(128, 128, 128, 0.3);
content: "";
}
#controls-container .controls-wrapper .colors-slider .gradient-bar {
width: 100%;
border-radius: 5px;
height: 100%;
box-shadow: 0 0 0 2px #2b2b2b;
border: 2px solid white;
cursor: copy;
z-index: 2;
}
#controls-container .controls-wrapper .colors-slider .gradient-bar::before {
background: linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), white;
background-position: 0 0, 0.5em 0.5em;
background-size: 1em 1em;
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: inherit;
z-index: -1;
}
#controls-container .controls-wrapper .colors-slider .color-stop {
position: absolute;
top: 0;
height: 100%;
width: 10px;
z-index: 1;
transform: translateX(-25%);
transition: box-shadow 0.2s;
}
#controls-container .controls-wrapper .colors-slider .color-stop.stackTop {
z-index: 2;
}
#controls-container .controls-wrapper .colors-slider .color-stop.hide {
display: none;
}
#controls-container .controls-wrapper .colors-slider .color-stop.selected {
z-index: 2;
}
#controls-container .controls-wrapper .colors-slider .color-stop.selected .color-view {
box-shadow: 0 0 0 2px #2b2b2b, 0 0 0px 5px rgba(189, 195, 199, 0.71);
}
#controls-container .controls-wrapper .colors-slider .color-stop.selected .stop-input input {
box-shadow: inset 0 0 0 2px #bdc3c7;
opacity: 1;
font-size: 1em;
transform: translate(0, 15%);
}
#controls-container .controls-wrapper .colors-slider .color-stop .color-view {
width: 20px;
height: 20px;
position: absolute;
bottom: 100%;
left: 0;
display: flex;
justify-content: center;
align-content: center;
border-radius: 5px;
cursor: move;
border: 2px solid white;
box-shadow: 0 0 0 2px #2b2b2b;
transition: box-shadow 0.2s;
border-radius: 40% 60% 100% 0% / 100% 60% 40% 0%;
transform: rotate(-45deg) translateX(-50%);
z-index: 1;
}
#controls-container .controls-wrapper .colors-slider .color-stop .color-view:hover {
box-shadow: 0 0 0 2px #2b2b2b, 0 0 0px 5px rgba(180, 180, 180, 0.6);
}
#controls-container .controls-wrapper .colors-slider .color-stop .stop-input {
position: absolute;
bottom: 100%;
left: 0%;
transform: translate(-50%, -80%);
}
#controls-container .controls-wrapper .colors-slider .color-stop .stop-input input {
border: 0px solid gray;
text-align: center;
outline: none;
font-size: 0.8em;
box-shadow: 0 0 0 0px gray;
transition: all 0.2s;
max-width: 100%;
border-radius: 5px;
padding: 0.4em 0.4em;
opacity: 0.5;
}
#controls-container .controls-wrapper .title {
width: 20%;
}
#controls-container .controls-wrapper .title h1 {
position: relative;
margin: 40px 0 60px 0;
color: #16527a;
font-size: 2.5em;
font-weight: bold;
line-height: 1.2em;
}
#controls-container .controls-wrapper .title h1::after {
content: attr(data-title);
position: absolute;
top: 50%;
left: 50%;
font-size: 1.7em;
line-height: 1em;
transform: translate(-50%, -50%);
opacity: 0.1;
font-weight: bold;
color: rgba(52, 152, 219, 0.9);
}
#controls-container .controls-wrapper h3 {
width: 100%;
text-align: left;
text-transform: capitalize;
font-size: 1em;
color: rgba(180, 180, 180, 0.5);
text-indent: 5%;
margin-top: 15px;
margin-bottom: 10px;
}
#controls-container .controls-wrapper .gradients-stack .gradients-stack-container {
max-height: 200px;
overflow: auto;
margin-bottom: 10px;
}
#controls-container .controls-wrapper .gradients-stack .gradients-stack-container > div {
width: 100%;
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr 1fr;
margin: 3px 0;
height: 50px;
cursor: pointer;
transition: all 0.3s;
opacity: 0.5;
grid-column-gap: 2px;
}
#controls-container .controls-wrapper .gradients-stack .gradients-stack-container > div.noneed .delete,
#controls-container .controls-wrapper .gradients-stack .gradients-stack-container > div.noneed .hide {
display: none;
}
#controls-container .controls-wrapper .gradients-stack .gradients-stack-container > div.highlight, #controls-container .controls-wrapper .gradients-stack .gradients-stack-container > div:hover {
opacity: 1;
}
#controls-container .controls-wrapper .gradients-stack .gradients-stack-container > div.highlight .hide,
#controls-container .controls-wrapper .gradients-stack .gradients-stack-container > div.highlight .delete, #controls-container .controls-wrapper .gradients-stack .gradients-stack-container > div:hover .hide,
#controls-container .controls-wrapper .gradients-stack .gradients-stack-container > div:hover .delete {
transform: translateX(0%);
}
#controls-container .controls-wrapper .gradients-stack .gradients-stack-container > div.highlight .hide:hover,
#controls-container .controls-wrapper .gradients-stack .gradients-stack-container > div.highlight .delete:hover, #controls-container .controls-wrapper .gradients-stack .gradients-stack-container > div:hover .hide:hover,
#controls-container .controls-wrapper .gradients-stack .gradients-stack-container > div:hover .delete:hover {
opacity: 1;
}
#controls-container .controls-wrapper .gradients-stack .gradients-stack-container > div .gradient-box-container {
grid-column: 1;
grid-row: 1 / span 2;
border-radius: 0px;
z-index: 3;
position: relative;
display: block;
background: linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), white;
background-position: 0 0, 0.25em 0.25em;
background-size: 0.5em 0.5em;
}
#controls-container .controls-wrapper .gradients-stack .gradients-stack-container > div .gradient-box-container .gradient-box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#controls-container .controls-wrapper .gradients-stack .gradients-stack-container > div .hide {
transform: translateX(-110%);
transition: all 0.2s;
grid-column: 2;
grid-row: 2;
opacity: 0.8;
cursor: pointer;
text-align: center;
background-color: #1abc9c;
background-position: 50% 50%;
background-size: 90% 90%;
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgPjx0aXRsZS8+PGRlc2MvPjxkZWZzLz48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIj48ZyBmaWxsPSIjZmZmZmZmIj48cGF0aCBkPSJNMTcsOSBDOCw5IDQsMTYgNCwxNiBDNCwxNiA4LDIzLjAwMDAwMSAxNywyMyBDMjYsMjIuOTk5OTk5IDMwLDE2IDMwLDE2IEMzMCwxNiAyNiw5IDE3LDkgTDE3LDkgWiBNMTcsMjAgQzE5LjIwOTEzOTEsMjAgMjEsMTguMjA5MTM5MSAyMSwxNiBDMjEsMTMuNzkwODYwOSAxOS4yMDkxMzkxLDEyIDE3LDEyIEMxNC43OTA4NjA5LDEyIDEzLDEzLjc5MDg2MDkgMTMsMTYgQzEzLDE4LjIwOTEzOTEgMTQuNzkwODYwOSwyMCAxNywyMCBMMTcsMjAgWiBNMTcsMTkgQzE4LjY1Njg1NDMsMTkgMjAsMTcuNjU2ODU0MyAyMCwxNiBDMjAsMTQuMzQzMTQ1NyAxOC42NTY4NTQzLDEzIDE3LDEzIEMxNS4zNDMxNDU3LDEzIDE0LDE0LjM0MzE0NTcgMTQsMTYgQzE0LDE3LjY1Njg1NDMgMTUuMzQzMTQ1NywxOSAxNywxOSBMMTcsMTkgWiBNMTcsMTcgQzE3LjU1MjI4NDgsMTcgMTgsMTYuNTUyMjg0OCAxOCwxNiBDMTgsMTUuNDQ3NzE1MiAxNy41NTIyODQ4LDE1IDE3LDE1IEMxNi40NDc3MTUyLDE1IDE2LDE1LjQ0NzcxNTIgMTYsMTYgQzE2LDE2LjU1MjI4NDggMTYuNDQ3NzE1MiwxNyAxNywxNyBMMTcsMTcgWiIvPjwvZz48L2c+PC9zdmc+");
}
#controls-container .controls-wrapper .gradients-stack .gradients-stack-container > div .hide.hidden {
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDMyIDMyIiAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGUvPjxkZXNjLz48ZGVmcy8+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSI+PGcgZmlsbD0iI2ZmZmZmZiI+PHBhdGggZD0iTTguMTA4Njk4OTEsMjAuODkxMzAxMSBDNC42MTcyMDgxNiwxOC44MzAxMTQ3IDMsMTYgMywxNiBDMywxNiA3LDkgMTYsOSBDMTcuMzA0NTEwNyw5IDE4LjUwMzk3NTIsOS4xNDcwNjQ2NiAxOS42MDE0Mzg4LDkuMzk4NTYxMjIgTDE2Ljg5ODY1MzEsMTIuMTAxMzQ2OSBDMTYuNjA5Nzg4NSwxMi4wMzUwMzQyIDE2LjMwODk4NTYsMTIgMTYsMTIgQzEzLjc5MDg2MDksMTIgMTIsMTMuNzkwODYwOSAxMiwxNiBDMTIsMTYuMzA4OTg1NiAxMi4wMzUwMzQyLDE2LjYwOTc4ODUgMTIuMTAxMzQ2OSwxNi44OTg2NTMxIEw4LjEwODY5ODkxLDIwLjg5MTMwMTEgTDguMTA4Njk4OTEsMjAuODkxMzAxMSBMOC4xMDg2OTg5MSwyMC44OTEzMDExIFogTTEyLjM5ODU2MSwyMi42MDE0MzkgQzEzLjQ5NjAyNDYsMjIuODUyOTM1NiAxNC42OTU0ODkyLDIzLjAwMDAwMDEgMTYsMjMgQzI1LDIyLjk5OTk5OSAyOSwxNiAyOSwxNiBDMjksMTYgMjcuMzgyNzkxOCwxMy4xNjk4ODU2IDIzLjg5MTMwMDgsMTEuMTA4Njk5MiBMMTkuODk4NjUzMSwxNS4xMDEzNDY5IEMxOS45NjQ5NjU4LDE1LjM5MDIxMTUgMjAsMTUuNjkxMDE0NCAyMCwxNiBDMjAsMTguMjA5MTM5MSAxOC4yMDkxMzkxLDIwIDE2LDIwIEMxNS42OTEwMTQ0LDIwIDE1LjM5MDIxMTUsMTkuOTY0OTY1OCAxNS4xMDEzNDY5LDE5Ljg5ODY1MzEgTDEyLjM5ODU2MSwyMi42MDE0MzkgTDEyLjM5ODU2MSwyMi42MDE0MzkgTDEyLjM5ODU2MSwyMi42MDE0MzkgWiBNMTksMTYgQzE5LjAwMDAwMDEsMTYuNzY3NzY2OSAxOC43MDcxMDY4LDE3LjUzNTUzMzkgMTguMTIxMzIwMywxOC4xMjEzMjAzIEMxNy41MzU1MzM5LDE4LjcwNzEwNjggMTYuNzY3NzY2OSwxOS4wMDAwMDAxIDE2LDE5IEwxOSwxNiBMMTksMTYgTDE5LDE2IFogTTE2LDEzIEMxNS4yMzIyMzMxLDEyLjk5OTk5OTkgMTQuNDY0NDY2MSwxMy4yOTI4OTMyIDEzLjg3ODY3OTcsMTMuODc4Njc5NyBDMTMuMjkyODkzMiwxNC40NjQ0NjYxIDEyLjk5OTk5OTksMTUuMjMyMjMzMSAxMywxNiBMMTYsMTMgTDE2LDEzIEwxNiwxMyBaIE0yNCw3IEw3LDI0IEw4LDI1IEwyNSw4IEwyNCw3IEwyNCw3IFoiLz48L2c+PC9nPjwvc3ZnPg==");
}
#controls-container .controls-wrapper .gradients-stack .gradients-stack-container > div .delete {
transform: translateX(-110%);
transition: all 0.2s;
cursor: pointer;
text-align: center;
font-size: 1.2em;
color: red;
font-weight: bold;
background-color: #e74c3c;
color: white;
grid-column: 2;
grid-row: 1;
opacity: 0.8;
}
#controls-container .controls-wrapper .gradients-stack .add-gradient {
opacity: 1;
color: #196090;
height: 25px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #3498db;
border-radius: 2px;
cursor: pointer;
}
#controls-container .controls-wrapper .gradients-stack .add-gradient:hover {
background-color: #5faee3;
}
#controls-container .controls-wrapper .colors-options-container {
display: flex;
flex-wrap: wrap;
position: relative;
align-content: flex-start;
}
#controls-container .controls-wrapper .colors-options-container::after, #controls-container .controls-wrapper .colors-options-container::before {
position: absolute;
top: 10%;
right: -12.5px;
height: 80%;
width: 1px;
background-color: rgba(128, 128, 128, 0.1);
content: "";
}
#controls-container .controls-wrapper .colors-options-container::before {
left: -12.5px;
}
#controls-container .controls-wrapper .colors-options-container .colors-options-top {
width: 100%;
width: 100%;
display: grid;
justify-items: center;
grid-template-columns: 1fr 1fr 1fr;
}
#controls-container .controls-wrapper .colors-options-container .colors-options-bottom {
justify-content: center;
display: flex;
width: 100%;
padding: 1em 0;
flex-direction: column;
min-height: 150px;
}
#controls-container .controls-wrapper .color-stops-container .vc-chrome {
width: 100%;
box-shadow: 0 0 1px 0 gray;
}
#controls-container .controls-wrapper .color-stops-container .vc-chrome .vc-chrome-saturation-wrap .vc-saturation-circle {
transform: translate(-50%, -50%);
box-shadow: 0 0 0 2px #fff, inset 0 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 1px 1px black;
}
#controls-container .controls-wrapper .color-presets-container {
display: flex;
flex-direction: column;
}
#controls-container .controls-wrapper .color-presets-container .user-generated {
border-bottom: 1px solid rgba(180, 180, 180, 0.4);
display: grid;
width: 100%;
grid-template-columns: 70% 30%;
padding: 10px;
}
#controls-container .controls-wrapper .color-presets-container .user-generated .user-presets {
display: grid;
grid-template-columns: repeat(auto-fill, 35px);
grid-gap: 10px;
padding: 5px 0px;
}
#controls-container .controls-wrapper .color-presets-container .user-generated .user-presets::after {
content: "";
background-color: rgba(180, 180, 180, 0.4);
position: absolute;
right: 0;
top: 20%;
height: 80%;
width: 1px;
}
#controls-container .controls-wrapper .color-presets-container .user-generated .user-presets > span {
height: 35px;
cursor: pointer;
border-radius: 3px;
border: 2px solid white;
box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.3);
position: relative;
z-index: 1;
transition: all 0.2s;
}
#controls-container .controls-wrapper .color-presets-container .user-generated .user-presets > span.selected {
box-shadow: 0 0 4px 3px rgba(0, 0, 0, 0.7);
}
#controls-container .controls-wrapper .color-presets-container .user-generated .presets-actions {
display: flex;
justify-content: space-around;
padding: 5px 0px;
}
#controls-container .controls-wrapper .color-presets-container .user-generated .presets-actions > div {
filter: grayscale(1);
opacity: 0.2;
cursor: default;
transition: all 0.2s;
width: 45%;
color: #00a5d2;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid;
border-radius: 2px;
font-size: 0.9em;
padding: 5px;
background-color: #6ce0ff;
}
#controls-container .controls-wrapper .color-presets-container .user-generated .presets-actions > div.save-preset {
color: #1b7943;
background-color: #54d98c;
}
#controls-container .controls-wrapper .color-presets-container .user-generated .presets-actions.enable-save .save-preset, #controls-container .controls-wrapper .color-presets-container .user-generated .presets-actions.enable-apply .apply-preset {
opacity: 1;
cursor: pointer;
filter: grayscale(0);
}
#controls-container .controls-wrapper .color-presets-container .user-generated .presets-actions.enable-save .save-preset:hover, #controls-container .controls-wrapper .color-presets-container .user-generated .presets-actions.enable-apply .apply-preset:hover {
opacity: 0.7;
}
#controls-container .controls-wrapper .color-presets-container .other-presets {
display: grid;
grid-template-columns: repeat(auto-fill, 35px);
grid-gap: 10px;
padding: 10px;
max-height: 220px;
overflow: auto;
width: 100%;
}
#controls-container .controls-wrapper .color-presets-container .other-presets > .gradient-div {
height: 35px;
cursor: pointer;
border-radius: 3px;
border: 2px solid white;
box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.3);
position: relative;
z-index: 1;
}
#controls-container .controls-wrapper .color-presets-container .more-presets {
opacity: 1;
color: #6d2b00;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #d35400;
border-radius: 2px;
transition: all 0.2s;
font-size: 0.7em;
padding: 5px;
margin: 10px;
cursor: pointer;
}
#controls-container .controls-wrapper .color-presets-container .more-presets:hover {
background-color: #ff6a07;
}
#controls-container .controls-wrapper .user-actions-container {
display: flex;
flex-direction: column;
}
#controls-container .controls-wrapper .user-actions-container > div {
opacity: 1;
color: #623475;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #9b59b6;
border-radius: 2px;
transition: all 0.2s;
font-size: 0.7em;
padding: 5px;
margin: 10px 0;
cursor: pointer;
}
#controls-container .controls-wrapper .user-actions-container > div.reset {
color: #a82315;
border: 1px solid #e74c3c;
margin-top: auto;
}
#controls-container .controls-wrapper .user-actions-container > div.reset:hover {
background-color: #ed7669;
}
#controls-container .controls-wrapper .user-actions-container > div:hover {
background-color: #b07cc6;
color: white;
}
#controls-container .controls-wrapper .user-actions-container > div.share {
animation: share-btn 15s forwards infinite;
color: white;
opacity: 0.8;
background-color: #9b59b6;
}
#controls-container .controls-wrapper .user-actions-container > div.share:hover {
opacity: 1;
}
@keyframes share-btn {
10% {
background-color: #3b5999;
border-color: #3b5999;
}
20% {
background-color: #dd4b39;
border-color: #dd4b39;
}
30% {
background-color: #ff5700;
border-color: #ff5700;
}
40% {
background-color: #55acee;
border-color: #55acee;
}
50% {
background-color: #0077B5;
border-color: #0077B5;
}
60% {
background-color: #bd081c;
border-color: #bd081c;
}
70% {
background-color: #34465d;
border-color: #34465d;
}
80% {
background-color: #f57d00;
border-color: #f57d00;
}
90% {
background-color: #c71610;
border-color: #c71610;
}
100% {
background-color: #21759b;
border-color: #21759b;
}
}
#controls-container .controls-wrapper .control {
display: flex;
font-size: 0.7em;
}
#controls-container .controls-wrapper .control.toggle {
color: white;
cursor: pointer;
text-align: center;
text-transform: uppercase;
height: 3em;
width: 3em;
}
#controls-container .controls-wrapper .control.toggle > div {
display: flex;
width: 100%;
padding: 0.3em;
background-color: #3498db;
border-radius: 5px;
transition: all 0.3s;
opacity: 1;
position: relative;
}
#controls-container .controls-wrapper .control.toggle > div:after {
content: attr(data-tip);
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0%) scale(0);
background-color: inherit;
border-radius: 3px;
padding: 0.3em 0.5em;
opacity: 0;
transition: all 0.3s;
pointer-events: none;
}
#controls-container .controls-wrapper .control.toggle > div:hover {
background-color: #258cd1;
}
#controls-container .controls-wrapper .control.toggle > div:hover:after {
transform: translate(-50%, -150%) scale(1);
opacity: 1;
}
#controls-container .controls-wrapper .control.toggle > div.off {
opacity: 0.5;
}
#controls-container .controls-wrapper .control.toggle > div .icon {
flex-grow: 1;
background-repeat: no-repeat;
padding: 10px;
display: block;
}
#controls-container .controls-wrapper .control.range {
padding: 0.9em 0;
width: 100%;
position: relative;
display: flex;
}
#controls-container .controls-wrapper .control.range .title {
width: 100%;
text-align: left;
text-transform: capitalize;
display: inline-block;
font-size: 1em;
position: absolute;
top: 0%;
color: rgba(180, 180, 180, 0.5);
text-indent: 10%;
pointer-events: none;
transition: all 0.2s;
z-index: -1;
line-height: 1;
padding: 0;
margin: 0;
}
#controls-container .controls-wrapper .control.range .amount {
width: 20%;
display: inline-flex;
font-size: 0.7em;
justify-content: flex-end;
align-items: center;
}
#controls-container .controls-wrapper .control.range .range {
width: 75%;
display: inline-flex;
align-items: center;
}
#controls-container .controls-wrapper .control.color {
margin-bottom: 10px;
width: 100%;
border: 1px solid rgba(180, 180, 180, 0.7);
border-radius: 5px;
overflow: hidden;
padding: 3px 5px;
}
#controls-container .controls-wrapper .control.color > span {
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
#controls-container .controls-wrapper .control.color .color-box {
width: 20%;
position: relative;
}
#controls-container .controls-wrapper .control.color .color-box > span {
position: absolute;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
cursor: pointer;
}
#controls-container .controls-wrapper .control.color .color-box > span::after, #controls-container .controls-wrapper .control.color .color-box > span::before {
position: absolute;
top: 0%;
right: -30%;
height: 100%;
width: 1px;
background-color: rgba(180, 180, 180, 0.7);
content: "";
}
#controls-container .controls-wrapper .control.color .color-box > span::before {
left: -30%;
}
#controls-container .controls-wrapper .control.color .color-input {
flex-grow: 1;
}
#controls-container .controls-wrapper .control.color .color-stop {
width: 30%;
}
#controls-container .controls-wrapper .control.color .color-stop input {
text-align: center;
}
#controls-container .controls-wrapper .control.color .color-delete {
width: 10%;
transition: all 0.2s;
font-size: 2em;
cursor: pointer;
opacity: 0.5;
}
#controls-container .controls-wrapper .control.color .color-delete:hover:not(.disabled) {
opacity: 1;
}
#controls-container .controls-wrapper .control.color .color-delete.disabled {
opacity: 0;
cursor: default;
}
#controls-container .controls-wrapper .control.color input {
padding: 5px 10px;
border: 0px solid gray;
width: 100%;
outline: 0;
}
#controls-container .controls-wrapper .control.circle {
position: relative;
justify-content: center;
}
#controls-container .controls-wrapper .control.circle svg g circle:last-child {
cursor: pointer;
}
#controls-container .controls-wrapper .control.circle .amount {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.5em;
text-align: center;
display: flex;
flex-direction: column;
}
#controls-container .controls-wrapper .control.circle .amount input {
border: 0px solid;
width: auto;
text-align: center;
font-size: 1.2em;
}
#controls-container .controls-wrapper .control.circle .amount span:last-child {
font-size: 0.7em;
}
#controls-container .controls-wrapper .control.switch {
display: flex;
margin: 1.2em 0;
color: rgba(180, 180, 180, 0.5);
flex-direction: column;
}
#controls-container .controls-wrapper .control.switch input {
display: none;
}
#controls-container .controls-wrapper .control.switch input:checked + label {
background-color: #3498db;
}
#controls-container .controls-wrapper .control.switch input:checked + label .switch {
left: 55%;
}
#controls-container .controls-wrapper .control.switch label {
width: 30px;
height: 15px;
border-radius: 10px;
background-color: gray;
display: inline-block;
margin-right: 10px;
position: relative;
transition: all 0.3s;
cursor: pointer;
}
#controls-container .controls-wrapper .control.switch label span {
background-color: white;
height: 80%;
width: 40%;
position: absolute;
border-radius: 50%;
left: 5%;
top: 8%;
transition: all 0.3s;
}
input[type="range"] {
/* fix for FF unable to apply focus style bug */
border: 1px solid transparent;
/*required for proper track sizing in FF*/
width: 100%;
/* Webkit */
-webkit-appearance: none;
/* FF */
/*hide the outline behind the border*/
/* IE*/
}
input[type="range"]::-webkit-slider-runnable-track {
width: 100%;
height: 3px;
background: #ddd;
border: none;
border-radius: 3px;
transition: all 0.2s;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 10px;
width: 10px;
border-radius: 50%;
background: #3498db;
margin-top: -4px;
}
input[type="range"]:focus {
outline: none;
}
input[type="range"]:focus::-moz-range-track {
background: #75b9e7;
}
input[type="range"]:focus::-webkit-slider-runnable-track {
background: #75b9e7;
}
input[type="range"]:focus::-ms-fill-lower {
background: #75b9e7;
}
input[type="range"]:focus::-ms-fill-upper {
background: #75b9e7;
}
input[type="range"]::-moz-range-track {
width: 100%;
height: 3px;
background: #ddd;
border: none;
border-radius: 3px;
transition: all 0.2s;
z-index: 2;
}
input[type="range"]::-moz-range-thumb {
border: none;
height: 10px;
width: 10px;
border-radius: 50%;
background: #3498db;
z-index: 2;
}
input[type="range"]:-moz-focusring {
outline: 1px solid white;
outline-offset: -1px;
}
input[type="range"]::-ms-track {
width: 100%;
height: 3px;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
background: transparent;
/*leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 6px 0;
/*remove default tick marks*/
color: transparent;
}
input[type="range"]::-ms-fill-lower {
background: #ddd;
border-radius: 10px;
}
input[type="range"]::-ms-fill-upper {
background: #ddd;
border-radius: 10px;
}
input[type="range"]::-ms-thumb {
border: none;
height: 10px;
width: 10px;
border-radius: 50%;
background: #3498db;
transform: translateY(20%);
}
@keyframes move-gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/*
Hide background animation
*/
.hide-background-enter-active {
animation: hide-background 1.5s reverse ease-in forwards;
}
.hide-background-leave-active {
animation: hide-background 1s ease-in forwards;
}
@keyframes hide-background {
0% {
transform: scale(1) perspective(500px) rotateX(0deg);
}
50% {
transform: scale(0.8) perspective(500px) rotateX(2deg);
}
100% {
transform: scale(0.8) perspective(500px) rotateX(2deg) translatey(-120%);
}
}
/*
Show info animation
*/
.show-info-enter-active {
animation: show-info 1s ease-in forwards;
}
.show-info-leave-active {
animation: show-info 1s reverse forwards;
}
@keyframes show-info {
0% {
transform: translateY(100%);
opacity: 0;
}
50% {
transform: translateY(100%);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes show-ie {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0);
}
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<div id="app">
<info-box></info-box>
<transition name="hide-background">
<div id='background-display' v-if="showInfo == false" :class='{"show-social-networks": (showShare == true)}'>
<no-ie></no-ie>
<div class='show-gradient' @wheel='toggleControls("wheel", $event)' @click='toggleControls("click", $event)' :style='style'></div>
<div id='presets-fullview-container' :class='{show: showPresets}'>
<div class='presets-wrapper'>
<div v-for='(preset, index) in presets' :style="preset.style" @click='applyGradient(index)'></div>
</div>
</div>
<div id='controls-container' :class='{show: showControls}'>
<div class='controls-wrapper'>
<color-slider :colors='getColors' @add='addColorStop($event)'></color-slider>
<!-- <div class='title'>
<h1 data-title='Gradient Generator'>Gradient Generator</h1>
</div> -->
<div class='gradients-stack'>
<h3>Stack</h3>
<div class='gradients-stack-container'>
<div v-for='(gradient, index) in gradients' :class='{highlight: (currentGradient == index), noneed: (gradients.length == 1)}'>
<div class='gradient-box-container'>
<div class='gradient-box' @click='setGradient(index)' :style='showGradient(index)'>
</div>
</div>
<div class='delete' @click='deleteGradient(index)'>×</div>
<div class='hide' :class='{hidden: (gradient.status == "hide"), tall: (gradients.length == 1)}' @click='toggleGradient(index)'></div>
</div>
</div>
<div class='add-gradient' @click='addGradient'>+</div>
</div>
<options-container :options='getData'></options-container>
<div class='color-stops-container'>
<h3>Colors</h3>
<div class='color-picker'>
<chrome-picker :value="currentColor.value" @input="updatePicker"></chrome-picker>
</div>
</div>
<div class='color-presets-container'>
<h3>Presets</h3>
<user-presets></user-presets>
<div class='other-presets'>
<div class='gradient-div' v-for='(presetObj, index) in presetsFilterd' :style="presetObj.preset.style" @click='applyGradient(presetObj.index)'></div>
</div>
<div class="more-presets" @click='showPresets = true'>More</div>
</div>
<div class='user-actions-container'>
<div class='copy-css' @click='copyCSS'>{{copyCSSText}}</div>
<div class='info' @click='showInfo = true; showShare = false'>Info</div>
<div class='reset' @click='resetGradient'>RESET</div>
</div>
</div>
</div>
</div>
</transition>
</div>
<template id='user-presets'>
<div class='user-generated' v-click-outside="deselectPreset">
<div class='user-presets'>
<span v-for='(preset, index) in userPresets' :class='{selected: selectedPreset == index}' @click='selectedPreset = index' :style='preset.style'></span>
</div>
<div class='presets-actions' :class='enableClass'>
<div class='apply-preset' @click='applyPreset'><i class="icon ion-md-checkmark-circle-outline"></i></div>
<div class='save-preset' @click='savePreset'><i class="icon ion-md-save"></i></div>
</div>
</div>
</template>
<template id='options-container'>
<div class='colors-options-container'>
<h3>Options</h3>
<div class='colors-options-top'>
<toggle-control :options='options.type' :icons='typeIcons'></toggle-control>
<toggle-control :options='options.repeating' :boolean-icon='repeatIcon' :type="'boolean'" :tip="'Repeat'"></toggle-control>
<toggle-control :options='options.shape' v-if="(options.type.selected == 'radial')" :icons="shapeIcons"></toggle-control>
</div>
<div class='colors-options-bottom'>
<div class='linear-direction' v-if="(options.type.selected == 'linear')">
<circular-control :direction='options.direction'></circular-control>
</div>
<div class='radial-size' v-if="(options.type.selected == 'radial')">
<range :rangedata='options.size.ellipse.width' v-if="(options.shape.selected == 'ellipse')"></range>
<range :rangedata='options.size.ellipse.height' v-if="(options.shape.selected == 'ellipse')"></range>
<range :rangedata='options.size.circle.length' v-if="(options.shape.selected == 'circle')"></range>
</div>
<div class='radial-position' v-if="(options.type.selected == 'radial')">
<range :rangedata='options.position.horizontal'></range>
<range :rangedata='options.position.vertical'></range>
</div>
</div>
</div>
</template>
<template id='circular-control'>
<div class='control circle' @wheel='handleCircleValue'>
<circle-slider v-model="direction.amount" :min="0" :max="360" circle-color="#2980b9" progress-color="#2980b9" :side=120 knob-color="#2c3e50" :circle-width="4" :progress-width="4" :knob-radius=7></circle-slider>
<span class='icon spread'></span>
<span class='amount'>
<span>
<input v-model='direction.amount' min="0" max="360" size="3" @keydown.up="increaseValue" @keydown.down="decreaseValue" @input="parseDigits" />
</span>
<span>deg</span>
</span>
</div>
</template>
<template id='range'>
<div class='control range'>
<span class='title'>{{rangedata.name}}</span>
<span class='range'>
<input type="range" :min="rangedata.min" :max="rangedata.max" :step='rangedata.step' v-model='rangedata.amount' @input="$emit('update')" />
</span>
<span class='amount'>{{rangedata.amount}}{{rangedata.unit}}</span>
</div>
</template>
<template id='colors'>
<div class='control color'>
<span c.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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