html漂亮的动态背景切换

<!DOCTYPE html>
<html>
<head><title>漂亮背景</title><meta charset="utf-8"/><meta name="author" content="Stars"/><meta name="keywords" content=""/><meta name="description" content=""/><style>*{margin: 0;padding: 0;}body{height: 100vh;display: flex;justify-content: center;align-items: center;background: linear-gradient(125deg,#2c3e50,#27ae60,#2980b9,#e74c3c,#8e44ad);background-size: 500%;animation: backgroundframe 15s infinite linear;}@keyframes backgroundframe {0%{background-position: 0% 50%;}50%{background-position: 100% 50%;}100%{background-position: 0% 50%;}}input:focus{box-shadow: 0 0 5px #9ecaed;outline: none;border-color: #9ecaed;}</style>
</head>
<body><div style="padding:25px;border-radius:15px;background-color: white;display: flex;flex-direction: column;"><h2 style="text-align: center;">商城系统</h3><div style="display: flex;padding: 10px;"><h3 style="flex: 1;text-align:center;background-color: yellow;">用户登录</h3><h3 style="flex: 1;text-align:center;background-color: yellowgreen;">用户注册</h3></div><form><div style="padding:10px;display: flex;align-items: center;"><label style="width: 25%;">用户名</label><input style="width: 75%;border-radius: 0;padding:5px;outline:0;height: 30px;border: 1px solid grey;color: grey;" type="text" name="username" placeholder="请输入用户名"/></div><div style="padding:10px;display: flex;align-items: center;"><label style="width: 25%;">密码</label><input style="width: 75%;border-radius: 0;outline:0;padding:5px;height: 30px;border: 1px solid grey;color: grey;" type="password" name="password" placeholder="请输入用户名"/></div></form></div>
</body>
</html>

html漂亮的动态背景切换相关推荐

HTML + CSS实现动态背景的登录效果
一.动态背景的登录效果图由于背景是在不断的切换的,就不一一截图展示啦. 二.文件结构展示三.源码区 1.html文档(index.html) <!DOCTYPE html> <h ...
HTML中动态图片切换JQuery实现
相信很多同学都注意到了,各大新闻或者娱乐网站都含有动态图片切换,那个漂亮的感觉让刚刚学习html的人,都非常好奇和心动.那下面就让我们看一下到底如何实现动态图片切换呢?看一下百度贴吧的效果图吧~ ...
【Opencv项目实战】背景替换：动态背景移除与替换（cvzone+MediaPipe）
文章目录一.项目思路二.环境布置 2.1.cvzone安装 2.2.MediaPipe安装 2.3.常见问题 2.4.注意事项三.算法详解 3.1.segmentor.removeBG():去除 ...
动态视频流切换的处理策略
问题背景动态视频流切换是指在视频播放过程中,将输入动态地从一个视频流切换到另一个视频流.具体场景包括: 切换播放画质插播广告(有多个广告打包插播) 电视剧连续播放多个点播节目拼接为虚拟直播频道 ...
jQuery带背景切换登录注册表单
jQuery带背景切换登录注册表单原始HTML+CSS+JS页面设计,这是一个不错的登录网页制作,画面精明,非常适合初学者学习使用. 作品介绍 1.网页作品简介方面 :jQuery带背景切换登录注册 ...
登录界面实现动态背景
如图,发现类似别人的登录界面,这个动态背景非常炫酷,今天发现这个插件可以直接实现. vanta.js官网地址根据官网实例,需要安装three.js 和 vanta.js npm install va ...
粒子背景php,Particles.js实现粒子动态背景动画
这次给大家带来Particles.js实现粒子动态背景动画,Particles.js实现粒子动态背景动画的注意事项有哪些,下面就是实战案例,一起来看一下. 操作过程: 网上有基本流程,可以参考一下,不 ...
模仿CSDN黑暗帝国动态背景的vue项目(附源码)
开发工具:Webstorm 技术栈:vue.html.canvas 实现效果(其实这里面的是动态变换的,只是没有截成GIF动图): 实现步骤: (1)在这里的项目我是用VueCli3脚手架进行搭建的. ...
开源超美css动态背景可直接引入html文件使用含注释、可更改
开源超美css动态背景可直接引入html文件使用含注释.可更改 1.背景样式本背景为动态蜘蛛网背景. 上图: 2.如何在html里面引用,作为html背景 1文件目录放在同一目录下 2 在in ...

html漂亮的动态背景切换

html漂亮的动态背景切换相关推荐

最新文章

热门文章