实用代码：HTML+JS+CSS实现的全屏自动切换背景的时尚 登录与注册块翻转切换页面 代码详解

前言

本篇，我介绍一个非常酷而且实用的代码：HTML+JS+CSS实现的全屏自动切换背景的时尚 登录与注册块翻转切换页面。说的有点晕是吧，没关系，看看效果图，你就明白了。

动态切换登录和注册这块gif动画截图的效果不太清楚，但基本效果还是能够表达的了。想看清晰美女大图的，可以下载源文件包。

涉及知识点

• 使用纯CSS动画实现图片动态加载和替换

  • 使用 选择器 设定不同容器的载入和z-index是实现图片自动切换的核心。

• 使用CSS 美化 表单和 input 文本框：

  • 利用透明和模糊滤镜实现表单磨砂玻璃效果；
  • 去除input获得焦点时的黑色外框；
  • 美化 input 文本框几种状态的样式：常态，hover状态，focus状态。

• 使用 CSS+JS 实现卡片翻转效果

  • CSS+JS实现卡片翻转效果
  • 解决因 backface-visibility: hidden; 导致的卡牌背面form表单的空间都可见而不可用。
  • 解决 “去注册” 链接点击后触发翻转，切换链接文字为：“去登录”。

怎么样，看了知识点介绍，是不是对这篇文章感兴趣了呢？接下来，我们就分享一下这个页面的实现过程：

实现过程详解

一、全屏图片轮播

首先，我准备了四张美女高清壁纸，作为本例的素材。本人有个习惯，无论是在做设计还是做案例时，都喜欢使用美女图做样例，个人觉得这样做可以激发我的工作动力和热情，嘿嘿。

图片准备好，接下来，我们就要开始动手写轮播块的基本布局代码了。

第一步：图片容器布局

<!-- 你可以添加个多“.slideshow-image”项目, 记得修改CSS -->
<div class="slideshow">
    <div class="slideshow-image" style="background-image: url('1.jpg')"></div>
    <div class="slideshow-image" style="background-image: url('2.jpg')"></div>
    <div class="slideshow-image" style="background-image: url('3.jpg')"></div>
    <div class="slideshow-image" style="background-image: url('4.jpg')"></div>
</div>

如果没有写样式表，那么这时候的页面打开的样子就是4张图片从上到下依次展示在页面上。那么，我们快写一下css把它整理成我们想要的样子：

第二步，编写CSS，清除页面内外边距，让图片容器充满页面：

*{margin:0;padding:0;} 
.slideshow { position: absolute; width: 100vw; height: 100vh; overflow: hidden; }

在这个 slideshow 容器的样式表中，我使用了视窗大小 width：100vw；height：100vh 确保图片容器充满窗口，使用 overflow: hidden; 确保页面不产生滚动条。

第三步，编写CSS代码，实现图片的动画效果：

.slideshow-image {
  position: absolute;
  width: 100%;
  height: 100%;
  background: no-repeat 50% 50%;
  background-size: cover; /* 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器，我们就是利用这个属性来实现图片放大后向内缩小 */
  -webkit-animation-name: kenburns;
          animation-name: kenburns;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-duration: 16s;
          animation-duration: 16s;
  opacity: 1;
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}
.slideshow-image:nth-child(1) {
  -webkit-animation-name: kenburns-1;
          animation-name: kenburns-1;
  z-index: 3;
}
.slideshow-image:nth-child(2) {
  -webkit-animation-name: kenburns-2;
          animation-name: kenburns-2;
  z-index: 2;
}
.slideshow-image:nth-child(3) {
  -webkit-animation-name: kenburns-3;
          animation-name: kenburns-3;
  z-index: 1;
}
.slideshow-image:nth-child(4) {
  -webkit-animation-name: kenburns-4;
          animation-name: kenburns-4;
  z-index: 0;
}

@-webkit-keyframes kenburns-1 {
  0% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: