北京建设官方网站,百度公司官网首页,网页在线制作网站,简易的网站制作#x1f345; 作者主页#xff1a;Java李杨勇 #x1f345; 简介#xff1a;Java领域优质创作者#x1f3c6;、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我#xff0c;都给你】 #x1f345; 欢迎点赞 #x1f44d; 收藏 ⭐留言 … 作者主页Java李杨勇 简介Java领域优质创作者、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我都给你】 欢迎点赞 收藏 ⭐留言 效果演示 文末获取源码 代码目录 主要代码实现 CSS样式
:root {--linear-deg: 90deg;--color_one_rgb: 255;--color_two_rgb: 255;--color_three_rgb: 255;--color_one_opacity: 0.2;--start: 0%;--color_four_rgb: 10;--color_five_rgb: 0;--color_six_rgb: 94;--color_two_opacity: 1;--end: 100%;/* Special Variables */--url: url(https://cdn.pixabay.com/photo/2021/08/25/20/42/field-6574455_960_720.jpg);--font-color: #fff;--font-size: 6vw;--blend-mode: screen;--animation-speed: 5s;--transition: ease;
}body {background: var(--url);background-size: cover;background-repeat: no-repeat;font-family: sans-serif;height: 100vh;width: 100%;overflow: hidden;margin: 0;padding: 0;
}.main {height: 100%;width: 100%;background: linear-gradient( var(--linear-deg), rgba(var(--color_one_rgb), var(--color_two_rgb), var(--color_three_rgb), var(--color_one_opacity)) var(--start), rgba(var(--color_four_rgb), var(--color_five_rgb), var(--color_six_rgb), var(--color_two_opacity)) var(--end));position: relative;display: flex;justify-content: center;align-items: center;animation: Infite var(--animation-speed) var(--transition) infinite;-webkit-animation: Infite var(--animation-speed) var(--transition) infinite;-moz-animation: Infite var(--animation-speed) var(--transition) infinite;background-size: 125% 125%;
}-webkit-keyframes Infite {0% {background-position: 0% 97%}50% {background-position: 100% 4%}100% {background-position: 0% 97%}
}-moz-keyframes Infite {0% {background-position: 0% 97%}50% {background-position: 100% 4%}100% {background-position: 0% 97%}
}keyframes Infite {0% {background-position: 0% 97%}50% {background-position: 100% 4%}100% {background-position: 0% 97%}
}h1 {color: var(--font-color);font-size: var(--font-size);border: .5vw solid black;padding: 0.5rem 1rem;
}.blend {mix-blend-mode: var(--blend-mode);
}.form_container {position: absolute;bottom: 0;right: 0;top: 0;display: flex;flex-direction: column;gap: 1rem;padding: 0.5rem 2rem;background: rgba( 255, 255, 255, 0.55);background: rgba( 255, 255, 255, 0.3);box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37);backdrop-filter: blur( 20px);-webkit-backdrop-filter: blur( 20px);border-radius: 1rem 0 0 1rem;width: 250px;overflow: auto;
}.formgroup {width: 100%;
}.description {width: auto;padding: 0.2rem 0;font-weight: 600;font-size: 1rem;
}h2 {position: relative;font-weight: 700;margin: 0.5rem 0;padding: 0;font-size: 1.3rem;flex: 100%;
}h2::after {content: ;position: absolute;width: 25px;max-width: 200px;bottom: 0;left: 5rem;height: 25px;border-radius: 50%;
}#titelColorOne::after {background: rgba(var(--color_one_rgb), var(--color_two_rgb), var(--color_three_rgb), 1) var(--start);
}#titelColorTwo::after {background: rgba(var(--color_four_rgb), var(--color_five_rgb), var(--color_six_rgb), 1) var(--end);
}.slider {-webkit-appearance: none;width: 50%;border-radius: 1rem;height: 10px;background: #e0e0e0;box-shadow: inset 7px 7px 14px #bebebe, inset -7px -7px 14px #ffffff;outline: none;opacity: 0.7;-webkit-transition: .2s;transition: opacity .2s;
}.slider:hover {opacity: 1;
}.slider::-webkit-slider-thumb {-webkit-appearance: none;appearance: none;width: 15px;height: 15px;border-radius: 1rem;border: 1px solid white;background: linear-gradient( var(--linear-deg), rgba(var(--color_one_rgb), var(--color_two_rgb), var(--color_three_rgb), var(--color_one_opacity)) var(--start), rgba(var(--color_four_rgb), var(--color_five_rgb), var(--color_six_rgb), var(--color_two_opacity)) var(--end));cursor: pointer;
}.slider::-moz-range-thumb {width: 15px;height: 15px;linear-gradient( var(--linear-deg),rgba(var(--color_one_rgb), var(--color_two_rgb), var(--color_three_rgb), var(--color_one_opacity)) var(--start),rgba(var(--color_four_rgb), var(--color_five_rgb), var(--color_six_rgb), var(--color_two_opacity)) var(--end));cursor: pointer;
}#colorSelect {width: 50%;margin: 0;padding: 0;font-weight: 600;background: #fff;cursor: pointer;
}.input {width: 100%;margin: 0;padding: .5rem 0;font-weight: 600;background: #fff;cursor: pointer;
}::-webkit-scrollbar {width: 10px;
}/* Track */::-webkit-scrollbar-track {background: #f1f1f1;
}/* Handle */::-webkit-scrollbar-thumb {background: #888;
}/* Handle on hover */::-webkit-scrollbar-thumb:hover {background: #555;
}summary {font-size: 1.3rem;font-weight: 700;cursor: pointer;margin: 0.5rem 0 0 0;
}media only screen and (max-width: 1000px) {.form_container {bottom: 0;left: 0;right: 0;width: 0%;top: 70%;flex-direction: row;border-radius: 1rem 1rem 0 0;width: 90%;}.formgroup {overflow-y: auto;overflow-x: hidden;}
}media only screen and (max-width: 600px) {body {height: 100%;overflow: auto;width: 100%;}.blend {height: 100vh;width: 100%;display: flex;justify-content: center;align-items: center;}.main {flex-direction: column;width: 100%;}.form_container {width: 80%;position: static;flex-direction: column;border-radius: 1rem 1rem 0 0;height: 100%;background: white;justify-content: center;align-items: center;}.formgroup {height: 100%;width: 90%;border: 4px solid black;padding: 0.5rem 1rem;border-radius: 1rem;}
}
HTML和JavaScript代码 :
A!DOCTYPE html
html langenheadmeta charsetUTF-8titleLight to Dark | Play with Gradient amp; Mix-Blend-Mode/titlelink relstylesheet hrefcss/style.css/headbodydiv classmaindiv classblendh1从亮到暗/h1/divdiv classform_containerdiv classformgrouph2 idtitelColorOneColor 1/h2div classdescriptionR/divinput classslider typerange min0 max255 step1.0 value255 idonespan idone_value255/spanbrdiv classdescriptionG/divinput classslider typerange min0 max255 step1.0 value255 idtwospan idtwo_value255/spanbrdiv classdescriptionB/divinput classslider typerange min0 max255 step1.0 value255 idthreespan idthree_value255/spanbrdiv classdescriptionA/divinput classslider typerange min0 max1 step0.1 value0.2 idopacity_onespan idopacity_one_value0.2/spanbrdiv classdescriptionStartpoint/divinput classslider typerange min0 max100 step1.0 value0 idstartspan idstart_value0/span/divdiv classformgrouph2 idtitelColorTwoColor 2/h2div classdescriptionR/divinput classslider typerange min0 max255 step1.0 value10 idfourspan idfour_value10/spanbrdiv classdescriptionG/divinput classslider typerange min0 max255 step1.0 value0 idfivespan idfive_value0/spanbrdiv classdescriptionB/divinput classslider typerange min0 max255 step1.0 value94 idsixspan idsix_value94/spanbrdiv classdescriptionA/divinput classslider typerange min0 max1 step0.1 value1 idopacity_twospan idopacity_two_value1/spanbrdiv classdescriptionEndpoint/divinput classslider typerange min0 max100 step1.0 value100 idendspan idend_value100%/span/divdiv classformgrouph2DEG Blend-Mode/h2div classdescriptionDEG/divinput classslider typerange min0 max360 step1.0 value90 iddegspan iddeg_value90deg/spandiv classdescriptionMix-Blend-Mode/divselect namemix-blend classinput idmixBlendoption valuenormalnormal/optionoption valuemultiplymultiply/optionoption valuescreenscreen/optionoption valueoverlayoverlay/optionoption valuedarkendarken/optionoption valuelightenlighten/optionoption valuecolor-dodgecolor-dodge/optionoption valuecolor-burncolor-burn/optionoption valuehard-lighthard-light/optionoption valuesoft-lightsoft-light/optionoption valuedifferencedifference/optionoption valueexclusionexclusion/optionoption valuehuehue/optionoption valuesaturationsaturation/optionoption valuecolorcolor/optionoption valueluminosityluminosity/optionoption valueinitialinitial/optionoption valueinheritinherit/optionoption valueunsetunset/option/selectdetailssummaryMore/summarybrdiv classdescriptionFont Color/divinput typecolor value idcolorSelectbrdiv classdescriptionFontSize/divinput classslider typerange min0 max10 step0.25 value3 idfontSizespan idfont_value3vw/spandiv classdescriptionTransition/divselect nametransition classinput idtransitionoption valueeaseease/optionoption valuelinearlinear/optionoption valueease-in-outease-in-out/optionoption valueease-inease-in/optionoption valueease-outease-out/option/selectdiv classdescriptionAnimation Speed/divinput classslider typerange min0.5 max20 step0.25 value5 idspeedspan idspeed_value5s/spanbrdiv classdescriptionBackgorund Image Url/divinput typeurl valueimg/fh.jpg classinput idurlInput/p/details/div/div/divscript srcjs/script.js/script/body/html
上面的script.js文件需要引入进来 源码获取 大家可以点赞、收藏、关注、评论我啦 、查看博主主页或下方微信公众号获取更多~ 打卡 文章 更新 51 / 100天 精彩推荐更新中 HTML5大作业实战案例《100套》 Java毕设项目精品实战案例《100套》
