html css js 项目练习,HTML与css和js综合练习-优快云博客

这篇博客分享了一段HTML、JavaScript和CSS结合实现的登录与注册面板的滑动动画效果代码。通过点击切换按钮，面板内容会平滑地从一侧滑入或滑出，提供了一种简洁而动态的用户体验。涉及到的CSS关键帧动画和JavaScript事件监听使得交互更加流畅。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML+JS+CSS综合练习

给大家带来一波干货！！

希望对大家有用

一、滑动样式

Sign Up

Username

Password

True Name

Submit

Or, Sign In

Sign In

Username

Password

Or, Sign Up

main.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: "

标签：container,100%,50%,transform,js,width,HTML,section,css

来源： https://blog.youkuaiyun.com/weixin_46331127/article/details/117752261