HTML字母掉落游戏,HTML5 简单的物体掉落动画

最新推荐文章于 2021-07-01 20:38:43 发布

模数哥

最新推荐文章于 2021-07-01 20:38:43 发布

阅读量502

点赞数

文章标签： HTML字母掉落游戏

CSS

语言：

CSSSCSS

确定

html {

overflow-y: scroll;

text-align: center;

}

html,

body,

#drop {

height: 100%;

}

.bounce#drop {

animation: bounce 0.6s ease-out;

transform: translateY(0);

}

#drop {

cursor: pointer;

transform: translateY(-100%);

position: absolute;

left: 0;

right: 0;

}

p {

background: #fff;

font-family: sans-serif;

color: #555;

position: absolute;

bottom: 0;

width: 100%;

font-size: 4em;

}

#button {

cursor: pointer;

position: absolute;

left: 0;

width: 100%;

font-size: 3em;

border: 0;

background: none;

outline: 0;

}

#button:focus {

color: #555;

}

.hidden {

opacity: 0;

}

@keyframes bounce {

0% {

transform: translateY(-100%);

filter: blur(5px);

text-shadow: 0 -2px #555, 0 -3px #555, 0 -4px #555, 0 -5px #555, 0 -6px #555, 0 -7px #666, 0 -8px #666, 0 -9px #666, 0 -10px #666, 0 -11px #666, 0 -12px #777, 0 -13px #777, 0 -14px #777, 0 -15px #777, 0 -16px #777, 0 -17px #888, 0 -18px #888, 0 -19px #888, 0 -20px #888, 0 -21px #888, 0 -22px #999, 0 -23px #999, 0 -24px #999, 0 -25px #999, 0 -26px #999, 0 -27px #a7a7a7, 0 -28px #a7a7a7, 0 -29px #a7a7a7, 0 -30px #a7a7a7, 0 -31px #a7a7a7, 0 -32px #b7b7b7, 0 -33px #b7b7b7, 0 -34px #b7b7b7, 0 -35px #b7b7b7, 0 -36px #b7b7b7, 0 -37px #c7c7c7, 0 -38px #c7c7c7, 0 -39px #c7c7c7;

}

40% {

transform: translateY(0);

}

60% {

transform: translateY(-20%);

text-shadow: 0 2px #555, 0 3px #555, 0 4px #555, 0 5px #555, 0 6px #555, 0 7px #666, 0 8px #666, 0 9px #666, 0 10px #666, 0 11px #666, 0 12px #777, 0 13px #777, 0 14px #777, 0 15px #777, 0 16px #777, 0 17px #888, 0 18px #888, 0 19px #888, 0 20px #888, 0 21px #888, 0 22px #999, 0 23px #999, 0 24px #999, 0 25px #999, 0 26px #999, 0 27px #a7a7a7, 0 28px #a7a7a7, 0 29px #a7a7a7, 0 30px #a7a7a7, 0 31px #a7a7a7, 0 32px #b7b7b7, 0 33px #b7b7b7, 0 34px #b7b7b7, 0 35px #b7b7b7, 0 36px #b7b7b7, 0 37px #c7c7c7, 0 38px #c7c7c7, 0 39px #c7c7c7;

}

100% {

transform: translateY(0);

}