css3UI开关按钮.zip资源-CSDN文库

共1个文件

html：1个

版权申诉

javascript

jQuery

html5

90 浏览量 2022-11-16 21:21:32 上传评论收藏 5KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

css3 UI开关按钮.zip （1个子文件）

css3 UI开关按钮

jiaoben793

index.html 19KB

<!doctype html> <html>  <head> <title>css3 UI开关按钮 - 网页模板</title> <meta charset="utf-8"> <style> /* This is just the basic styling for the whole page. */ /* Global ------------------------------------------------------ */ html { font: 62.5%/1 "Lucida Sans Unicode","Lucida Grande",Verdana,Arial,Helvetica,sans-serif; background-color: hsl(200,5%,15%); background-size: 5px 5px; background-image: -webkit-linear-gradient( 45deg, hsla(0,0%,0%,0) 0px, hsla(0,0%,0%,.10) 50%, hsla(0,0%,0%,0) 100% ); } body { margin: 0; } /* list ------------------------------------------------------ */ ul { list-style: none; padding: 50px 0; margin: 0; font-size: 2em; text-align: center; background-image: -webkit-linear-gradient( 0deg, hsla(0,0%,100%,0) 0px, hsla(0,0%,100%,.09) 50%, hsla(0,0%,100%,0) 100% ); } ul li { padding: 50px 0; } /* Aside ------------------------------------------------------ */ aside { position: fixed; top: 20px; left: 20px; } aside button { margin: 0; padding: 10px ; border: none; border-radius: 5px; font-weight: bold; color: hsl(200,100%,60%); background: hsla(0,0%,0%,.12); cursor: pointer; } aside button:hover { background: hsla(0,0%,0%,.2); } aside button:active { -webkit-transform: translateY(1px); } /* * umbrUI meter input by @simurai */ /* -------------- meter -------------- */ meter:nth-child(1) { -webkit-transform: translate(-50px, 50px) rotate(-90deg); } meter:nth-child(2) { -webkit-transform: translate( -25px, 25px) rotate(-90deg); } meter:nth-child(3) { -webkit-transform: translate( 0px, 0px) rotate(-90deg); } meter:nth-child(4) { -webkit-transform: translate( 25px, -25px) rotate(-90deg); } meter:nth-child(5) { -webkit-transform: translate( 50px, -50px) rotate(-90deg); } meter { -webkit-appearance: none; position: relative; display: block; margin: 8px auto; width: 100px; height: 17px; border-radius: 5px; padding: 4px 5px 4px 5px; box-sizing: border-box; background: #000; -webkit-box-shadow: -1px 0 0 hsla(0,0%,100%,.08); -webkit-transform-origin: center 8px; } meter::-webkit-meter-bar { background-color: hsl(200,10%,14%); background-size: 2px 5px; background-image: -webkit-linear-gradient( 0deg, hsla(0,0%,0%,.4) 1px, hsla(0,0%,0%,0) 1px ), -webkit-linear-gradient( 90deg, hsla(0,0%,0%,1) 1px, hsla(0,0%,0%,0) 1px ); } meter::-webkit-meter-optimum-value, meter::-webkit-meter-suboptimum-value, meter::-webkit-meter-even-less-good-value { background-size: inherit; background-image: inherit; -webkit-box-shadow: 0 0 10px 2px hsla(200,100%,50%,.4); -webkit-transition: width 1s cubic-bezier(.20, .10, .20, 1); } /* With these pseudo selectors you could change the colors when changing the value. */ meter::-webkit-meter-optimum-value { background-color: hsl(200,100%,50%); } meter::-webkit-meter-suboptimum-value { background-color: hsl(200,100%,50%); } meter::-webkit-meter-even-less-good-value { background-color: hsl(200,100%,50%); } meter:hover::-webkit-meter-optimum-value, meter:hover::-webkit-meter-suboptimum-value, meter:hover::-webkit-meter-even-less-good-value { /*In the real world, just change the element's value, this is just a hack for this demo.*/ width: 100% !important; -webkit-transition: width .3s cubic-bezier(.20, .10, .20, 1); } /* * umbrUI range slider by @simurai */ /* -------------- Range Slider -------------- */ input[type="range"] { -webkit-appearance: none; /* Remove Safari default */ outline: none; width: 250px; height: 5px; border-radius: 1px; position: relative; background-color: #000; -webkit-background-clip: padding-box; border: 0; border-bottom: 1px solid rgba(255,255,255,0.1); cursor: ew-resize; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; /* Remove Safari default */ position: relative; z-index: 1; width: 26px; height: 40px; border-radius: 3px / 6px ; background-image: -webkit-gradient( linear, left top, right top, color-stop( 0, hsl(0,0%,15%) ), color-stop( .16, hsl(0,0%,22%) ), color-stop( .18, hsl(0,0%,30%) ), color-stop( .2, hsl(0,0%,26%) ), color-stop( .42, hsl(200,60%,30%) ), color-stop( .44, hsl(200,0%,15%) ), color-stop( .46, hsl(200,100%,50%) ), color-stop( .54, hsl(200,100%,50%) ), color-stop( .56, hsl(200,0%,15%) ), color-stop( .58, hsl(200,60%,30%) ), color-stop( .8, hsl(0,0%,26%) ), color-stop( .82, hsl(0,0%,30%) ), color-stop( .84, hsl(0,0%,22%) ), color-stop( 1, hsl(0,0%,15%) ) ); -webkit-box-shadow: inset hsla(0,0%,100%,.15) 0 1px 0px, hsl(0,0%,17%) 0 2px 0px, hsl(0,0%,15%) 0 4px 0px, hsl(0,0%,13%) 0 6px 0px, rgba(0,0,0,.5) 0 8px 5px; -webkit-transform: translateY(-3px); -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.6, transparent), to( rgba(255,255,255,0.15) )); } input[type="range"]:hover { background-image: -webkit-gradient( linear, left top, right top, color-stop( 0, hsl(200,80%,45%) ), color-stop( .08, hsl(200,80%,15%) ), color-stop( .5, hsl(200,80%,0%) ), color-stop( .92, hsl(200,80%,15%) ), color-stop( 1, hsl(200,80%,45%) ) ); -webkit-box-shadow: inset #000 1px 1px 1px, inset #000 -1px -1px 1px; } /* * umbrUI checkboxes by @simurai * Usage: <input type="checkbox" data-icon1="P" data-icon2="v" /> */ /* ----------- Checkbox */ input[type="checkbox"] { -webkit-appearance:none; /* Remove Safari default */ outline: none; width: 120px; height: 40px; position: relative; border-radius: 6px; background-color: #000; -webkit-background-clip: padding-box; border: 0; border-bottom: 1px solid transparent; -webkit-perspective: 200; } input[type="checkbox"]:before, input[type="checkbox"]:after { font: bold 22px/32px sans-serif; text-align: center; position: absolute; z-index: 1; width: 56px; height: 30px; top: 4px; border: 0; border-top: 1px solid rgba(255,255,255,0.15); } input[type="checkbox"]:before { content: attr(data-icon1); left: 4px; border-radius: 3px 0 0 3px; } input[type="checkbox"]:after { content: attr(data-icon2); right: 4px; border-radius: 0 3px 3px 0; } /* ----------- checked/unchecked */ /* unchecked */ input[type="checkbox"] { -webkit-border-image: -webkit-gradient(linear, 100% 0%, 0% 0%, from(rgba(255,255,255,0)), to(rgba(255,255,255,0)), color-stop(.1,rgba(255,255,255,.05)), color-stop(.3,rgba(5,137,200,0.4)), color-stop(.45,rgba(255,255,255,.05)), color-stop(.9,rgba(255,255,255,.1)) )100% 100%; background-image: -webkit-gradient( linear, right top, left top, color-stop( 0, hsl(0,0%,0%) ), color-stop( 0.14, hsl(0,0%,50%) ), color-stop( 0.15, hsl(0,0%,0%) ) ); -webkit-box-shadow: inset #000 -7px 0 1px, inset #000 0 -5px 10px, inset #000 0 3px 3px; } input[type="checkbox"]:after { background-image: -webkit-gradient(linear, 70% top, 40% bottom, from( hsl(0,0%,17%) ),to( hsl(0,0%,12%) ) ); border-right: 1px solid transparent; -webkit-border-image: -webkit-gradient(linear, left bottom, left top, from(rgba(255,255,255,0)), color-stop(.2,rgba(255,255,255,0)), color-stop(.4,rgba(255,255,255,.5)),

评论收藏

内容反馈

版权申诉