一款很漂亮的CSS3登录界面

最新推荐文章于 2024-05-27 18:50:16 发布
最新推荐文章于 2024-05-27 18:50:16 发布
阅读量3.5w 收藏 169
点赞数 29
分类专栏： css3.0 Html/Css 文章标签： css3 界面
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jl244981288/article/details/47126409
版权

一款很漂亮的CSS3登录界面

-随着高级浏览器的出现，对css3的支持也很不错了，下面我展现自己用CSS3做的一款登陆界面。
-效果如图
效果图
-代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>一款很漂亮的CSS3登录界面</title>
    <style type="text/css">
        * {
            box-sizing: border-box;
        }
        body {
            margin: 0; 
            padding: 0;
            font: 16px/20px microsft yahei;
        }
        .wrap {
            width: 100%;
            height: 400px;
            padding: 40px 0;
            position: fixed;
            top: 50%;
            margin-top: -200px;
            opacity: 0.8;
            background: linear-gradient(to bottom right,#50a3a2,#53e3a6);
            background: -webkit-linear-gradient(to bottom right,#50a3a2,#53e3a6);
        }
        .container {
            width: 60%;
            margin: 0 auto;
        }
        .container h1 {
            text-align: center;
            color: #FFFFFF;
            font-weight: 500;
        }
        .container input {
            width: 320px;
            display: block;
            height: 36px;
            border: 0;
            outline: 0;
            padding: 6px 10px;
            line-height: 24px;
            margin: 32px auto;
            -webkit-transition: all 0s ease-in 0.1ms;
            -moz-transition: all 0s ease-in 0.1ms;
            transition: all 0s ease-in 0.1ms;
        }
        .container input[type="text"] , .container input[type="password"]  {
            background-color: #FFFFFF;
            font-size: 16px;
            color: #50a3a2;
        }
        .container input[type='submit'] {
            font-size: 16px;
            letter-spacing: 2px;
            color: #666666;
            background-color: #FFFFFF;
        }
        .container input:focus {
            width: 400px;
        }
        .container input[type='submit']:hover {
            cursor: pointer;
            width: 400px;
        }

        .wrap ul {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -10;
        }
        .wrap ul li {
            list-style-type: none;
            display: block;
            position: absolute;
            bottom: -120px;
            width: 15px;
            height: 15px;
            z-index: -8;
            background-color:rgba(255, 255, 255, 0.15);
            animotion: square 25s infinite;
            -webkit-animation: square 25s infinite;
        }
        .wrap ul li:nth-child(1) {
            left: 0;
            animation-duration: 10s;
            -moz-animation-duration: 10s;
            -o-animation-duration: 10s;
            -webkit-animation-duration: 10s;
        }
        .wrap ul li:nth-child(2) {
            width: 40px;
            height: 40px;
            left: 10%;
            animation-duration: 15s;
            -moz-animation-duration: 15s;
            -o-animation-duration: 15s;
            -webkit-animation-duration: 15s;
        }
        .wrap ul li:nth-child(3) {
            left: 20%;
            width: 25px;
            height: 25px;
            animation-duration: 12s;
            -moz-animation-duration: 12s;
            -o-animation-duration: 12s;
            -webkit-animation-duration: 12s;
        }
        .wrap ul li:nth-child(4) {
            width: 50px;
            height: 50px;
            left: 30%;
            -webkit-animation-delay: 3s;
            -moz-animation-delay: 3s;
            -o-animation-delay: 3s;
            animation-delay: 3s;
            animation-duration: 12s;
            -moz-animation-duration: 12s;
            -o-animation-duration: 12s;
            -webkit-animation-duration: 12s;
        }
        .wrap ul li:nth-child(5) {
            width: 60px;
            height: 60px;
            left: 40%;
            animation-duration: 10s;
            -moz-animation-duration: 10s;
            -o-animation-duration: 10s;
            -webkit-animation-duration: 10s;
        }
        .wrap ul li:nth-child(6) {
            width: 75px;
            height: 75px;
            left: 50%;
            -webkit-animation-delay: 7s;
            -moz-animation-delay: 7s;
            -o-animation-delay: 7s;
            animation-delay: 7s;
        }
        .wrap ul li:nth-child(7) {
            left: 60%;
            animation-duration: 8s;
            -moz-animation-duration: 8s;
            -o-animation-duration: 8s;
            -webkit-animation-duration: 8s;
        }
        .wrap ul li:nth-child(8) {
            width: 90px;
            height: 90px;
            left: 70%;
            -webkit-animation-delay: 4s;
            -moz-animation-delay: 4s;
            -o-animation-delay: 4s;
            animation-delay: 4s;
        }
        .wrap ul li:nth-child(9) {
            width: 100px;
            height: 100px;
            left: 80%;
            animation-duration: 20s;
            -moz-animation-duration: 20s;
            -o-animation-duration: 20s;
            -webkit-animation-duration: 20s;
        }
        .wrap ul li:nth-child(10) {
            width: 120px;
            height: 120px;
            left: 90%;
            -webkit-animation-delay: 6s;
            -moz-animation-delay: 6s;
            -o-animation-delay: 6s;
            animation-delay: 6s;
            animation-duration: 30s;
            -moz-animation-duration: 30s;
            -o-animation-duration: 30s;
            -webkit-animation-duration: 30s;
        }

        @keyframes square {
            0%  {
                    -webkit-transform: translateY(0);
                    transform: translateY(0)
                }
            100% {
                    bottom: 400px;
                    transform: rotate(600deg);
                    -webit-transform: rotate(600deg);
                    -webkit-transform: translateY(-500);
                    transform: translateY(-500)
            }
        }
        @-webkit-keyframes square {
            0%  {
                -webkit-transform: translateY(0);
                transform: translateY(0)
            }
            100% {
                bottom: 400px;
                transform: rotate(600deg);
                -webit-transform: rotate(600deg);
                -webkit-transform: translateY(-500);
                transform: translateY(-500)
            }
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="container">
            <h1>Welcome</h1>
            <form>
                <input type="text" placeholder="user login"/>
                <input type="password" placeholder="password"/>
                <input type="submit" value="Login"/>
            </form>
        </div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>
JLinZen
关注
  • 29
    点赞
  • 踩
  • 169
    收藏
    觉得还不错? 一键收藏
  • 16
    评论
专栏目录
html 好看的css样式大全,优秀漂亮的CSS3样式收集（2012版）
weixin_33624741的博客
06-11 2064
优秀漂亮的CSS3样式收集(2012版)Sponsor我想有不少人已经接触过CSS3，它给设计师以及前端人员带来很多的方便，今天为大家收集2012年至今较为漂亮的CSS3样式，有些带有教程哦，看到哪么漂亮的样式不知道你有没有心动想制作一个呢？下面大家一起来看看CSS3的样式之美。※ 下面的CSS3例子，请使用IE9或其它支持CSS3的浏览器浏览。CSS3制作的Tool Tips效果，半透明很漂亮。...
采用CSS3设计的登陆界面
xuyongsky1234的博客
11-21 1061
body部分内容： &lt;body&gt; &lt;form id="form_id" name="form_id" method="get" action="http://baidu.com" onsubmit="return checkUser()"&gt; &lt;div id="loginForm"&gt; &
HTML移动端APP注册登录页面模板
10-01
HTML移动端APP注册登录页面模板 HTML移动端APP注册登录页面模板 HTML移动端APP注册登录页面模板 HTML移动端APP注册登录页面模板 HTML移动端APP注册登录页面模板 HTML移动端APP注册登录页面模板 HTML移动端APP注册登录页面模板
vue 简约 大气登录页“附源码”
最新发布
潮黯的博客
05-27 580
vue 简约 大气登录页“附源码”
css登录界面
qq_45387575的博客
09-21 3198
伪元素是元素，就是css模拟出来的一个盒子（如果想在盒子内部插入一个小盒子，就使用伪元素（主要用来做装饰作用））注意：加法和减法的运算符号两边必须有空格；乘法：两个值之间必须有一个数字；除法：左边必须为数字。，（博班如果是鼠标经过盒子，盒子里面的样式会有变化，则使用伪类）2、巧用flex布局，不要总是想着子绝父相加浮动。伪类是一种状态，可以视作选择器，比如说鼠标经过。函数允许在声明 CSS 属性值时执行一些计算。如果想让div元素的大小是整个界面。单位设置网页元素的尺寸，其也是。表示继承父级元素的属性。
通过CSS简单修饰用户登录页面
weixin_64313535的博客
04-22 5084
用CSS和HTML做的一个用户登录页面（附全部代码）
原来CSS的登录界面可以变得这么好看
weixin_64965154的博客
05-17 5316
素材是封面，大家可以来试试敲一下，因为很多都是基础知识，我相信大家也懂，不懂的话可以去看黑马pink老师讲的，学完后再看就理解很多了。<input type="password" placeholder="密码"><input type="text" placeholder="账号">毕竟是一个简单的登录界面，架构没有很复杂，自己都可以写的出来！座右铭：懒惰受到的惩罚不仅仅是自己的失败，还有别人的成功。接下来就是CSS界面，我们使用CSS来实现这个美丽的界面。感觉非常好看的，接下来还是来写我们的架构。
用html+css制作简单好看的登陆注册界面
热门推荐
小袁同学的博客
07-19 6万+
注重版权，转载请注明原作者和原文链接 作者：Bald programmer 先看看效果图 login.html代码 <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/style.css" /> </head> <style> body{ .
HTML5+CSS3 精美登陆界面源码
05-10
在这个登录界面源码中，我们可以预期会看到以下CSS3特性的应用： 1. **选择器增强**：如`:nth-child()`, `:nth-of-type()`, `:not()`等，使得选取特定元素变得更加精准。 2. **伪类和伪元素**：如`:hover`, `:...
h5 css3移动端漂亮登录界面
04-10
在这个“h5 css3移动端漂亮登录界面”项目中，开发者利用这些技术创建了一个响应式的登录界面，该界面不仅美观，而且能够自动适应各种设备尺寸，提供良好的用户体验。Vue.js的引入进一步提升了界面的交互性和可维护...
登陆界面模板200个（HTML5+CSS3+JavaScript+jquery）
04-28
CSS3还引入了新的布局模型，如Flexbox（弹性盒布局）和Grid（网格布局），以及过渡、动画和3D变换等效果，让登录界面的设计更具动态感和视觉吸引力。在这些模板中，你可以看到这些技术的应用，创造出科技感、经典、...
HTML5+CSS3 漂亮后台管理系统登录界面
06-16
在这个“HTML5+CSS3 漂亮后台管理系统登录界面”项目中，我们可以深入探讨这两个技术如何应用于构建一个高效且吸引人的登录界面。 首先，HTML5作为最新的超文本标记语言标准，它引入了许多新的元素和属性，旨在提高...
漂亮的深蓝色登陆界面 +.rar
04-08
标题中的“漂亮的深蓝色登陆界面”指的是一个设计精美的登录页面，通常用于网站或应用程序的初始访问阶段。这种登录界面采用深蓝色为主色调，旨在提供一种专业且吸引人的视觉体验，深蓝色通常传达出信任、稳重和高端...
HTML5+CSS3高颜值好看的登录注册PC端和移动端界面，赶紧收藏起来吧！
weixin_65251013的博客
01-30 4594
需要代码的小伙伴可以在评论区拿哦！！！
CSS登录页
GTC的博客
10-22 1015
CSS登录页小案例
用css制作好看的登录注册页面
lpfhjw的博客
10-18 3795
【代码】用css制作好看的登录注册页面。
HTML5+CSS3炫酷登录页
DICA的SEOer专栏
04-22 215
在上面的代码中，我们使用了CSS3的box-shadow属性来添加阴影效果，使得登录框看起来更加立体。同时，我们使用了background属性、border-radius属性和text-shadow属性来美化页面元素。最关键的是，我们使用了CSS3的::before伪元素来创建一个悬浮的蓝色背景，通过动态修改其宽度来实现炫酷的登录按钮效果。
原来CSS也能写出这么漂亮的登录页面，分享一个纯CSS样式Login页面
didiplus
04-10 1万+
以前在学习网页设计的时候，没有很深入了解CSS样式，今天通过观看一个视频，发现原来CSS也能写出很美的登录页面。
用HTML+CSS构建一个绚丽的登录页面
jakelihua
12-25 1325
自动切换背景，登录页面，水滴效果，绚丽的登录页面
用html和css编写一个漂亮的登陆界面
08-30
### 回答1： 好的，以下是一个简单的示例代码，用HTML和CSS编写了一个漂亮的登录界面： HTML代码： ``` <!DOCTYPE html> <html> <head> <title>登录</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="login"> <h1>欢迎登录</h1> <form> <label for="username">用户名:</label> <input type="text" id="username" name="username" required> <label for="password">密码:</label> <input type="password" id="password" name="password" required> <input type="submit" value="登录"> </form> </div> </body> </html> ``` CSS代码： ``` body { background-color: #F0F0F0; } .login { background-color: #FFF; border-radius: 10px; box-shadow: 0px 0px 10px #888; margin: 100px auto; padding: 20px; width: 400px; } h1 { text-align: center; color: #555; } form { display: flex; flex-direction: column; } label { margin-top: 10px; color: #555; } input[type=text], input[type=password] { padding: 10px; border: 1px solid #CCC; border-radius: 5px; margin-bottom: 20px; } input[type=submit] { background-color: #4CAF50; border: none; color: white; padding: 10px; border-radius: 5px; cursor: pointer; margin-bottom: 20px; } input[type=submit]:hover { background-color: #45a049; } ``` 这个登录界面使用了一个带圆角和阴影的白色框作为背景，以及一些简单的HTML表单元素。登录按钮在鼠标悬停时会变成深绿色。这只是一个简单的示例，你可以根据自己的需要和品味进行更改和扩展。 ### 回答2： 编写一个漂亮的登录界面需要使用HTML和CSS来实现。下面是一个示例代码： ```html <!DOCTYPE html> <html> <head> <title>登录界面</title> <style> body { background-color: #f2f2f2; font-family: Arial, sans-serif; } .login-container { width: 300px; margin: 50px auto; padding: 20px; background-color: #ffffff; border-radius: 5px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); } .login-container h2 { text-align: center; color: #333333; } .login-container input[type="text"], .login-container input[type="password"] { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #cccccc; border-radius: 3px; } .login-container button { width: 100%; padding: 10px; background-color: #4CAF50; border: none; color: #ffffff; font-size: 16px; font-weight: bold; cursor: pointer; border-radius: 3px; } .login-container button:hover { background-color: #45a049; } </style> </head> <body> <div class="login-container"> <h2>用户登录</h2> <input type="text" placeholder="用户名"> <input type="password" placeholder="密码"> <button>登录</button> </div> </body> </html> ``` 上述代码中，我们创建了一个登录容器（login-container），该容器位于屏幕中央，具有漂亮圆角和阴影效果。在该容器内，我们添加了一个标题、一个输入框用于输入用户名、一个输入框用于输入密码，以及一个登录按钮。其中，用CSS定义了容器的样式，包括宽度、边距、背景色、阴影等；定义了输入框的样式，包括宽度、内边距、边框等；定义了按钮的样式，包括宽度、内边距、背景色、边框等。这些样式都帮助我们创建了一个漂亮的登录界面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 16
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值