<>HTML/CSS/JS Confession effect Master something without too much effort
effect
The little sister is in love , Do you want to learn after seeing the effect ～～
let‘s go~~
<> The code is as follows
CSS part
<style> body{ margin:0%;/* Margin Solve the compatibility problem of each browser */ padding:0%;/* padding Solve the problem of browser compatibility */ }
.wrap{ display:flex;/* Elastic box model Flexible layout Do not wrap by default */ justify-content: space-between;
/* Align both ends of spindle direction */ flex-wrap:wrap;/* Force line feed */ height: 100vh; /* Divide browser height into 100 branch 100vh For full screen */
background-color:aqua; /* Set background color visualization */ background-image:url("timg.jpeg");
/* Introduce background image Put in quotation marks Oh, more professional */ background-size:cover;/* Make the picture cover the background in equal proportion */ overflow:hidden; }
span{ float:left;/* Float left */ width:9.7%; /* a line 10 Box , Considering that the border line is set as 9.7%*/ height:40px;
background-color:white; border:1px solid red; /* Border line thickness Solid line colour */ } .fall{
animation: fall 4s forwards; /* animation name time I don't go back and forth after falling */ } @keyframes fall{
0%{transform:translateY(0);} 100%{transform:translateY(2000px);} } </style>
HTML part
<div class="wrap"> <span class="fall"></span> <span></span> .......
/* altogether 200 individual span label Omit here */ <span></span> </div>
JS part
<script> var ap=document.getElementsByTagName("span"); /* Get all the span label */
length=ap.length; /* Make the size equal to span Number of Punctuations here you are 200 individual span label But no other i<200 It's something else i<span Number of tags
Convenient to increase or decrease later span Number of tags */ for(var i=0;i<length;i++)/* application for loop Simplify the code */ {
ap[i].onclick=function()/* Mouse click events */ { this.className="fall";/ * To click span Tag a name */
this.style.backgroundColor="red"; /* Click and the color changes to red */ } } </script>
<> What you need to do （ Change to a picture of someone you like ）
take background-image:url(" time.ipeg"); in time.ipeg change into The name of the person you like . That is to change the image path
first Find the folder where you have just written html Folder for for example It's necessary to coax a girlfriend （ My folder ）
After opening, there is only one html file At this point, just drag and drop the pictures of the people you like into this folder
Drag and drop as follows
Copy and paste the name of the picture background-image:url(" time.ipeg"); Medium time.ipeg That's fine Is it easy
get Is it here ?
remember CSS Part to be written in head Inside the label
remember HTML Part to be written in body Inside the label
remember JS Part to be written in body Before the end of the label
Technology