html5点击字母点读,HTML5 CSS3 5个字母点击交互动画

CSS

语言：

CSSSCSS

确定

@import url('https://fonts.googleapis.com/css?family=Anton|Roboto');

.word {

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

perspective: 1000px;

perspective-origin: 200px 40px;

}

.word span {

cursor: pointer;

display: inline-block;

font-size: 100px;

user-select: none;

line-height: .8;

}

.word span:nth-child(1).active {

animation: balance 1.5s ease-out;

transform-origin: 0% 100% 0px;

}

@keyframes balance {

0%, 100% {

transform: rotate(0deg);

}

30%,

60% {

transform: rotate(-45deg);

}

}

.word span:nth-child(2).active {

animation: shrinkjump 1s ease-in-out;

transform-origin: bottom center;

}

@keyframes shrinkjump {

10%, 35% {

transform: scale(2, .2) translate(0, 0);

}

45%,

50% {

transform: scale(1) translate(0, -150px);

}

80% {

transform: scale(1) translate(0, 0);

}

}

.word span:nth-child(3).active {

animation: falling 2s ease-out;

transform-origin: bottom center;

}

@keyframes falling {

12% {

transform: rotateX(240deg);

}

24% {

transform: rotateX(150deg);

}

36% {

transform: rotateX(200deg);

}

48% {

transform: rotateX(175deg);

}

60%,

85% {

transform: rotateX(180deg);

}

100% {

transform: rotateX(0deg);

}

}

.word span:nth-child(4).active {

animation: rotate 1s ease-out;

}

@keyframes rotate {

20%, 80% {

transform: rotateY(180deg);

}

100% {

transform: rotateY(360deg);

}

}

.word span:nth-child(5).active {

animation: toplong 1.5s linear;

}

@keyframes toplong {

10%, 40% {

transform: translateY(-48vh) scaleY(1);

}

90% {

transform: translateY(-48vh) scaleY(4);

}

}

/* Other styles */

body {

background-color: skyblue;

color: #fff;

display: flex;

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

justify-content: center;

align-items: center;

flex-direction: row;

height: 100vh;

margin: 0;

}

.fixed {

position: fixed;

top: 40px;

left: 50%;

transform: translateX(-50%);

}

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;

}