php用户登录界面代码有背景,HTML和CSS实现动态背景登录页面

这篇文章主要介绍了HTML+CSS实现动态背景登录页面的相关资料,需要的朋友可以参考下

1. 实现背景图片的动态变换

首先在HTML页面body板块中，添加图片p，代码如下：

再对图片进行css设计。你要对图片进行大小定位，那么以下代码肯定要首先编写：

`.bgk {

margin: auto;

position: absolute;

width: 1366px;

height: 672px;

overflow: hidden; /*溢出部分隐藏*/

}`

位置设定ok以后，那么再对里面的图片进行设置。为了使图片能足够大覆盖页面，则代码必须有 background-size: cover;

要实现动态效果，那么你的css代码中必须有动画的设计：

-webkit-animation-name: kenburns; /*-animation-name:为@keyframes 动画规定名称,必须与-animation-duration同时使用，否则无动画效果*/

animation-name: kenburns; /*或者：后面值为需要绑定到选择器上的keyframe名称*/

-webkit-animation-duration: 16s; /*定义动画完成一个周期所需时间*/

animation-duration: 16s;

-webkit-animation-timing-function: linear; /*规定动画从头到尾以相同速度播放，还有其他几个速度值*/

animation-timing-function: linear;

-webkit-