Html+Css网页开发之动态登录页面(默认Chrome)

>>效果展示图<<

一、需求分析与设计要求

        实现了一个动态背景图案的效果,包括一个白色的容器,内部有一个标题、一个输入框、一个按钮和一些文本。

        背景是一个渐变色的线性渐变,而在容器的周围,有一些随机的方形和圆形图案,它们会在页面上移动和旋转。这些图案是通过使用CSS动画和伪元素(.### a:hover)来实现的。


二、Css动画代码详解

1.设置内外边距

        首先,将所有元素的外边距(margin)和内边距(padding)都设置为0,以确保页面的元素不会受到默认的(浏览器)外边距和内边距的影响。

* {margin: 0;padding: 0;
}

2.利用flex布局设置盒子属性

        设置body元素的高度为100vh,使其占据整个视口的高度。

        使用flex布局,使其内容垂直和水平居中。设置了一个线性渐变的背景色,从左下角到右上角,颜色从#e3c5eb(浅粉)#a9c1ed(浅蓝)

        最后,将overflow属性设置为hidden,以防止页面出现滚动条。

body {height: 100vh;display: flex;justify-content: center;align-items: center;background: linear-gradient(200deg, #e3c5eb, #a9c1ed);overflow: hidden;
}

3.定义新类确定页面的主要内容与属性设置(相对定位)

        定义一个名为.container的类,用于包含页面的主要内容。

        设置了相对定位,z-index为1,背景色为白色,圆角为15px,使用flex布局,垂直和水平居中,宽度为350px,高度为500px,添加了一个阴影效果。

.container {position: relative;z-index: 1;background-color: #fff;border-radius: 15px;display: flex;flex-direction: column;align-items: center;width: 350px;height: 500px;box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

4.定义新类设置标题以及字体大小等属性

        定义了一个名为.tit的类,用于设置标题的样式。

        设置了字体大小为26px,上下外边距为65px和70px,左右外边距为auto,使其水平居中。

.container .tit {font-size: 26px;margin: 65px auto 70px auto;
}

5.定义新类设计输入框与输入框文本的属性

        定义一个名为input的类,用于设置输入框的样式。

        设置了宽度为280px,高度为30px,文本缩进为8px,去掉了边框,只保留了底部的1px实线边框,去掉了轮廓线,上下外边距为12px,左右外边距为auto,使其水平居中。

.container input {width: 280px;height: 30px;text-indent: 8px;border: none;border-bottom: 1px solid #ddd;outline: none;margin: 12px auto;
}

6.定义新类设置按钮属性与渐变背景色,增加鼠标过渡效果

        定义一个名为button的类,用于设置按钮的样式。

        设置了宽度为280px,高度为40px,上外边距为35px,下外边距为40px,左右外边距为auto,使其水平居中。

        去掉边框,使用一个线性渐变的背景色,从右上角到左下角,颜色从#fac0e7(浅粉)#aac2ee(浅蓝)

        设置了字体颜色为白色,字体加粗,字母间距为8px,圆角为10px,鼠标指针为手型,添加了一个0.5s的过渡效果。

.container button {width: 280px;height: 40px;margin: 35px auto 40px auto;border: none;background: linear-gradient(-200deg, #fac0e7, #aac2ee);color: #fff;font-weight: bold;letter-spacing: 8px;border-radius: 10px;cursor: pointer;transition: 0.5s;
}

7.伪代码样式定义鼠标悬停按钮上的样式与背景色

        定义了当鼠标悬停在按钮上时的样式。

        使用了一个线性渐变的背景色,从左下角到右上角,颜色从#aac2ee(浅蓝)#fac0e7(浅粉)

        将背景图像的位置设置为-280px,使其向左移动,以产生动画效果。

.container button:hover {background: linear-gradient(-200deg, #aac2ee, #fac0e7);background-position-x: -280px;
}

8.定义span类设置文本样式

        设置字体大小为14px。

.container span {font-size: 14px;
}

9.定义a类设置链接样式与字体颜色等属性

        定义一个a类,用于设置链接的样式。

        设置了字体颜色为plum,去掉了下划线。

.container a {color: plum;text-decoration: none;
}

10.定义li类使用UL li设置图案样式(绝对定位)

        定义一个名为li的类,用于设置图案的样式。

        设置了绝对定位,边框为1px实线白色,背景色为白色,宽度和高度都为30px,去掉了列表样式,透明度为0,使其不可见。   

ul li {position: absolute;border: 1px solid #fff;background-color: #fff;width: 30px;height: 30px;list-style: none;opacity: 0;
}

     11.定义square类设置方形、矩形图案样式与动画(相对定位)

        定义一个名为square的类,用于设置方形图案的样式。

        设置了相对定位,初始位置为40vh和60vw,即垂直方向上在视口的40%处,水平方向上在视口的60%处。

        使用一个名为square的动画,持续时间为10s,线性运动,无限循环。

.square li {top: 40vh;left: 60vw;animation: square 10s linear infinite;
}

12.定义第二个方形图案以及第三、四、五个...类似于(11)

        第二个方形图案设置了初始位置为80vh和10vw,即垂直方向上在视口的80%处,水平方向上在视口的10%处。

        使用了一个2s的延迟,使其比第一个图案晚2s开始动画。

.square li:nth-child(2) {top: 80vh;left: 10vw;animation-delay: 2s;
}

        第三个方形图案设置了初始位置为80vh和85vw,即垂直方向上在视口的80%处,水平方向上在视口的85%处。

        使用了一个4s的延迟,使其比第一个图案晚4s开始动画。

.square li:nth-child(3) {top: 80vh;left: 85vw;animation-delay: 4s;
}

        第四个方形图案设置了初始位置为10vh和70vw,即垂直方向上在视口的10%处,水平方向上在视口的70%处。

        使用了一个6s的延迟,使其比第一个图案晚6s开始动画。

.square li:nth-child(4) {top: 10vh;left: 70vw;animation-delay: 6s;
}

第五个方形图案设置了初始位置为10vh和10vw,即垂直方向上在视口的10%处,水平方向上在视口的10%处。

        使用了一个8s的延迟,使其比第一个图案晚8s开始动画。

.square li:nth-child(5) {top: 10vh;left: 10vw;animation-delay: 8s;
}

13.定义circle类设置圆形图案样式(1,2,3,4,5)以及动画图案<相对定位>

第一个圆形图案设置了初始位置为底部和15vw,即水平方向上在视口的15%处。

使用了一个名为circle的动画,持续时间为10s,线性运动,无限循环。

.circle li {bottom: 0;left: 15vw;animation: circle 10s linear infinite;
}

第二个圆形图案设置了初始位置为35vw,即水平方向上在视口的35%处。

使用了一个2s的延迟,使其比第一个图案晚2s开始动画。

.circle li:nth-child(2) {left: 35vw;animation-delay: 2s;
}

第三个圆形图案设置了初始位置为55vw,即水平方向上在视口的55%处。

使用了一个6s的延迟,使其比第一个图案晚6s开始动画。

.circle li:nth-child(3) {left: 55vw;animation-delay: 6s;
}

第四个圆形图案设置了初始位置为75vw,即水平方向上在视口的75%处。

使用了一个4s的延迟,使其比第一个图案晚4s开始动画。

.circle li:nth-child(4) {left: 75vw;animation-delay: 4s;
}

第五个圆形图案设置了初始位置为90vw,即水平方向上在视口的90%处。

使用了一个8s的延迟,使其比第一个图案晚8s开始动画。

.circle li:nth-child(5) {left: 90vw;animation-delay: 8s;
}

14.定义Square动画模式:控制方形图案运动

        定义square的动画用于控制方形图案的运动。

        在0%时,将图案的缩放比例设置为0,旋转角度为0度,透明度为1。

        在100%时,将图案的缩放比例设置为5,旋转角度为1000度,透明度为0。

@keyframes square {0% {transform: scale(0) rotateY(0deg);opacity: 1;}100% {transform: scale(5) rotateY(1000deg);opacity: 0;}
}

15.定义Circle动画模式:控制圆形图案运动

        定义了一个名为circle的动画,用于控制圆形图案的运动。

        在0%时,将图案的缩放比例设置为0,旋转角度为0度,透明度为1,底部位置为0,边框半径为0。

        在100%时,将图案的缩放比例设置为5,旋转角度为1000度,透明度为0,底部位置90vh,边框半径为50%。

@keyframes circle {0% {transform: scale(0) rotateY(0deg);opacity: 1;bottom: 0;border-radius: 0;}100% {transform: scale(5) rotateY(1000deg);opacity: 0;bottom: 90vh;border-radius: 50%;}
}

三、Html代码汇总

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动态背景登录组件</title><link rel="stylesheet" href="./38-动态背景登录组件.css">
</head><body><div class="container"><div class="tit">登录</div><input type="text" placeholder="账号"><input type="password" placeholder="密码"><button>登录</button><span>没有账号?<a href="#">去注册</a></span></div><div class="square"><ul><li></li><li></li><li></li><li></li><li></li></ul></div><div class="circle"><ul><li></li><li></li><li></li><li></li><li></li></ul></div>
</body></html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/50644.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【CN】Argo 持续集成和交付(一)

1.简介 Argo 英 [ˈɑ:ɡəu] 美 [ˈɑrˌɡo] Kubernetes 原生工具&#xff0c;用于运行工作流程、管理集群以及正确执行 GitOps。 Argo 于 2020 年 3 月 26 日被 CNCF 接受为孵化成熟度级别&#xff0c;然后于 2022 年 12 月 6 日转移到毕业成熟度级别。 argoproj.github.i…

【数学建模】权重生成与评价模型(下)

文章目录 权重生成与评价模型&#xff08;下&#xff09;5. 模糊综合评价法5.1 模糊综合分析法的原理5.2 模糊综合分析法的案例 6. 秩和比分析法6.1 秩和比分析法原理6.2 秩和比分析法案例6.3 RSR的分布及其计算确定RSR的分布计算回归方程示例代码实现代码解释 6.4 秩和比分析法…

Godot入门 02玩家1.0版

添加Node2D节点&#xff0c;重命名Game 创建玩家场景&#xff0c;添加CharacterBody2D节点 添加AnimatedSprite2D节点 从精灵表中添加帧 选择文件 设置成8*8 图片边缘模糊改为清晰 设置加载后自动播放&#xff0c;动画循环 。动画速度10FPS&#xff0c;修改动画名称idle。 拖动…

【数据结构初阶】单链表经典算法题十二道——得道飞升(上篇)

目录 1、移除元素 2、反转链表 3、链表的中间节点 4、合并两个有序链表 Relaxing Time&#xff01;&#xff01;&#xff01; ———————————————— 天气之子幻 ———————————————— 1、移除元素 思路&#xff1a; 创建一个新链表&#xff0…

每天一个数据分析题(四百五十一)- 数值型数据

现有一组数值型数据&#xff0c;查看数据的分布情况&#xff0c;优先使用以下哪种图形&#xff08;&#xff09; A. 条形图 B. 直方图 C. 散点图 D. 折线图 数据分析认证考试介绍&#xff1a;点击进入 题目来源于CDA模拟题库 点击此处获取答案 数据分析专项练习题库 内…

虚拟机已经连上网可是yum用不了,可以将 CentOS 的 yum 源镜像修改为阿里云的镜像源(http://mirrors.aliyun.com/)

可以通过以下步骤将 CentOS 的 yum 源镜像修改为阿里云的镜像源。 1. 备份现有的 yum 源配置文件 首先&#xff0c;备份现有的 yum 源配置文件&#xff0c;以防需要恢复原来的设置。 cp /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.bak2. 下载阿里…

【日常运维】mongodb学习之安装部署--使用

本站以分享各种运维经验和运维所需要的技能为主 《python零基础入门》&#xff1a;python零基础入门学习 《python运维脚本》&#xff1a; python运维脚本实践 《shell》&#xff1a;shell学习 《terraform》持续更新中&#xff1a;terraform_Aws学习零基础入门到最佳实战 《k8…

【Cesium开发实战】视频融合功能的实现,可自定义位置和视频路径

Cesium有很多很强大的功能,可以在地球上实现很多炫酷的3D效果。今天给大家分享一个视频融合功能。 1.话不多说,先展示 视频融合 2.设计思路 点击绘制开始在地图上绘制视频融合的点位,形成视频播放的区域,双击弹框输入名称和要播放视频的路径,即可对应区域播放对应视频,…

Linux 系统编程2:缓冲I/O(标准I/O)

前言&#xff1a;上一章介绍了LINUX系统调用的一些文件I/O函数&#xff0c;本章将继续学习C库中的标准I/O函数。 文件指针&#xff1a;标准I/O并不是直接操作文件描述符&#xff0c;他们有自己的唯一标识符---文件指针去操作.文件指针和文件描述符是一一映射的关系 1.打开文件…

JDK9 module 新特性

JDK9 module 新特性 模块结构 模块 src 包 代码.java module-info.java requires/exports requires代表需要某个模块、exports代表暴露出哪些包里的类&#xff1b; ● 创建hello.module module hello.module {exports com.adi; }public class HelloProvider {public vo…

Open3D 获取点云中指定高度区域的所有点

目录 一、概述 1.1实现步骤 1.2应用 二、代码实现 1.1关键函数 1.2完整代码 三、实现效果 3.1原始点云 3.2处理后点云 Open3D点云算法汇总及实战案例汇总的目录地址&#xff1a; Open3D点云算法与点云深度学习案例汇总&#xff08;长期更新&#xff09;-CSDN博客 一、…

CentOS 7.x 的 YUM 仓库问题

背景 CentOS Linux 7 的生命周期&#xff08;EOL&#xff09;已经于 2024 年 6 月 30 日终止这意味着 CentOS 7.x 的官方镜像站点将不再提供服务&#xff0c;导致在使用 yum 安装或更新程序时可能会遇到 错误。本文将介绍如何解决这一问题&#xff0c;使得你可以继续在 CentOS…

【vim】ubuntu20-server 安装配置 vim 最新最详细

在编程的艺术世界里,代码和灵感需要寻找到最佳的交融点,才能打造出令人为之惊叹的作品。而在这座秋知叶i博客的殿堂里,我们将共同追寻这种完美结合,为未来的世界留下属于我们的独特印记。【vim】ubuntu20-server 安装配置 vim 最新最详细 开发环境一、vim github二、安装必…

Elasticsearch 使用误区之三——分片设置不合理

Elasticsearch 是一个强大的搜索和分析引擎&#xff0c;它通过将数据分散到多个节点的分片中来进行分布式处理。 本文将探讨分片大小和策略的概念&#xff0c;以优化 Elasticsearch 的性能并防止过度分片或分片过大等问题。 先看个分片设置不合理的真实企业案例&#xff1a; 10…

DML数据库的数据类型

DML 用于改变数据表中的数据的操作语言。 包括INSERT&#xff08;将数据插入到数据表中&#xff09;,UPDATE&#xff08;更新表中已经存在的数据&#xff09;,DELETE&#xff08;删除表中已经存在的数据&#xff09; INSERT 用法 INSERT INTO 表名&#xff08;字段1&#x…

Qt实现输出日志到指定文件

开发平台 &#xff1a; Qt Creator 语言&#xff1a; C 需求&#xff1a; 获取日志信息&#xff0c;写入指定文件日志7天后过期保护写入日志进程 前置操作&#xff1a; 1.在CMakeLists.txt中添加如下代码 # 添加预处理&#xff0c;防止在release模式下&#xff0c;输出的…

CSS:position属性

一、属性值 1.1 fixed 固定位置的元素&#xff0c;相对于浏览器窗口进行定位。 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 网站中的固定 header 和 footer 就是用固定定位来实现的&#xff1b; header效果图 footer效果图 1.2 absol…

浏览器自动化测试工具selenium——爬虫操作记录

selenium——是一款web自动化测试框架&#xff0c;其能模拟正常的用户操作&#xff0c;比如点击。但selenium并不是浏览器&#xff0c;没有执行js和解析html/css的能力&#xff0c;因此selenium需要和浏览器配合使用。 因为selenium可以模仿用户行为&#xff0c;因此selenium也…

Linux系统安装Cobol语言及IBM大型机模拟软件Hercules

COBOL&#xff08;Common Business-Oriented Language&#xff09;起源于50年代中期&#xff0c;是一种面向过程的高级程序设计语言&#xff0c;主要用于商业和数据处理领域。经过不断发展和标准化&#xff0c;已成为国际上应用最广泛的商业编程语言之一&#xff0c;在某red书上…

Windows Server搭建局域网NTP时间服务器与客户端通实现

1.服务器环境&#xff1a; win11更改注册表 winR输入regedit win11更改注册表 winR输入regedit 2.HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\W32Time\Config&#xff0c;找到Config目录&#xff0c;双击Config目录下的AnnounceFlags&#xff0c;设为5。 3.HKEY_L…