“PK creative Spring Festival, I am participating in the” Spring Festival Creative submission contest “, please see: Spring Festival Creative Submission Contest”
preface
The year of the Tiger is coming, a New Year, a new atmosphere. As a front-end small white, that of course have to use what you learned to write beautiful CSS, but CSS peak has passed, ha ha ha, shallow CSS or will. Next, draw a lantern
Realization of lantern
As the picture shows, the lantern is made up of two parts, the red rectangle in the middle and the yellow one. Of course, the rectangles need to be addedborder-radiusRounded border property. And, of course, inner and outer shadowsbox-shadowProperty implementation, appear some three-dimensional feeling. The key, of course, is positioning, adding relative positioning to their common parent elementsposition: relative, the child element adds absolute positioningposition: absolute.
Code implementation
<! - lantern1 -->
<div class="lamps">
<! Line -- -- -- >
<div class="lamp_3">
</div>
<div class="lamp">
<! -- Main golden rectangle -->
<div class="lamp_1">
</div>
<! -- Red oval -->
<div class="lamp_2">
<! -- Thread in the lantern -->
<div class="border_1"></div>
<div class="border_2"></div>
<span>blessing</span>
</div>
</div>
</div>
Copy the codeAnd the lines inside the lantern are also written with rounded borders, so that a lantern is ready, and the CSS style is shown below. Of course, you can also add animations of lanterns swinging from side to side.
Lantern left and right swing animation usedanimation: move 5s 1s infinite;To implement the
Animation properties of usage, the first parameter for animation name, the second parameter for execution time, the third argument for animation speed, the fourth parameter for animation delay, the fifth parameter for execution times (infinite infinite) to implement direction, the sixth parameter seventh parameter for execution status, the eighth parameter for the location of the animation stops.
//move is the animation name
@keyframes move {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(10deg);
}
50% {
transform: rotate(0deg);
}
75% {
transform: rotate(-10deg);
}
100% {
transform: rotate(0deg); }}Copy the codeWrite random greetings in JS with click events (known as random roll call)
Random blessing message can be implemented by using timer (setInterval). The blessing message to be generated is saved in array. When rendering, the value of array subscript can be changed in timer to render different blessing message.
The encapsulated timer, num is the array subscript, let it change in the timer, so that the value of each render will be different
function set() {
t = setInterval(function() {
if (num >= arr.length - 1) {
num = 0;
} else {
num++;
}
console.log(num);
oCont.innerHTML = arr[num];
}, 100)}Copy the codeIn the click event, click on a clear timer, to achieve the effect can stop the random change of blessing. So that we can achieve the effect of extraction
However, the important thing is that when the click event is triggered again, the timer is called and the message continues to change randomly.
Code implementation
function set() {
t = setInterval(function() {
if (num >= arr.length - 1) {
num = 0;
} else {
num++;
}
console.log(num);
oCont.innerHTML = arr[num];
}, 100)
}
oBtn.onclick = function() { flag = ! flag; oBtn.style ="box-shadow: 0px 0px 10px black, 0px 0px 5px black inset"
clearInterval(t);
// When clicked again, the timer is called
if(! flag) { oBtn.style ="box-shadow: 0px 0px 10px blackt"; set(); }}Copy the codeAs shown in the figure, you can randomly wish a blessing.
The source code is as follows:
The CSS part:
<style>
* {
padding: 0;
margin: 0;
}
body,
html {
width: 100%;
height: 100%;
background: url(./images/background.jpg) no-repeat;
background-size: 100% 100%;
}
.lamps {
position: absolute;
left: 60px;
/* transform: translateX(-50%); * /
top: 170px;
}
.lamps_1 {
left: 440px;
}
.box {
position: absolute;
left: 50%;
transform: translateX(-50%);
height: 577px;
width: 600px;
background: url(./images/bk.png) no-repeat;
background-size: 100% 100%;
}
.lamp {
width: 100px;
min-height: 100px;
position: relative;
/* border: 1px solid black; * /
margin-top: 30px;
transform-origin: top;
animation: move 5s 1s infinite;
}
.lamp .lamp_1 {
height: 100px;
width: 50px;
background-color: rgb(253.253.36);
border-radius: 10px;
position: absolute;
left: 50%;
transform: translateX(-50%);
box-shadow: 2px 0px 5px rgb(68.55.55), 0px 0px 10px wheat inset;
}
.lamp .lamp_2 {
width: 100px;
height: 75px;
position: absolute;
top: 50%;
transform: translateY(-50%);
border-radius: 50px;
background-color: red;
box-shadow: 0px 0px 50px red, 0px 0px 10px wheat inset;
overflow: hidden;
}
.lamps .lamp_3 {
height: 100px;
width: 2px;
background-color: black;
opacity: 7.;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0;
}
.lamp .border_1,
.lamp .border_2 {
height: 80px;
width: 80px;
position: absolute;
top: -3px;
left: 50%;
transform: translateX(-50%);
border: 1px solid black;
opacity: . 5;
border-radius: 50%;
}
.lamp .lamp_2 span {
display: block;
font-size: 40px;
line-height: 75px;
text-align: center;
}
.lamp .border_2 {
width: 50px;
}
.content {
width: 400px;
height: 100px;
border: 10px solid red;
border-radius: 10px;
box-shadow: 0px 0px 10px black, 0px 0px 5px black inset;
background-color: salmon;
font-size: 75px;
line-height: 100px;
text-align: center;
margin: 50px auto;
}
button {
height: 50px;
width: 150px;
font-size: 20px;
border: 2px solid red;
border-radius: 5px;
background-color: salmon;
cursor: pointer;
opacity: 7.;
box-shadow: 0px 0px 10px black;
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
}
@keyframes move {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(10deg);
}
50% {
transform: rotate(0deg);
}
75% {
transform: rotate(-10deg);
}
100% {
transform: rotate(0deg);
}
}
</style>
Copy the code <div class="box"> <! - lantern1 -->
<div class="lamps">
<! Line -- -- -- >
<div class="lamp_3">
</div>
<div class="lamp">
<! -- Main golden rectangle -->
<div class="lamp_1">
</div>
<! -- Red oval -->
<div class="lamp_2">
<! -- Thread in the lantern -->
<div class="border_1"></div>
<div class="border_2"></div>
<span>blessing</span>
</div>
</div>
</div><! - lantern2 -->
<div class="lamps lamps_1">
<! Line -- -- -- >
<div class="lamp_3">
</div>
<div class="lamp">
<! -- Main golden rectangle -->
<div class="lamp_1">
</div>
<! -- Red oval -->
<div class="lamp_2">
<! -- Thread in the lantern -->
<div class="border_1"></div>
<div class="border_2"></div>
<span>The tiger</span>
</div>
</div>
</div><! -- Greetings box --><div class="content">
</div>
<button>Click to extract greetings</button>
</div>
<script>
let oBtn = document.querySelector('button');
let oCont = document.querySelector('.content');
let flag = false;
let arr = ["Tiger tiger is alive.".The Year of the Tiger."All the best."."Get what you want."."Alive and kicking"."Blessed tiger gives birth to prosperity."."Full of tiger."."Tiger promises good harvest."."Golden Tiger sends joy."];
oCont.innerHTML = arr[0];
let num = 0;
// The timer makes the message random
set();
function set() {
t = setInterval(function() {
if (num >= arr.length - 1) {
num = 0;
} else {
num++;
}
console.log(num);
oCont.innerHTML = arr[num];
}, 100)
}
oBtn.onclick = function() { flag = ! flag; oBtn.style ="box-shadow: 0px 0px 10px black, 0px 0px 5px black inset"
clearInterval(t);
if(! flag) { oBtn.style ="box-shadow: 0px 0px 10px blackt"; set(); }}</script>
Copy the code