网盘建网站,宁波公司网站开发,广州国外建站模板,地方门户网站系统文章目录案例一 滑动样式案例二 滑动样式案例三 动态样式案例四 普通样式案例五 滑动样式案例六 普通样式具体怎么获取呢#xff1f;案例一 滑动样式
login.html
!DOCTYPE html
html langen
headmeta charsetUTF-8…
文章目录案例一 滑动样式案例二 滑动样式案例三 动态样式案例四 普通样式案例五 滑动样式案例六 普通样式具体怎么获取呢案例一 滑动样式
login.html
!DOCTYPE html
html langen
headmeta charsetUTF-8titleLogin/titlelink relstylesheet hrefdefault.css
/head
body
div classpagediv classpaneldiv classpanel_visible!--注册表单--div classpanel_contenth1 classpanel_title Sign Up /h1form classformlabel classform_label forusernameUsername/labelinput classform_input typetext idusername nameusernamelabel classform_label forpasswordPassword/labelinput classform_input typepassword idpassword namepasswordlabel classform_label fortruenameTrue Name/labelinput classform_input typetext idtruename namefullnamebutton classform_btn typebutton valueSubmitSubmit/buttonbutton classform_toggle js-formToggle typebuttonOr, Sign In/button/form/div!--登录表单--div classpanel_content panel_content-overlay js-panel_content h1 classpanel_title Sign In /h1form classformlabel classform_label forusernameInUsername/labelinput classform_input typetext idusernameIn nameusernameInlabel classform_label forpasswordInPassword/labelinput classform_input typepassword idpasswordIn namepasswordInbutton classform_btn typebutton valueSubmitSign In/buttonbrbutton classform_toggle js-formToggle typebuttonOr, Sign Up/button/form/div/divdiv classpanel_back js-imageAnimateimg classpanel_img srclogin.jpg stylewidth: 235px;height: 457px //div/div/div
script srcmain.js/script
/body
/htmlmain.js
var toggleBtns document.querySelectorAll(.js-formToggle);
for(var i 0; i toggleBtns.length; i){toggleBtns[i].addEventListener(click,toggleForm);
}var firstClick true;function toggleForm(){if(!firstClick){document.querySelector(.js-imageAnimate).classList.toggle(animate);document.querySelector(.js-imageAnimate).classList.toggle(animateOut);document.querySelector(.js-panel_content).classList.toggle(animate);document.querySelector(.js-panel_content).classList.toggle(animateOut);}else{firstClick false;document.querySelector(.js-imageAnimate).classList.add(animate);document.querySelector(.js-panel_content).classList.add(animate);}
}背景图 default.css
body, html{font-family: Ariel, sans-serif;width:100%;height:100%;margin:0;padding:0;display:inline-block;
}
.page{display:flex;flex-flow:row;flex-wrap:nowrap;align-items:center;justify-content:center;width:100%;height:100%;background-color: #0f95b0;
}
.panel{display:inline-block;position:relative;
}.panel_visible{position:relative;overflow: hidden;
}
.panel_title{margin-top: .5em;margin-bottom: 1.2em;
}.panel_content{padding: 20px;background-color: white;z-index:10;position:relative;
}
.panel_content-overlay{position:absolute;top:0;left:100%;height:100%;
}.panel_content.animate{animation: movePanel 2s forwards ;
}keyframes movePanel{0%, 30%{transform: translateX(0%);}35%, 100%{transform: translateX(-100%);}}
.panel_content.animateOut{animation: movePanelOut 2s forwards ;
}
keyframes movePanelOut{0%, 30%{transform: translateX(-100%);}35%, 100%{transform: translateX(0%);}
}
.panel_back{position:absolute;z-index:0;top:50%;left: 0;width:110%;transform: translate(70%,-50%);
}.panel_back.animate{animation: move 2s forwards ;
}keyframes move{
0%{transform: translate(70%,-50%);z-index:0;
}
15%{transform: translate(140%,-50%);z-index:10;
}
75%{transform: translate(-120%,-50%);z-index:10;
}
100%{transform: translate(-50%,-50%);z-index:0;
}
}
.panel_back.animateOut{transform: translate(-50%,-50%);animation: moveOut 2s forwards ;
}
keyframes moveOut{
0%{transform: translate(-50%,-50%);z-index:0;
}
15%{transform: translate(-120%,-50%);z-index:10;
}
75%{transform: translate(140%,-50%);z-index:10;
}
100%{transform: translate(70%,-50%);z-index:0;
}}
.panel_img{width:100%;display:block;
}/* Form */
.form{box-sizing:border-box;
}
.form_label{display:block;color: #3D3D3D;font-weight: 600;margin-bottom: 5px;
}
.form_input{border-radius: 3px;background-color: #f2f2f2 ;box-shadow: 0px 2px 2px #D6D6D6;border:none;padding: 2%;margin-bottom: 15px;width: 250px;box-sizing:border-box;position:relative;
}
.form_input:focus{box-shadow: none;outline-color: #0f95b0;
}.form_input::after{/* TODO: make this after portion work */content: ️;position:absolute;top: 0;left: 0;height: 50px;width: 50px;background-color: red;
}
.form_btn{margin-top: 1.2em;margin-bottom: 2em;display:block;width:100%;background-color: #0f95b0;color: white;border:none;padding: .6em;text-transform: uppercase;font-weight: 500;font-size: 1.1em;border-radius: 3px;cursor: pointer;
}.form_toggle{background-color: transparent;border: none;padding: 0;margin:0;font-size: 1.1em;box-sizing: border-box;border-bottom: 1px solid transparent;cursor: pointer;
}
.form_toggle:hover{border-bottom: 1px solid #0f95b0;
}
.form_toggle:focus{outline: none;border-bottom: 1px solid #0f95b0;
}效果图
案例二 滑动样式
style.css
*{padding: 0;margin:0;box-sizing: border-box;font-family: Poppins,sans-serif;
}/* 设置整个表单参数 (父盒子)*/section {position: relative;min-height: 100vh;background: lightblue;display: flex;justify-content: center;align-items: center;padding: 20px;
}section .container {position: relative;width: 800px;height: 500px;background: #fff;box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);overflow: hidden;
}section .container .user{position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;
}/* 更改图片 左侧*/
section .container .imgBx{position: relative;width: 50%;height: 100%;/* background: #fff; */transition: .5s;
}section .container .user .imgBx img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;
}/* 右侧表单盒子 */section .container .user .formBx {position: relative;width: 50%;height: 100%;background: #fff;display: flex;justify-content: center;align-items: center;padding: 40px;transition: .5s;
}/* h2 */section .container .user .formBx form h2{font-size: 18px;font-weight: 600;text-transform: uppercase;/*大小*/letter-spacing: 2px;/* 间距*/text-align: center;width: 100%;margin-bottom: 10px;color: #555;
}/* 表单文字属性 */section .container .user .formBx form input{position: relative;width: 100%;padding: 10px;background: #f5f5f5;color: #333;border: none;outline:none;box-shadow:none;margin: 8px 0;font-size: 14px;letter-spacing:1px;font-weight: 300;
}/* 为登录设置样式 */section .container .user .formBx form input[typesubmit]{max-width: 100px;background: #677eff;color:#fff;cursor:pointer;font-size: 14px;font-weight: 500;letter-spacing: 1px;transition: .5s;
} /* 没有账号时 */section .container .user .formBx form .signup{position: relative;margin-top: 20px;font-size: 12px;letter-spacing: 1px;color: #555;text-transform: uppercase;font-weight: 300;
}section .container .user .formBx form .signup a{font-weight: 600;text-decoration: none;color: #677eff;
}
section .container .singupBx {pointer-events: none;
}section .container.active .singupBx {pointer-events: initial;
}section .container .singupBx .formBx {left: 100%;
}section .container.active .singupBx .formBx {left: 0;
}section .container .singupBx .imgBx {left: -100%;
}section .container.active .singupBx .imgBx {left: 0;
}section .container .singinBx .formBx {left: 0;
}section .container.active .singinBx .formBx {left: 100%;
}section .container .singinBx .imgBx {left: 0;
}section .container.active .singinBx .imgBx {left: 100%;
}media (max-width: 991px) {section .container {max-width: 400px;}section .container .imgBx {display: none;}section .container .user .formBx {width: none;}
}First.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title登录/titlelink relstylesheet hrefcss/style.csslink relshortcut icon hrefimg/favicon.ico
/head
bodysection!-- 登录 --div classcontainerdiv classuser singinBxdiv classimgBximg srcimg/1.jpg alt/divdiv classformBxform actionh2登录/h2input typetext name placeholder用户名input typepassword name placeholder密码input typesubmit name value登录p classsignup没有账号a href# onclicktopggleForm();注册/a/p/form/div/div!-- 注册 --div classuser singupBxdiv classformBxform actionh2注册/h2input typetext name placeholder用户名input typeemail name placeholder邮箱地址input typepassword name placeholder密码input typepassword name placeholder再次输入密码input typesubmit name value注册p classsignup已有账号a href# onclicktopggleForm();登录/a/p/form/divdiv classimgBximg srcimg/2.jpg alt/div/div/div/sectionscript typetext/javascriptfunction topggleForm(){var container document.querySelector(.container);container.classList.toggle(active);}/script
/body
/htmlimg图片 favicon.ico 1.jpg 2.jpg 效果图
案例三 动态样式
index.html
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlelink relstylesheet href./style.cssscript srchttps://cdn.staticfile.org/vue/2.6.9/vue.js/script
/headbodydiv idapp classcontainerimg src./1.jpeg /div classpaneldiv classcontent logindiv classswitchspan :class{active: active login} clickgo(login)登陆/spanspan//spanspan :class{active: active register} clickgo(register)注册/span/divdiv classform idfromLogintemplate v-ifactive registerdiv classinputinput typetext nameemail idemail /label foremail邮箱/label/divdiv classinputinput typetext nameUsername idusername /label forusername用户名/label/divdiv classinputinput typepassword namePassword idPassword /label forPassword密码/label/divdiv classinputinput typepassword namerepeat idPasswordrepeat /label forPasswordrepeat重复密码/label/div/templatetemplate v-ifactive logindiv classinputinput typetext nameUsername idusername /label forusername用户名/label/divdiv classinputinput typepassword namePassword idPassword /label forPassword密码/label/div/templatespan忘记?/spanbutton typesubmit登陆/button/div/div/div/div
/bodyscript
var vue new Vue({el: #app,data: {active: login},methods: {go (type) {this.active type}},beforeMount () {}
})
/script/htmlstyle.css
* {margin: 0;padding: 0;
}body {height: 100vh;display: flex;justify-content: center;align-items: center;font-family: miaowu;background: linear-gradient(45deg, rgb(80, 150, 250), rgb(245, 189, 253)) fixed;
}.container {position: relative;width: 70rem;
}.container img {width: 70rem;
}.switch span {color: #ccc;font-size: 1.4rem;cursor: pointer;
}.switch span.active {color: rgb(181, 154, 254);
}.panel {width: 30%;margin: 10rem 0 0;position: absolute;right: 0;top: 0;display: flex;justify-content: center;
}.form {width: 12rem;margin: 3rem 0 0;
}.form .input {position: relative;opacity: 1;height: 2rem;width: 100%;margin: 2rem 0;transition: .4s;
}.input input {outline: none;width: 100%;border: none;border-bottom: .1rem solid rgb(181, 154, 254);position: relative;line-height: 35px;background: transparent;z-index: 1;
}.input label {position: absolute;left: 0;top: 20%;font-size: 1.2rem;color: rgb(129, 101, 207);transition: .3s;
} .input input:focus ~ label {top: -50%;font-size: .9rem;
}.form span {display: block;color: rgb(110, 89, 167);font-size: .8rem;cursor: pointer;
}.form button {border: none;outline: none;margin: 2.5rem 0 0;width: 100%;height: 3rem;border-radius: 3rem;background: linear-gradient(90deg, rgb(181, 154, 254), rgb(245, 189, 253));box-shadow: 0 0 8px rgb(181, 154, 254);cursor: pointer;color: white;font-family: miaowu;
}#live2dcanvas {border: 0 !important;
}背景图
效果图 案例四 普通样式
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlelogin/titlestylebody {/* 设置边距可以设置四个方向分别是 上 右 下 左 */margin: 0; /* 填充 也是可以设置四个方向同上 */padding: 0;/* 设置字体风格 */font-family: sans-serif;/* 设置背景颜色 */background: lightsteelblue;}.box {width: 300px;padding: 40px;/* 绝对定位通过这个可以使元素放在页面的任何一个位置上 */position: absolute;/* 以下三行代码实现了块元素在百分比下居中 可以参考 https://www.cnblogs.com/knuzy/p/9993181.html */top: 50%;left: 50%;transform: translate(-50% , -50%);/* 设置登陆界面的背景颜色 */background-color: cornflowerblue;/* 规定标签中元素属性为 text 的居中 */text-align: center;}.box h1 {color: #349;/* 控制文本大小写 */text-transform: uppercase;font-size: 500;}/* 选中输入账号密码的框框 */.box input[typetext],.box input[typepassword] {border: 0;background: none;display: block;/* 第一个参数定上下 20px 第二个auto自动适配 */margin: 20px auto;/* 文本居中 */text-align: center;/* 设置边框大小和颜色 */border: 2px solid #3498db;/* 两个参数分别对应 高 和 宽 */padding: 14px 10px;/* 设置边框为宽 */width: 200px;/* 边框对应的属性分别有三个 https://www.w3school.com.cn/cssref/pr_outline.asp */outline: none;color: white;/* 边框的半径 更圆润*/border-radius: 24px;/* 设置动画的过渡时间 */transition: 0.25s;}/* 设置变化后的界面 */.box input[typetext]:focus,.box input[typepassword]:focus {width: 280px;border-color: #2ecc71;}.box input[typesubmit] {border: 0;background: none;display: block;margin: 20px auto;text-align: center;border: 2px solid #2ecc71;padding: 14px 40px;outline: none;color: black;border-radius: 24px;transition: 0.25s;}.box input[typesubmit]:hover { background: #2ecc71;}/style
/head
body!-- 表格元素 相关属性可参考 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/form --from classbox action login.html methodposth1 codestep/h1input type text name placeholderUsername input type password name placeholderPasswordinput typesubmit value Login/from
/body
/html效果图
案例五 滑动样式
!DOCTYPE html
html langen
headmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /meta http-equivX-UA-Compatible contentieedge /titleLogin/titlestyle* {font-family: montserrat, sans-serif;}body {margin: 0;padding: 0;background: #333;}.login-box {position: absolute;top: 0;left: -100%;width: 100%;height: 100vh; /* vh 视口高度 viewport height 百分比单位*/background-image: linear-gradient(45deg,#9fbaa8,#31354c); /*设置颜色渐变 方向(0deg垂直向上) 起点颜色 终点颜色*/transition: 0.4s; /*过度效果 property duration timing-function delay 默认属性:all 0 ease 0*/}.login-form {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); /*定义 2D 转换8 */color: white;text-align: center;}.login-form h1 {font-weight: 400;margin-top: 0;}.txtb {display: block;box-sizing: border-box;width: 240px;background: #ffffff28;border: 1px solid white;padding: 10px 20px;color: white;outline: none;margin: 10px 0;border-radius: 6px;text-align: center;}.login-btn {width: 240px;background: #2c3e50;border: 0;color: white;padding: 10px;border-radius: 6px;cursor: pointer;}.hide-login-btn {color: #000;position: absolute;top: 40px;right: 40px;cursor: pointer;font-size: 30px;opacity: 0.7;transform: rotate(45deg); /*定义 2D 转换8 */}.show-login-btn {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);color: white;border: 2px solid;padding: 10px;cursor: pointer;}.showed {left: 0;}/style
/head
body
div classshow-login-btn- Show Login Form
/divdiv classlogin-boxdiv classhide-login-btn/divform actionindex.html methodPOST classlogin-formh1Welcome/h1input classtxtb typetext name placeholderUsername /input classtxtb typepassword name placeholderPassword /input classlogin-btn typesubmit name valueLogin disabled //form
/div
script typetext/javascriptfunction hasClass(element, clssname) {return element.className.match(new RegExp((\\s|^) clssname (\\s|$)))}function addClass(element, clssname) {if (!this.hasClass(element, clssname)) element.className clssname}function removeClass(element, clssname) {if (hasClass(element, clssname)) {var reg new RegExp((\\s|^) clssname (\\s|$))element.className element.className.replace(reg, )}}function toggleClass(element, clssname) {if (hasClass(element, clssname)) {removeClass(element, clssname)} else {addClass(element, clssname)}}var loginBox document.getElementsByClassName(login-box)var showBtn document.getElementsByClassName(show-login-btn)var hideBtn document.getElementsByClassName(hide-login-btn)showBtn[0].addEventListener(click, function() {toggleClass(loginBox[0], showed)})hideBtn[0].addEventListener(click, function() {toggleClass(loginBox[0], showed)})
/script
/body
/html效果图
案例六 普通样式
login.html
!DOCTYPE html
htmlheadmeta charsetutf-8link relstylesheet hrefcss/style.css /link relstylesheet hrefcss/iconfont.css /title登录界面/title/headbodydiv idbigBoxh1LOGIN/h1div classinputBoxdiv classinputTextspan classiconfont icon-nickname/spaninput typetext placeholderUsername //divdiv classinputTextspan classiconfont icon-visible/spaninput typepassword placeholderPassword //div/divinput classloginButton typebutton valueLogin //div/body
/html
style.css
body
{margin: 0;padding: 0;background-image: url(../img/bglogin.png); /* 背景图片 */background-repeat: no-repeat; /* 背景图片不重复 */
}#bigBox
{margin: 0 auto; /* login框剧中 */margin-top: 200px; /* login框与顶部的距离 */padding: 20px 50px; /* login框内部的距离(内部与输入框和按钮的距离) */background-color: #00000090; /* login框背景颜色和透明度 */width: 400px;height: 300px;border-radius: 10px; /* 圆角边 */text-align: center; /* 框内所有内容剧中 */
}#bigBox h1
{color: white; /* LOGIN字体颜色 */
}#bigBox .inputBox
{margin-top: 50px; /* 输入框顶部与LOGIN标题的间距 */
}#bigBox .inputBox .inputText
{margin-top: 20px; /* 输入框之间的距离 */
}#bigBox .inputBox .inputText span
{color: white; /* icon颜色 */
}#bigBox .inputBox .inputText input
{border: 0; /* 删除输入框边框 */padding: 10px 10px; /* 输入框内的间距 */border-bottom: 1px solid white; /* 输入框白色下划线 */background-color: #00000000; /* 输入框透明 */color: white; /* 输入字体的颜色 */
}#bigBox .loginButton
{margin-top: 30px; /* 按钮顶部与输入框的距离 */width: 150px;height: 25px;color: white; /* 按钮字体颜色 */border: 0; /* 删除按钮边框 */border-radius: 20px; /* 按钮圆角边 */background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%); /* 按钮颜色 */
}iconfont.css
font-face {font-family: iconfont;src: url(iconfont.eot?t1591106386397); /* IE9 */src: url(iconfont.eot?t1591106386397#iefix) format(embedded-opentype), /* IE6-IE8 */url(data:application/x-font-woff2;charsetutf-8;base64,d09GMgABAAAAAAPkAAsAAAAACCgAAAOVAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqEDIM4ATYCJAMMCwgABCAFhG0HPBsEB1GUDUqS7IckiWBsgSKJ5iIQA3MI4geKAwAAlgIQD19j7f3dvUMtQRJNHn26aJJEYoiEToIQxUIheSdEpnsms/x7VRC3R1ElWSaNOmT7YvvDbzSSY3SaIQIoTG0rs5YPKzkCKMdmFhnZl8Ihekb28ETv33fz7o4nDbF5zc4pzmmRl2AcUABjb0swQJKkHuIV7u0w15PoF6fKeXl/dOLUktBuwXiMPBUqZVSKTXZoVaolowt4kxdbTpJfpz6349fEyEhqWS078rBni1tfpx/3fAd/w7XLgJ7PAP4SWSMKynEbqlpRzUMjauqV0W1uSqIqSxvP//CxNUDX/8EiCqKKZjWCYCNNJsW1WLL5Bzlmzb65zFXW4U/ImqTtRmqq8rTVL84YCiXK964MkBwBChhC37GSmaAaSZCIxivE4l2FIEkKCE4PJJNjXMSMJhepAICiEKKrGWaMhIBoAYhLZOh2Bu7SzZGtAqIe0SYcGUlQiUgCUTVo/TnJjVvc95HI5Yi3TFFIQg4HkA28MzKSzM0xiMcdSST3vj0UzjDecQXy46LKNurEblFc0L3gGbB7yd2/6rYfSSsEoO2lVGueUc76Qd5FBr4XjBRXGr52LLO3SgfmellnsiUfeLOjkZD4cMQHi4vxEFvmweWxo5OZvix0VJYMQTybB2X8TbsGqooxPqHm3j4sdDQ2N6Fh17hMYUVnLuDgqKukpbs4WGWHRlWt5QUdhL9OpNfZny4NlGbb7prFux5BkrDntnR4Yvm72lYnjz7vL23GnzeXB3LWuqPt09ct8c9GsyblVqZb7y8lN/4H2amVv2PFX2y3g/ef9DBVFu3RqJVqzfyG7ZUnRuFSdi8KyWYY7O/KbDAlkCDr/xNbur7lSyk2hFqBjZDU6IWsVjyYMehosEUVNWag3pjDiY36MCqotRh1AdAaPUFSbNXyFr9IAv2Fyq6/UNVa/Ch3lbo52wwGJudLkYlaEG/QGCylCytdILsM/QeYsVJro7QnaBFZn5rLRA0yRxxjgHr0FEQLiLIF92AzjOIOcsxCNzPgicbsLJW9aMZkSaljCUOKQBbQXoCAkUmRW1l0cp8/gzwPYgrXFFXpryDmBLWDeTPmWiAPRGmromu5xHnkWSAEAYRlEmAfDCg2QxmQl7cKIUPM8HsEchtmSTlqK5qZX5I83yqoR4/JkSJHUXMcuEDH2NoLTJSqBEslAAAA) format(woff2),url(iconfont.woff?t1591106386397) format(woff),url(iconfont.ttf?t1591106386397) format(truetype), /* chrome, firefox, opera, Safari, Android, iOS 4.2 */url(iconfont.svg?t1591106386397#iconfont) format(svg); /* iOS 4.1- */
}.iconfont {font-family: iconfont !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.icon-visible:before {content: \e6a2;
}.icon-nickname:before {content: \e6a0;
}效果图
具体怎么获取呢
鉴于小伙伴们没有csdn积分我把代码压缩成了一个压缩包放在了gitee上面需要的请点击下载 点击下载
