简单CSS/HTML的动画登录注册网页[拳皇]_html如何给注册登录界面加上动画显示-->-CSDN博客

本文链接：https://blog.csdn.net/m0_58084897/article/details/125328289

本文展示了如何使用CSS和HTML创建一个带有动画效果的登录注册页面，重点在于过渡与动画的实现。文章包括页面截图、方法原理、同一页面切换登录注册盒子的实现，以及详细代码展示。

摘要由CSDN通过智能技术生成

简单CSS/HTML的动画登录注册网页[拳皇]

今天我们学习了过渡与动画效果，接下来将结合此方法呈现出来一个简单的CSS/HTML的登录注册网页。
*同页面切换登录注册哦~

页面截图

登录页面效果1
登录页面效果2
登录页面效果3
切换注册页面

方法原理

[1]. 定义动画 @keyframes
[2].调用方法

基础代码如下

//形式一  关键词：0% 和 100%
@keyframes animation{
   
     0%{
   //动画的开始
     ....
     }
     100%{
   //动画的结束
     ...
     }
}
//形式二  关键词：from 和 to
@keyframes animation{
   
     from{
   //动画的开始
     ....
     }
     to{
   //动画的结束
     ...
     }
}

同一页面切换盒子

此处的js代码用于在同一页面切换登录注册盒子。

注意要配合css中的display语句使用

//css代码
<style>
.login{
   display: block;}
.register{
   display: none;}
</style>

//js代码
<script type="application/javascript" >
    window.onload=function () {
   
        let as=document.getElementsByClassName('content-header')[0].getElementsByTagName('a');
        let contents=document.getElementsByClassName("dom");
        for (let i=0;i<as.length;i++){
   
            let a=as[i];
            a.id=i;
            a.onclick=function () {
   
                for(let j=0;j<as.length;j++){
   
                    as[j].className="";
                    contents[j].style.display="none";
                }
                this.className='current';
                contents[this.id].style.display='block';
            }
        }
    }
</script>

动画效果

这里的动画效果需要一个连续的图片，如果有想放的图片可以把Gif图片按帧分解然后拼成一行连续的图片，建议按帧分解的图片数量不要超过20张，会难以拼图哦~

//定义动画代码
.left-people{
   
   width:450px;
   height: 450px;
   position: relative;
   top: -710px;
   left:20px;
   background-image: url('./img/left.png');
   animation-name: test1;
   //为动画命名为test1
   animation-timing-function: steps(16,end);
    //按帧分解的图片数量为16
   animation