基于CSS3动态背景登录框代码

心已赠人 2022-04-10 10:09 123阅读 0赞

基于CSS3动态背景登录框代码。这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效。效果图如下：

![201507192305352673.jpg][]

在线预览  源码下载

实现的代码。

html代码：

<div class="htmleaf-container">
            <div class="wrapper">
                <div class="container">
                    <h1>Welcome</h1>
    
                    <form class="form">
                        <input type="text" placeholder="Username">
                        <input type="password" placeholder="Password">
                        <button type="submit" id="login-button">Login</button>
                    </form>
                </div>
    
                <ul class="bg-bubbles">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    
        <script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
        <script>
            $('#login-button').click(function (event) {
                event.preventDefault();
                $('form').fadeOut(500);
                $('.wrapper').addClass('form-success');
            });
        </script>

via：http://\*\*\*/article/51422

[201507192305352673.jpg]: /images/20220331/800fe1375e9d42138539b920fb328711.png

发表评论取消回复

表情：

评论列表（有 0 条评论，123人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS3 背景

一、background-image属性设置一个元素的背景图像。元素的背景是元素的总大小，包括填充和边界（但不包括边距）。默认情况下，background-image放

你的名字/ 2024年02月17日 20:59/ 0 赞/ 42 阅读

相关 CSS3-背景原点、背景裁剪

`background-origin` 用于设置背景图像相对于什么位置来定位（背景图的起点）。语法： background-origin: padding-box

￡神魔★判官ぃ/ 2023年07月02日 04:28/ 0 赞/ 31 阅读

相关 css3背景background

背景图片（background-image）在css3中背景图片可以放置多张图片，`background-image: url(image1.jpg,image2.jp

ゞ浴缸里的玫瑰/ 2023年06月25日 06:25/ 0 赞/ 103 阅读

相关 css3背景渐变

从上到下的线性渐变： background: linear-gradient(red, blue); /\ 标准的语法 \/ 线性渐变 - 从左到右 backgrou

╰+攻爆jí腚メ/ 2023年06月19日 04:26/ 0 赞/ 25 阅读

相关十、CSS3动态背景登录框代码

文章目录十、CSS3动态背景登录框代码 10.1 图片预览 10.2 index.html代码 10.3 style.cs

一时失言乱红尘/ 2022年11月15日 14:20/ 0 赞/ 82 阅读

相关基于CSS3动态背景登录框代码

基于CSS3动态背景登录框代码。这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效。效果图如下： ![201507192305352673.jpg][]

心已赠人/ 2022年04月10日 10:09/ 0 赞/ 124 阅读

相关【CSS3】背景

CSS3 背景 CSS3中包含几个新的背景属性，提供更大背景元素控制。在本章您将了解以下背景属性： ![在这里插入图片描述][2019030514214541.

冷不防/ 2022年03月12日 06:48/ 0 赞/ 317 阅读

相关 CSS3 变色背景动态边框

动态边框样式参考： [https://juejin.im/post/5cdbc938f265da034d2a38c1\heading-2][https_juejin.im_po

ゞ浴缸里的玫瑰/ 2022年01月31日 09:15/ 0 赞/ 291 阅读

相关 CSS3背景，渐变

1，有利于代码维护，有利于使用debug进行调试打断点。 2，后面三个都存在计算，所以分开写最好。背景复合属性最好的写法， background:\abcdef

﹏ヽ暗。殇╰゛Y/ 2021年12月20日 01:04/ 0 赞/ 447 阅读

相关 css input 输入框背景透明

INPUT 背景色设置为透明 BACKGROUND-COLOR: transparent; 例如： <input nam="" style="BA

阳光穿透心脏的1/2处/ 2021年06月24日 13:59/ 0 赞/ 797 阅读