2014年的圣诞节即将来临之季。爱编程小编给大家分享一款2014年圣诞节倒计时网页，当天的日期卡片有抖动的效果。一起看下效果图：
鼠标点击5号前
鼠标点击5号后
实现的代码。
ht ML 代码：
XM L/HTML Code 复制内容到剪贴板
< h1 > &nbs p; ;m erry C hr istmas </ h1 > < ul > < li > < div class = "door" > 1 </ div > </ li > < li > < div class = "door" > 2 </ div > </ li > < li > < div class = "door" > 3 </ div > </ li > < li > < div class = "door" > 4 </ div > </ li > < li > < div class = "door" > 5 </ div > </ li > < li > < div class = "door" > 6 </ div > </ li > < li > < div class = "door" > 7 </ div > </ li > < li > < div class = "door" > 8 </ div > </ li > < li > < div class = "door" > 9 </ div > </ li > < li > < div class = "door" > 10 </ div > </ li > < li > < div class = "door" > 11 </ div > </ li > < li > < div class = "door" > 12 </ div > </ li > < li > < div class = "door" > 13 </ div > </ li > < li > < div class = "door" > 14 </ div > </ li > < li > < div class = "door" > 15 </ div > </ li > < li > < div class = "door" > 16 </ div > </ li > < li > < div class = "door" > 17 </ div > </ li > < li > < div class = "door" > 18 </ div > </ li > < li > < div class = "door" > 19 </ div > </ li > < li > < div class = "door" > 20 </ div > </ li > < li > < div class = "door" > 21 </ div > </ li > < li > < div class = "door" > 22 </ div > </ li > < li > < div class = "door" > 23 </ div > </ li > < li > < div class = "door" > 24 </ div > </ li > < li > < div class = "door" > 25 </ div > </ li > </ ul > < p id = "message" > </ p >
css3代码：
C/C++ Code 复制内容到剪贴板
body { background: url( "xmas. jpg " ); color: # fff; font-f ami ly: 'Oleo Script' , cursive; padding: 20px; font-weight : 400; } h1 { m arg in:0; font- Size: 75px; line-h ei ght: 75px; text-align: center ; font-weight: 400; } ul { mar gin :0 auto 30px auto; padding:0; list -s tyle -t y PE :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; dis play : inline -block; color:#111; cursor:pointer; font-size: 26px; padding:15px; margin:25px 12px; width: 130px; height:130px; line-height: 100px; text-align:center; pos IT ion: relative; vert ical -align:top; user-select: none; perspective: 800px; transition: all 0.4s ease -i n-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 . rev ealed { 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: PR eserve-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(0,0,0,0.2); color: #91c1cc; transform: rotate3d(0, 1, 0, -98 deg ); } .jiggle { animation: jiggle 0.2s infinite; transform: rotate(-1deg); } @keyfr am es 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; } }
总结
以上是 为你收集整理的 2014年圣诞节倒计时网页的制作过程 全部内容，希望文章能够帮你解决 2014年圣诞节倒计时网页的制作过程 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于2014年圣诞节倒计时网页的制作过程的详细内容...