CSS is fun and cool and I like it.
TA的每日心情
慵懒
2019-5-12 05:24

签到天数: 5 天

连续签到: 1 天

[LV.2]偶尔看看I

941

主题

955

帖子

3万

积分
28650 银币 2071 金币 0 宝石

奖牌

标签

2019-5-23 05:38:15 显示全部楼层 |阅读模式
帖子大图:
http://qncdn.elvns.com/forum/201905/23/052902jf2w9lkkz5llay7x.jpg
<link rel="stylesheet" type="text/css" href="http://demo.htmleaf.com/1508/201508041710/css/jquery.classycolor.min.css" /> <script src="http://demo.htmleaf.com/1508/201508041710/js/jquery.classycolor.min.js"></script>
<div class="example"> 				<div class="color-box"> 					<span>rgba: </span><div class="classypicker1 ClassyColor componentcount-4 show-labels" style=""><div class="maximize-wrapper"><div class="inner-maximize-wrapper" style=""><div class="ui-wrapper"><div class="display-wrapper"><div class="display" style="background-color: rgb(237, 25, 120);"></div></div><div class="slider-container"><div class="slider r" style="background-image: linear-gradient(to right, rgb(0, 25, 120), rgb(255, 25, 120));"><div class="handle" data-component="r" style="left: 92.9412%;"></div></div><div class="slider g" style="background-image: linear-gradient(to right, rgb(237, 0, 120), rgb(237, 255, 120));"><div class="handle" data-component="g" style="left: 9.80392%;"></div></div><div class="slider b" style="background-image: linear-gradient(to right, rgb(237, 25, 0), rgb(237, 25, 255));"><div class="handle" data-component="b" style="left: 47.0588%;"></div></div><div class="slider a" style="background-image: linear-gradient(to right, rgba(237, 25, 120, 0), rgb(237, 25, 120));"><div class="handle" data-component="a" style="left: 100%;"></div></div></div></div><div class="output-wrapper">rgba(237, 25, 120, 1.00)</div></div></div></div> 				</div> 				<div class="color-box"> 					<span>rgb: </span><div class="classypicker2 ClassyColor componentcount-3 show-labels"><div class="maximize-wrapper"><div class="inner-maximize-wrapper"><div class="ui-wrapper"><div class="display-wrapper"><div class="display" style="background-color: rgb(101, 50, 152);"></div></div><div class="slider-container"><div class="slider r" style="background-image: linear-gradient(to right, rgb(0, 50, 152), rgb(255, 50, 152));"><div class="handle" data-component="r" style="left: 39.6078%;"></div></div><div class="slider g" style="background-image: linear-gradient(to right, rgb(101, 0, 152), rgb(101, 255, 152));"><div class="handle" data-component="g" style="left: 19.6078%;"></div></div><div class="slider b" style="background-image: linear-gradient(to right, rgb(101, 50, 0), rgb(101, 50, 255));"><div class="handle" data-component="b" style="left: 59.6078%;"></div></div></div></div><div class="output-wrapper">#653298</div></div></div></div> 				</div> 				<div class="color-box"> 					<span>hsla: </span><div class="classypicker3 ClassyColor componentcount-4 show-labels"><div class="maximize-wrapper"><div class="inner-maximize-wrapper"><div class="ui-wrapper"><div class="display-wrapper"><div class="display" style="background-color: rgb(0, 0, 0);"></div></div><div class="slider-container"><div class="slider h" style="background-image: linear-gradient(to right, rgb(0, 0, 0), rgb(0, 0, 0), rgb(0, 0, 0), rgb(0, 0, 0), rgb(0, 0, 0), rgb(0, 0, 0), rgb(0, 0, 0));"><div class="handle" data-component="h" style="left: 100%;"></div></div><div class="slider s" style="background-image: linear-gradient(to right, rgb(0, 0, 0), rgb(0, 0, 0));"><div class="handle" data-component="s" style="left: 80%;"></div></div><div class="slider l" style="background-image: linear-gradient(to right, rgb(0, 0, 0), rgb(230, 25, 25), rgb(255, 255, 255));"><div class="handle" data-component="l" style="left: 0%;"></div></div><div class="slider a" style="background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgb(0, 0, 0));"><div class="handle" data-component="a" style="left: 100%;"></div></div></div></div><div class="output-wrapper">hsla(360, 80.00%, 0.00%, 1.00)</div></div></div></div> 				</div> 				<div class="color-box"> 					<span>hsl: </span><div class="classypicker4 ClassyColor componentcount-3 show-labels"><div class="maximize-wrapper"><div class="inner-maximize-wrapper"><div class="ui-wrapper"><div class="display-wrapper"><div class="display" style="background-color: rgb(91, 51, 60);"></div></div><div class="slider-container"><div class="slider h" style="background-image: linear-gradient(to right, rgb(91, 51, 51), rgb(91, 91, 51), rgb(51, 91, 51), rgb(51, 91, 91), rgb(51, 51, 91), rgb(91, 51, 91), rgb(91, 51, 51));"><div class="handle" data-component="h" style="left: 96.4706%;"></div></div><div class="slider s" style="background-image: linear-gradient(to right, rgb(71, 71, 71), rgb(142, 0, 31));"><div class="handle" data-component="s" style="left: 27.8431%;"></div></div><div class="slider l" style="background-image: linear-gradient(to right, rgb(0, 0, 0), rgb(163, 92, 107), rgb(255, 255, 255));"><div class="handle" data-component="l" style="left: 27.8431%;"></div></div></div></div><div class="output-wrapper">#f64747</div></div></div></div> 				</div> 			</div>
.ClassyColor{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block;font-size:15px;width:2.8em;height:2.8em;-webkit-perspective:25em;perspective:25em;position:relative;transition:transform .5s;font-family:monospace}.ClassyColor .maximize-wrapper{position:absolute;border-radius:.3em;background:#fff;padding:.4em;box-shadow:0 .1em .2em rgba(0,0,0,.2);-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-animation:collapse-animation .5s;animation:collapse-animation .5s;cursor:pointer}.ClassyColor .display,.ClassyColor .slider{box-shadow:0 .1em .15em 0 rgba(0,0,0,.2)inset}.ClassyColor.expanded .maximize-wrapper{-webkit-animation:expand-animation .5s;animation:expand-animation .5s;cursor:default}@-webkit-keyframes expand-animation{0%,100%{-webkit-transform:translateZ(0)rotateX(0)rotateY(0)}40%{-webkit-transform:translateZ(.6em)rotateX(-10deg)rotateY(5deg)}}@keyframes expand-animation{0%,100%{transform:translateZ(0)rotateX(0)rotateY(0)}40%{transform:translateZ(.6em)rotateX(-10deg)rotateY(5deg)}}@-webkit-keyframes collapse-animation{0%,100%{-webkit-transform:translateZ(0)rotateX(0)rotateY(0)}40%{-webkit-transform:translateZ(-2em)rotateX(10deg)rotateY(-5deg)}}@keyframes collapse-animation{0%,100%{transform:translateZ(0)rotateX(0)rotateY(0)}40%{transform:translateZ(-2em)rotateX(10deg)rotateY(-5deg)}}.ClassyColor .inner-maximize-wrapper{position:relative;width:2em;height:2em;overflow:hidden;transition:height .5s,width .5s}.ClassyColor .ui-wrapper{white-space:nowrap;display:inline-block}.ClassyColor .ui-wrapper>*{display:inline-block;vertical-align:top}.ClassyColor .display-wrapper{margin-right:.4em;background-size:41%;-webkit-transform-origin:top left;transform-origin:top left;transition:transform .5s}.ClassyColor.componentcount-3 .display-wrapper{-webkit-transform:scale(.6);transform:scale(.6);width:3.4em;height:3.4em}.ClassyColor.componentcount-4 .display-wrapper{-webkit-transform:scale(.45);transform:scale(.45);width:4.6em;height:4.6em}.ClassyColor.expanded .display-wrapper{-webkit-transform:scale(1);transform:scale(1)}.ClassyColor .display-wrapper,.ClassyColor .slider.a:before{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyIiBoZWlnaHQ9IjIiPjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHg9IjAiIHk9IjAiIHN0eWxlPSJmaWxsOiNjYWNhY2EiIC8+PHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgeD0iMSIgeT0iMSIgc3R5bGU9ImZpbGw6I2NhY2FjYSIgLz48L3N2Zz4=)}.ClassyColor .display{width:100%;height:100%}.ClassyColor .slider-container{opacity:0;transition:transform .5s,opacity .5s}.ClassyColor.componentcount-3 .slider-container{-webkit-transform:translateX(-1.4em);transform:translateX(-1.4em)}.ClassyColor.componentcount-4 .slider-container{-webkit-transform:translateX(-2.6em);transform:translateX(-2.6em)}.ClassyColor.expanded .slider-container{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}.ClassyColor .slider{box-sizing:border-box;position:relative;display:block;width:12em;height:1em;background:rgba(128,128,128,.12);overflow:hidden;margin-bottom:.2em;cursor:col-resize}.ClassyColor .slider.a:before{content:\'\';position:absolute;left:0;top:0;width:100%;height:100%;background-position:left center;background-size:auto 27%;z-index:-1}.ClassyColor.show-labels .slider .handle:after{content:attr(data-component);text-transform:uppercase;position:absolute;left:100%;color:#fff;font-size:.8em;top:.2em;margin-left:.2em;text-shadow:1px 0 0 rgba(0,0,0,0.25),-1px 0 0 rgba(0,0,0,0.25),0 1px 0 rgba(0,0,0,0.25),0 -1px 0 rgba(0,0,0,0.25);-moz-text-shadow:1px 0 0 rgba(0,0,0,0.25),-1px 0 0 rgba(0,0,0,0.25),0 1px 0 rgba(0,0,0,0.25),0 -1px 0 rgba(0,0,0,0.25);-webkit-text-shadow:1px 0 0 rgba(0,0,0,0.25),-1px 0 0 rgba(0,0,0,0.25),0 1px 0 rgba(0,0,0,0.25),0 -1px 0 rgba(0,0,0,0.25)}.ClassyColor .slider:last-child{margin-bottom:0}.ClassyColor .slider .handle{display:inline-block;position:relative;content:\'\';margin-top:-.1em;margin-left:-.2em;width:.4em;height:100%;padding-bottom:.2em;background:rgba(255,255,255,.6);box-shadow:0 .1em .2em 0 rgba(0,0,0,0.3),0 0 .3em .1em #fff inset,0 0 0 .1em #fff inset;-moz-box-shadow:0 .1em .2em 0 rgba(0,0,0,0.3),0 0 .3em .1em #fff inset,0 0 0 .1em #fff inset;-webkit-box-shadow:0 .1em .2em 0 rgba(0,0,0,0.3),0 0 .3em .1em #fff inset,0 0 0 .1em #fff inset;pointer-events:none;z-index:1}.ClassyColor .display,.ClassyColor .display-wrapper,.ClassyColor .inner-maximize-wrapper,.ClassyColor .slider{border-radius:.2em}.ClassyColor .output-wrapper{font-size:.8em;height:1.2em;margin-top:.4em;color:#333;-webkit-touch-callout:text;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

[string global_footer]