html5 倒计时跳转动画,HTML5弹性摇摆旋转的倒计时动画

CSS

语言:

CSSSCSS

确定

body {

background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);

font-family: 'Roboto', sans-serif;

margin: 0;

height: 100vh;

}

.counter {

position: fixed;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

text-align: center;

}

.counter.hide {

transform: translate(-50%, -50%) scale(0);

animation: hide .2s ease-out;

}

@keyframes hide {

0% {

transform: translate(-50%, -50%) scale(1);

}

100% {

transform: translate(-50%, -50%) scale(0);

}

}

.final {

position: fixed;

top: 50%;

left: 50%;

transform: translate(-50%, -50%) scale(0);

}

.final.show {

transform: translate(-50%, -50%) scale(1);

animation: show .3s ease-in;

}

@keyframes show {

0% {

transform: translate(-50%, -50%) scale(0);

}

80% {

transform: translate(-50%, -50%) scale(1.4);

}

100% {

transform: translate(-50%, -50%) scale(1);

}

}

.nums {

color: #3498db;

position: relative;

font-size: 50px;

overflow: hidden;

width: 250px;

height: 50px;

}

.nums span {

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%) rotate(120deg);

transform-origin: bottom center;

}

.nums span.in {

transform: translate(-50%, -50%) rotate(0deg);

animation: goIn .5s ease-in-out;

}

.nums span.out {

animation: goOut .5s ease-in-out;

}

@keyframes goIn {

0% {

transform: translate(-50%, -50%) rotate(120deg);

}

30% {

transform: translate(-50%, -50%) rotate(-20deg);

}

60% {

transform: translate(-50%, -50%) rotate(10deg);

}

90%,

100% {

transform: translate(-50%, -50%) rotate(0deg);

}

}

@keyframes goOut {

0%, 30% {

transform: translate(-50%, -50%) rotate(0deg);

}

60% {

transform: translate(-50%, -50%) rotate(20deg);

}

100% {

transform: translate(-50%, -50%) rotate(-120deg);

}

}

h4 {

font-size: 20px;

margin: 5px;

text-transform: uppercase;

}

footer {

position: fixed;

bottom: 0;

left: 0;

right: 0;

text-align: center;

letter-spacing: 1px;

}

footer i {

color: red;

}

footer a {

color: #3C97BF;

text-decoration: none;

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值