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

This article editor for you detailed introduction "js how to achieve Christmas countdown page special effects", the content is detailed, the steps are clear, the details are handled properly, I hope this "js how to achieve Christmas countdown page special effects" article can help you solve doubts, the following follow the editor's ideas slowly in-depth, together to learn new knowledge.

Code for implementation:

Html Code:

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

Css 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

}

}

Js Code:

$(document) .ready (function () {

Var words = [

'Lorem'

'ipsum'

'delor'

'sit'

'amet'

'consect'

'adipisci'

'elit,'

'sed.'

'Eiusmod'

'tempor'

'a'

'enim'

'minim'

'season'

'nulla'

'dolore'

'sint'

'id'

'est'

'laboris'

'ut.'

'aute'

'laborum'

'toe'

]

Var message =''

Var date = new Date ()

Var day = date.getDate ()

Var month = date.getMonth () + 1

Var scrolled = false

Var timeDelay = 200

Var cardReveal = function () {

$('# message') .text (message) .show ()

}

If (month = 12) {

$('li') .each (function (index) {

Var adventwindow = index + 1

Var item = $(this)

If (day! = = adventwindow & & adventwindow < day) {

Window.setTimeout (function () {

Item.children ('.door'). AddClass ('open')

}, timeDelay)

}

TimeDelay + = 100

If (adventwindow = 26) {

MessageReveal ()

}

}

});

After reading this, the article "how to achieve the special effects on the Christmas countdown page by js" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it yourself. If you want to know more about the article, please follow the industry information channel.

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.