本文实例实现一个倒计时功能. 倒计时功能,用在项目的发布时间,或者某个活动做倒计时等等的突出时间功能的方面. 界面代码结构,先要完成好. 这个界面我就不做那么美观了,凑合就行(O(∩_∩)O哈哈~).
<Meta charset="UTF-8">
倒计时实现
@H_301_12@
ul,li {
margin: 0;
padding: 0;
list-style: none;
}
#countdown {
font-size: 50px;;
width: 350px;
margin: 0 auto;
background-image: none;
color: #fff;
padding: 100px;
font-weight: bolder;
}
#countdown ul {
display: flex;
align-items: flex-start;
justify-content: center;
}
#countdown ul li{
display: inline-block;
margin-left: 10px;
}
#countdown ul li:last-child {
margin-right: 10px;
}
:
:
:
#countdown ul li h3 {
text-shadow: 5px 5px 5px #000;
}
#countdown ul li h3,#countdown ul li span {
display: block;
text-align: center;
}
#sec {
color: #ff0000;
text-shadow: 5px 5px 2px #ff0000;
}