纯CSS3 表单输入动态切换背景

输入不同字段的时候，背景也随着切换。

input,form

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2023
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.background {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: tomato;
  z-index: -1;
  background-blend-mode: multiply;
  background-size: cover;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
  background-image: url("http://lorempixel.com/nature/1100/800"); }

input[type=text] {
  width: 60%;
  margin-bottom: 20px;
  margin: 0 auto 20px auto;
  left: 0;
  right: 0;
  z-index: 10;
  display: block;
  border-radius: 5px;
  border: 1px solid black;
  background-color: rgba(255, 255, 255, 0.5);
  height: 30px;
  padding: 10px; }

input[type=text]:first-of-type {
  margin-top: 40px; }

input[type=text]:focus {
  background-color: white;
  outline: none; }

#first:focus ~ .background {
  background-image: url("http://lorempixel.com/nature/1000/1000");
  background-color: darkseagreen; }

#second:focus ~ .background {
  background-image: url("http://lorempixel.com/nature/900/800");
  background-color: teal; }

#third:focus ~ .background {
  background-image: url("http://lorempixel.com/nature/600/800");
  background-color: floralwhite; }

#fourth:focus ~ .background {
  background-image: url("http://lorempixel.com/nature/1000/800");
  background-color: lightsalmon; }

#fifth:focus ~ .background {
  background-image: url("http://lorempixel.com/nature/900/1200");
  background-color: lightpink; }

h1, p {
  color: white;
  text-align: center;
  text-shadow: 1px 1px black;
  /*Backgrounds preload*/ }

body:after {
  display: none;
  content: url("http://lorempixel.com/nature/1000/1000") url("http://lorempixel.com/nature/900/800") url("http://lorempixel.com/nature/600/800") url("http://lorempixel.com/nature/1000/800") url("http://lorempixel.com/nature/900/1200"); }

HTML

输入不同字段的时候，背景也随着切换。

input,form

编辑器支持Emmet

快捷键

输入不同字段的时候，背景也随着切换。

input,form

CSS3 富有创意的木质窗口风格的表单

用拖拉的方式生成CSS3 3D变换效果并生成代码

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：