前端·学习 | 登录界面特效（一）

不变因子

已于 2022-07-07 18:38:20 修改

阅读量639

点赞数 1

分类专栏：前端文章标签：学习 html5 前端

于 2022-07-05 19:02:37 首次发布

本文链接：https://blog.csdn.net/qq_59235603/article/details/125591534

版权

本文分享了个人的学习内容，聚焦前端登录界面的特效实现。通过HTML、CSS和JavaScript，详细讲解了如何创建登录特效，包括界面展示和代码实现。在总结中提到，当动画效果达到边界时，可以添加回弹效果以增强用户体验。

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

前言：

个人学习内容分享

特效展示

前端界面特效（一）

实现代码：

html部分：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>登录页面特效（一）</title>
    <link rel="stylesheet" href="../css/1.css">
    <script src="../js/jquery-3.6.0.min.js"></script>

</head>

<body>
    <div class="container">
        <h1>第一个</h1>
        <form action="">
            <input type="text" class="tbx" placeholder="账号" id="zhanghao" >
            <input type="password" class="tbx" placeholder="密码" id="mima">
            <button class="button" type="button" id="entry_btn" onclick="myfunc