html怎么加入页面登录背景,HTML+CSS实现动态背景登录页面
实现背景图片的动态变换
首先我们把背景图片插入进去,在HTML页面body板块中,添加几个图片div
/*..................*/
好了,图片已经插入进去了,那么现在就要对图片修饰。为了使图片能足够大覆盖页面,则div中可以有 background-size: cover;满足你的需求。而下面一步,则是最重要的环节–css动画的设计(在div class=”bgk”中进行)
-webkit-animation-name: kenburns; /*-animation-name:为@keyframes 动画规定名称,必须与-animation-duration同时使用,否则无动画效果*/
animation-name: kenburns;
-webkit-animation-duration: 16s; /*定义动画完成一个周期所需时间*/
animation-duration: 16s;
-webkit-animation-timing-function: linear; /*规定动画从头到尾以相同速度播放,还有其他几个速度值*/
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite; /*规定动画播放次数,infinite为无限次*/
animation-iteration-count: infinite;
-webkit-transform: scale(1.2); /*规定动画的缩放特效,scale:规定2D缩放*/
transform: scale(1.2);
-webkit-filter: blur(10px); /*定义图片的模糊程度,显示为毛玻璃效果*/
filter: blur(10px);
动画设计好了以后,再为每个图片绑定子元素选择器,有几张变换的图片就需要几个选择器:
.bgk-image:nth-child(1) {
-webkit-animation-name:kenburns-1; /*选择器上的名称*/
animation-name:kenburns-1;
z-index:3; /*动画堆叠顺序,值越大表示越先播放,离用户越近*/
}
.bgk-image:nth-child(2) {
-webkit-animation-name:kenburns-2;
animation-name:kenburns-2;
z-index:2;
}
/*..........................*/
创建好选择器以后,再为每一个选择器进行动画设计
@-webkit-keyframes kenburns-1{
0% {
opacity:1; /*规定不透明度*/
-webkit-transform:scale(1.2);
transform:scale(1.2);
}
27.861% {
opacity:0;
-webkit-transform:scale(1);
transform:scale(1);
}
80.435% {
opacity:0;
-webkit-transform:scale(1.21);
transform:scale(1.21);
}
100% {
opacity:1;
}
}
/*................*/
最后你就可以在页面上看到具体效果了
对登录表单的设计
前一个环节完成了背景图片的动态变换,那么现在我们就需要在背景图片上实现表单的呈现,首先你得添加一个表单在页面中
登录您的账户
用户名
密 码
现在的表单肯定是什么效果也没有,只是最初始的显示出来,那么我们就要对表单样式进行修改。我要的背景效果是模糊透明,那么background: rgba(216,216,216,0.5); 这一句就帮你实现透明的效果。为了使表单边角看着更圆润一些,下一句就可以进行美化:border-radius:15px;
总的来说就写成下面这个样子
.form_login{
margin:auto;
width:700px;
height:480px;
top:90px;
left:333px;
position:absolute;
border-radius:15px;
background:rgba(216,216,216,0.5); /*设置form表单透明度*/
text-align:center;
overflow:hidden;
}
骨架已经搭建好了,我们就开始对立面的各个元素进行设计。和上面方法一样,你可以设置输入框的透明度和圆角,这里不再呈现。为了在输入框聚焦的时候好看一点,我们还可以进行高亮设计
.form_login input[type="text"]:focus,input[type="password"]:focus{
border-color:rgba(255,128,0,.75);
-webkit-box-shadow:0 0 18px rgba(255,153,18,3);
}
你还可以对输入框中的光标初始位置改变: padding:7px;
终于要完了,最后是对提交按钮的美化。
margin:20px auto;
text-shadow:0px -1px 0px #5b6ddc; /*文字阴影设置*/
outline:none;
border:1px solid rgba(0,0,0,0.49); /*按钮边框颜色与透明度设置*/
-webkit-background-clip: padding-box; /*规定内容的绘制区域,padding-box为内边框距*/
background-clip: padding-box;
border-radius:6px;
cursor:pointer; /*光标形状,pointer为一只手的形状*/
background-color:#768ee4; /*按钮背景颜色*/
为了体现鼠标放上去有一个动态的效果呈现:margin-top:22px ;还可以进行颜色的转变,具体如下
.form_login input[type="submit"]:hover{
background-color:#5f73e9;
background-image:-webkit-linear-gradient(bottom,#5f73e9 0%,#859bef 100%);
background-image:-moz-linear-gradient(bottom,#5f73e9 0%,#859bef 100%);
background-image:-ms-linear-gradient(bottom,#5f73e9 0%,#859bef 100%);
background-image:-o-linear-gradient(bottom,#5f73e9 0%,#859bef 100%);
-webkit-box-shadow:inset 0px 1px 0px #aab9f4; /*当鼠标放在按钮上个时边框的阴影*/
box-shadow:inset 0px 1px 0px #aab9f4;
margin-top:22px;
}
最后整个设计完成,你可以看见你最终的成果了(这只是截屏,懒得去录动态图了)
注:博主是初学者,有什么地方不对还请前辈们指出,万分感谢!
html怎么加入页面登录背景,HTML+CSS实现动态背景登录页面相关推荐
- html网页左侧背景,CSS设置html网页背景图片 CSS设置网页背景颜色
CSS设置网页背景图片 CSS设置网页背景颜色技术教程篇 本篇DIVCSS5以布局思想介绍使用CSS设置实现网页背景技巧为主,希望对DIV CSS爱好者有帮助.通常对网页设置背景直接对body设置背景 ...
- CSS设置html网页背景图片 CSS设置网页背景颜色
http://www.divcss5.com/jiqiao/j768.shtml CSS设置网页背景图片 CSS设置网页背景颜色技术教程篇 本篇DIVCSS5以布局思想介绍使用CSS设置实现网页背景技 ...
- HTML+CSS实现动态背景登录页面
实现背景图片的动态变换 首先我们把背景图片插入进去,在HTML页面body板块中,添加几个图片div <body><div class="bgk">< ...
- HTML + CSS实现动态背景的登录效果
一.动态背景的登录效果图 由于背景是在不断的切换的,就不一一截图展示啦. 二.文件结构展示 三.源码区 1.html文档(index.html) <!DOCTYPE html> <h ...
- html 页面宽度和背景颜色,CSS:设置背景颜色为窗口宽度的50%
旧版浏览器支持 如果旧的浏览器支持是必须的,所以你不能去使用多个背景或渐变,你可能要在备用的div元素上做这样的事情: #background { position: fixed; top: 0; l ...
- 怎么把html背景图片,css如何设置背景图片?
在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片.那么如何利用css设置html中用图片做背景?本文就给大家介绍css怎样设置背景图片. css可以通过background-ima ...
- html设置顶部背景颜色,css怎么设置背景颜色?
css怎么设置背景颜色?下面本篇文章就来给大家介绍一下使用CSS设置背景颜色的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在CSS中,可以使用background-colo ...
- php如何平铺背景图片,css如何让背景图片平铺?css背景图片平铺四种方式介绍
在网页设计的过程中,有时候可能会要求背景图片平铺,因为这样会让整个网页看起来比较好看,图片平铺可以不用具体设置body宽度和高度大小,就可以直接将图片平铺整个页面,那么,如何让背景图片平铺呢?接下来本 ...
- html边框设置为背景同色,css边框与背景
1.半透明边框 默认情况下,背景会延伸到边框所在的区域下层.可以通过background-clip 属性来调整.这个属性的初始值是border-box,意味着背景会被元素的border-box(边框的 ...
- html中设置背景透明,css如何设置背景透明
css设置背景透明的方法:首先在[ ]标签创建[ ]标签和添加类:然后在[ 3.为div添加样式.在 标签后面创建一个 4.保存后使用浏览器查看.可以看到当透明度为由0.1修改为1时div背景由灰色变 ...
最新文章
- Oracle 11g Release 1 (11.1) 查询优化器的访问路径
- Qt Creator建立多个平台
- c语言穷举算法 枚举法,c语言枚举法 穷举法 ppt课件
- BZOJ.3265.志愿者招募加强版(费用流SPFA)
- Multi-catch parameters are not allowed for source level below 1.7 解决方法
- haproxy+keepalived实现负载均衡及高可用
- 2017.3.9 Harry and Christmas tree 失败总结
- 〖Android〗屏幕触屏事件录制与回放
- Python自然语言处理学习笔记(41):5.2 标注语料库
- Docker之旅:了解Swarm集群
- 细说 ASP.NET控制HTTP缓存[转]
- jsp简单案例(供小白学习)
- 随机森林模型及案例(Python)
- DELL官方证实:NVIDIA史上最大显卡质量事故
- STC8A8K低功耗模式验证
- 再多的非标电气设计也不怕了
- 计算机博弈之国际跳棋入门-规则篇
- 前端工程师的摸鱼日常(8)
- oracle编程题考试题,oracle考试题
- php加密的是什么,看看下面这个php代码是使用什么加密的?
热门文章
- oracle数据库sql语句插入时间信息
- 倒计时1天!MDCC 2016移动开发者大会全日程公布(表)
- Netty实战中英文版
- php蝠衭厍桴埭钨,有没办法判断输入汉字的笔划数?
- 永磁同步电机MTPA与id=0的控制原理
- SQLServer2012服务无法启动Windows不能在本地计算机启动SQLServer(SQLEXPRESS)
- r语言跟python哪个适合数据分析_R语言 vs Python对比:数据分析哪家强?
- 51单片机C语言程序100例
- 几款前端IDE工具:Sublime、Atom、VSCode比较
- android之仿朋友圈程序,Android仿微信朋友圈添加图片的实例代码