Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to make the 2014 Christmas countdown web page

2025-04-15 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/03 Report--

This article mainly introduces "how to make the 2014 Christmas countdown web page". In the daily operation, I believe many people have doubts about how to make the 2014 Christmas countdown web page. I hope it will be helpful to answer the doubts about how to make the 2014 Christmas countdown web page. Next, please follow the editor to study!

Let's take a look at the effect picture:

Before the mouse clicks on the 5th

After clicking the mouse on the 5th

The code for the implementation.

Html Code:

XML/HTML Code copies content to the clipboard

Merry Christmas

one

two

three

four

five

six

seven

eight

nine

ten

eleven

twelve

thirteen

fourteen

fifteen

sixteen

seventeen

eighteen

nineteen

twenty

twenty-one

twenty-two

twenty-three

twenty-four

twenty-five

Css3 Code:

Copy the content to the clipboard with Candlestick + Code

Body {

Background: url ("xmas.jpg")

Color: # fff

Font-family: 'Oleo Script', cursive

Padding: 20px

Font-weight: 400

}

H2 {

Margin:0

Font-size:75px

Line-height: 75px

Text-align: center

Font-weight: 400

}

Ul {

Margin:0 auto 30px auto

Padding:0

List-style-type:none

Max-width:900px

Width: 100%

Text-align: center

User-select: none

}

Li {

Font-weight: 400

Background-color: # fff

Box-sizing: border-box

Border-radius: 6px

Display: inline-block

Color:#111

Cursor:pointer

Font-size: 26px

Padding:15px

Margin:25px 12px

Width: 130px

Height:130px

Line-height: 100px

Text-align:center

Position: relative

Vertical-align:top

User-select: none

Perspective: 800px

Transition: all 0.4s ease-in-out

}

Ul li:last-child {

Background-size:cover

Display:block

Clear:both

Margin: 20px auto 0 auto

Width: 200px

Height: 275px

}

Ul li:last-child .door {

Font-size: 100px

Width: 200px

Height: 275px

Line-height: 240px

}

Ul li:last-child .revealed {

Line-height: 123px

}

.door {

User-select: none

Color:#fff

Font-size: 70px

Position: absolute

Top:0

Left:0

Background-color: # 91c1cc

Box-sizing: border-box

Border-top: 2px # eee dashed

Border-right: 2px # eee dashed

Border-bottom: 2px # eee dashed

Border-left: 1px # eee solid

Border-radius: 6px

Padding:15px

Width: 130px

Height:130px

Transform-origin: 0.40%

Transition: all 0.4s ease-in-out

Transform-style: preserve-3d

}

.current .door {

Background-color: # 7EAD44

}

.current .door.open {

Color: # 7EAD44

}

.revealed {

User-select: none

}

# message {

Box-sizing: border-box

Color: # 222

Display: none

Font-size: 24px

Padding: 20px

Background: # eddecb

Max-width: 500px

Width: 100%

Border-radius: 15px

Margin: 0 auto

}

.open {

Box-shadow: 14px 0px 15px-1px rgba (0pc0pl 0pl 0.2)

Color: # 91c1cc

Transform: rotate3d (0,1,0,-98deg)

}

.jiggle {

Animation: jiggle 0.2s infinite

Transform: rotate (- 1deg)

}

@ keyframes jiggle {

0% {

Transform: rotate (- 1deg)

}

50% {

Transform: rotate (1deg)

}

}

@ media screen and (min-width: 480px) {

Li {

Margin:25px 20px

}

}

@ media screen and (min-width: 768px) {

Body {

Background-size:150px

}

P {

Right: 6%

Top: 20%

Bottom: auto

Margin-left: auto

Left: auto

}

}

At this point, the study on "how to make the 2014 Christmas countdown page" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report