咔叽游戏

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 568|回复: 0

[CSS] CSS3 实现倒计时效果

[复制链接]
  • TA的每日心情
    无聊
    2019-4-21 13:02
  • 签到天数: 3 天

    [LV.2]圆转纯熟

    发表于 2020-12-18 17:36:10 | 显示全部楼层 |阅读模式
    实现效果
    CSS3 实现倒计时效果-1.jpg

    实现代码

    html
    1. <div class='wrapper'>
    2.   <div class='time-part-wrapper'>
    3.     <div class='time-part minutes tens'>
    4.       <div class='digit-wrapper'>
    5.         <span class='digit'>0</span>
    6.         <span class='digit'>5</span>
    7.         <span class='digit'>4</span>
    8.         <span class='digit'>3</span>
    9.         <span class='digit'>2</span>
    10.         <span class='digit'>1</span>
    11.         <span class='digit'>0</span>
    12.       </div>
    13.     </div>
    14.     <div class='time-part minutes ones'>
    15.       <div class='digit-wrapper'>
    16.         <span class='digit'>0</span>
    17.         <span class='digit'>9</span>
    18.         <span class='digit'>8</span>
    19.         <span class='digit'>7</span>
    20.         <span class='digit'>6</span>
    21.         <span class='digit'>5</span>
    22.         <span class='digit'>4</span>
    23.         <span class='digit'>3</span>
    24.         <span class='digit'>2</span>
    25.         <span class='digit'>1</span>
    26.         <span class='digit'>0</span>
    27.       </div>
    28.     </div>
    29.   </div>
    30.   <div class='time-part-wrapper'>
    31.     <div class='time-part seconds tens'>
    32.       <div class='digit-wrapper'>
    33.         <span class='digit'>0</span>
    34.         <span class='digit'>5</span>
    35.         <span class='digit'>4</span>
    36.         <span class='digit'>3</span>
    37.         <span class='digit'>2</span>
    38.         <span class='digit'>1</span>
    39.         <span class='digit'>0</span>
    40.       </div>
    41.     </div>
    42.     <div class='time-part seconds ones'>
    43.       <div class='digit-wrapper'>
    44.         <span class='digit'>0</span>
    45.         <span class='digit'>9</span>
    46.         <span class='digit'>8</span>
    47.         <span class='digit'>7</span>
    48.         <span class='digit'>6</span>
    49.         <span class='digit'>5</span>
    50.         <span class='digit'>4</span>
    51.         <span class='digit'>3</span>
    52.         <span class='digit'>2</span>
    53.         <span class='digit'>1</span>
    54.         <span class='digit'>0</span>
    55.       </div>
    56.     </div>
    57.   </div>
    58.   <div class='time-part-wrapper'>
    59.     <div class='time-part hundredths tens'>
    60.       <div class='digit-wrapper'>
    61.         <span class='digit'>0</span>
    62.         <span class='digit'>9</span>
    63.         <span class='digit'>8</span>
    64.         <span class='digit'>7</span>
    65.         <span class='digit'>6</span>
    66.         <span class='digit'>5</span>
    67.         <span class='digit'>4</span>
    68.         <span class='digit'>3</span>
    69.         <span class='digit'>2</span>
    70.         <span class='digit'>1</span>
    71.         <span class='digit'>0</span>
    72.       </div>
    73.     </div>
    74.     <div class='time-part hundredths ones'>
    75.       <div class='digit-wrapper'>
    76.         <span class='digit'>0</span>
    77.         <span class='digit'>9</span>
    78.         <span class='digit'>8</span>
    79.         <span class='digit'>7</span>
    80.         <span class='digit'>6</span>
    81.         <span class='digit'>5</span>
    82.         <span class='digit'>4</span>
    83.         <span class='digit'>3</span>
    84.         <span class='digit'>2</span>
    85.         <span class='digit'>1</span>
    86.         <span class='digit'>0</span>
    87.       </div>
    88.     </div>
    89.   </div>
    90. </div>
    复制代码
    css
    1. /* Play with speed and easing of the animation */
    2. /* =========================================== */
    3. .digit {
    4.   display: inline-block;
    5.   font-size: 200px;
    6.   color: rgba(0, 0, 0, 0.25);
    7.   height: 180px;
    8.   line-height: 1;
    9. }
    10. .time-part-wrapper {
    11.   display: inline-block;
    12.   margin-right: 50px;
    13.   position: relative;
    14. }
    15. .time-part-wrapper:not(:last-child):after {
    16.   content: ":";
    17.   display: block;
    18.   width: 30px;
    19.   height: 230px;
    20.   position: absolute;
    21.   top: 0px;
    22.   right: -30px;
    23.   color: rgba(0, 0, 0, 0.25);
    24.   font-size: 200px;
    25.   line-height: 0.9;
    26. }
    27. .time-part {
    28.   width: 140px;
    29.   text-align: center;
    30.   height: 180px;
    31.   overflow: hidden;
    32.   display: inline-block;
    33.   margin-left: -5px;
    34.   box-sizing: border-box;
    35. }
    36. .time-part .digit-wrapper {
    37.   animation-timing-function: cubic-bezier(1, 0, 1, 0);
    38. }
    39. .time-part.minutes.tens .digit-wrapper {
    40.   animation-name: minutes-tens;
    41.   animation-duration: 3600s;
    42.   animation-iteration-count: 1;
    43. }
    44. .time-part.minutes.ones .digit-wrapper {
    45.   animation-name: minutes-ones;
    46.   animation-duration: 600s;
    47.   animation-iteration-count: 6;
    48. }
    49. .time-part.seconds.tens .digit-wrapper {
    50.   animation-name: seconds-tens;
    51.   animation-duration: 60s;
    52.   animation-iteration-count: 60;
    53. }
    54. .time-part.seconds.ones .digit-wrapper {
    55.   animation-name: seconds-ones;
    56.   animation-duration: 10s;
    57.   animation-iteration-count: 360;
    58. }
    59. .time-part.hundredths.tens .digit-wrapper {
    60.   animation-name: hundredths-tens;
    61.   animation-duration: 1s;
    62.   animation-iteration-count: 3600;
    63. }
    64. .time-part.hundredths.ones .digit-wrapper {
    65.   animation-name: hundredths-ones;
    66.   animation-duration: 0.1s;
    67.   animation-iteration-count: 36000;
    68. }
    69. @keyframes minutes-tens {
    70.   0% {
    71.     transform: translateY(-180px);
    72.   }
    73.   16.66667% {
    74.     transform: translateY(-360px);
    75.   }
    76.   33.33333% {
    77.     transform: translateY(-540px);
    78.   }
    79.   50% {
    80.     transform: translateY(-720px);
    81.   }
    82.   66.66667% {
    83.     transform: translateY(-900px);
    84.   }
    85.   83.33333% {
    86.     transform: translateY(-1080px);
    87.   }
    88. }
    89. @keyframes minutes-ones {
    90.   0% {
    91.     transform: translateY(-180px);
    92.   }
    93.   10% {
    94.     transform: translateY(-360px);
    95.   }
    96.   20% {
    97.     transform: translateY(-540px);
    98.   }
    99.   30% {
    100.     transform: translateY(-720px);
    101.   }
    102.   40% {
    103.     transform: translateY(-900px);
    104.   }
    105.   50% {
    106.     transform: translateY(-1080px);
    107.   }
    108.   60% {
    109.     transform: translateY(-1260px);
    110.   }
    111.   70% {
    112.     transform: translateY(-1440px);
    113.   }
    114.   80% {
    115.     transform: translateY(-1620px);
    116.   }
    117.   90% {
    118.     transform: translateY(-1800px);
    119.   }
    120. }
    121. @keyframes seconds-tens {
    122.   0% {
    123.     transform: translateY(-180px);
    124.   }
    125.   16.66667% {
    126.     transform: translateY(-360px);
    127.   }
    128.   33.33333% {
    129.     transform: translateY(-540px);
    130.   }
    131.   50% {
    132.     transform: translateY(-720px);
    133.   }
    134.   66.66667% {
    135.     transform: translateY(-900px);
    136.   }
    137.   83.33333% {
    138.     transform: translateY(-1080px);
    139.   }
    140. }
    141. @keyframes seconds-ones {
    142.   0% {
    143.     transform: translateY(-180px);
    144.   }
    145.   10% {
    146.     transform: translateY(-360px);
    147.   }
    148.   20% {
    149.     transform: translateY(-540px);
    150.   }
    151.   30% {
    152.     transform: translateY(-720px);
    153.   }
    154.   40% {
    155.     transform: translateY(-900px);
    156.   }
    157.   50% {
    158.     transform: translateY(-1080px);
    159.   }
    160.   60% {
    161.     transform: translateY(-1260px);
    162.   }
    163.   70% {
    164.     transform: translateY(-1440px);
    165.   }
    166.   80% {
    167.     transform: translateY(-1620px);
    168.   }
    169.   90% {
    170.     transform: translateY(-1800px);
    171.   }
    172. }
    173. @keyframes hundredths-tens {
    174.   0% {
    175.     transform: translateY(-180px);
    176.   }
    177.   10% {
    178.     transform: translateY(-360px);
    179.   }
    180.   20% {
    181.     transform: translateY(-540px);
    182.   }
    183.   30% {
    184.     transform: translateY(-720px);
    185.   }
    186.   40% {
    187.     transform: translateY(-900px);
    188.   }
    189.   50% {
    190.     transform: translateY(-1080px);
    191.   }
    192.   60% {
    193.     transform: translateY(-1260px);
    194.   }
    195.   70% {
    196.     transform: translateY(-1440px);
    197.   }
    198.   80% {
    199.     transform: translateY(-1620px);
    200.   }
    201.   90% {
    202.     transform: translateY(-1800px);
    203.   }
    204. }
    205. @keyframes hundredths-ones {
    206.   0% {
    207.     transform: translateY(-180px);
    208.   }
    209.   10% {
    210.     transform: translateY(-360px);
    211.   }
    212.   20% {
    213.     transform: translateY(-540px);
    214.   }
    215.   30% {
    216.     transform: translateY(-720px);
    217.   }
    218.   40% {
    219.     transform: translateY(-900px);
    220.   }
    221.   50% {
    222.     transform: translateY(-1080px);
    223.   }
    224.   60% {
    225.     transform: translateY(-1260px);
    226.   }
    227.   70% {
    228.     transform: translateY(-1440px);
    229.   }
    230.   80% {
    231.     transform: translateY(-1620px);
    232.   }
    233.   90% {
    234.     transform: translateY(-1800px);
    235.   }
    236. }
    237. body {
    238.   background: #F1614B;
    239.   margin: 0;
    240.   font-family: "Aldrich";
    241. }
    242. .wrapper {
    243.   margin: 100px auto;
    244.   width: 1000px;
    245.   position: relative;
    246. }
    247. .wrapper:before, .wrapper:after {
    248.   content: "";
    249.   display: block;
    250.   position: absolute;
    251.   width: 100%;
    252.   left: 0;
    253.   height: 20px;
    254.   z-index: 10;
    255. }
    256. .wrapper:before {
    257.   top: 0px;
    258.   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YxNjE0YiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2YxNjE0YiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
    259.   background-size: 100%;
    260.   background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f1614b), color-stop(100%, rgba(241, 97, 75, 0)));
    261.   background-image: -moz-linear-gradient(top, #f1614b 0%, rgba(241, 97, 75, 0) 100%);
    262.   background-image: -webkit-linear-gradient(top, #f1614b 0%, rgba(241, 97, 75, 0) 100%);
    263.   background-image: linear-gradient(to bottom, #f1614b 0%, rgba(241, 97, 75, 0) 100%);
    264. }
    265. .wrapper:after {
    266.   bottom: 0px;
    267.   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YxNjE0YiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMTYxNGIiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
    268.   background-size: 100%;
    269.   background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(241, 97, 75, 0)), color-stop(100%, #f1614b));
    270.   background-image: -moz-linear-gradient(top, rgba(241, 97, 75, 0) 0%, #f1614b 100%);
    271.   background-image: -webkit-linear-gradient(top, rgba(241, 97, 75, 0) 0%, #f1614b 100%);
    272.   background-image: linear-gradient(to bottom, rgba(241, 97, 75, 0) 0%, #f1614b 100%);
    273. }
    复制代码
    以上就是CSS3 实现倒计时效果的详细内容,更多关于CSS3 倒计时的资料请关注咔叽论坛其它相关文章!

    原文地址:https://www.jb51.net/css/753192.html

    QQ|免责声明|小黑屋|手机版|Archiver|咔叽游戏

    GMT+8, 2024-3-29 12:53

    Powered by Discuz! X3.4

    © 2001-2023 Discuz! Team.

    快速回复 返回顶部 返回列表