动画效果
这里主要有四个动画效果的变化：
- 字的大小，是从大到小的，可用
transform的scale - 字的位置，是从左上到右下，可用
transform的translate - 字的透明度，渐渐变清晰，可用
opacity - 字的角度，从倒转到摆正，可用
transform的rotate
但，又注意到，字母是一个一个出现的，所以可以把他们放在span里，然后修改它的animation-delay。由于span标签是行内元素，不能修改大小，那transform的scale属性将会失去作用，所以要再加个display: inline-block;
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Text animation Left Flip</title>
<style>
.container {
margin: 0;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 50px;
color: #24a8e6;
}
.left-flip span{
/*行内块级才能 transform 属性*/
display: inline-block;
animation: revolveScale .4s forwards;
opacity: 0;
}
@keyframes revolveScale {
0% {
transform: translate(-150px, -50px) rotate(-180deg) scale(3);
opacity: 0;
}
60% {
transform: translate(20px, 20px) rotate(30deg) scale(.3);
}
100% {
transform: translate(0) rotate(0) scale(1);
opacity: 1;
}
}
.left-flip span:nth-of-type(2) {
animation-delay: .1s;
}
.left-flip span:nth-of-type(3) {
animation-delay: .2s;
}
.left-flip span:nth-of-type(4) {
animation-delay: .3s;
}
.left-flip span:nth-of-type(5) {
animation-delay: .4s;
}
.left-flip span:nth-of-type(6) {
animation-delay: .5s;
}
.left-flip span:nth-of-type(7) {
animation-delay: .6s;
}
.left-flip span:nth-of-type(8) {
animation-delay: .7s;
}
.left-flip span:nth-of-type(9) {
animation-delay: .8s;
}
.left-flip span:nth-of-type(10) {
animation-delay: .9s;
}
.left-flip span:nth-of-type(11) {
animation-delay: 1s;
}
/*按钮样式*/
.repeat {
padding: 5px;
font-size: 12px;
text-decoration: none;
color: rebeccapurple;
border: 1px solid #24a8e6;
}
</style>
</head>
<body>
<div class="container left-flip" >
<span>H</span>
<span>e</span>
<span>l</span>
<span>l</span>
<span>o</span>
<span>W</span>
<span>o</span>
<span>r</span>
<span>l</span>
<span>d</span>
<span>!</span>
<a class="repeat" href="javascript:void(0);">Repeat Animation</a>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script>
$('.repeat').click(function () {
var $container = $('.container')
$container.removeClass('left-flip')
setTimeout(function () {
$container.addClass('left-flip')
}, 20)
})
</script>
</body>
</html>
从右上也同理，只需要将初始位置修改一下就好：
transform: translate(150px, -50px) rotate(-180deg) scale(3);
效果
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Text animation Right Flip</title>
<style>
.container {
margin: 0;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 50px;
color: #24a8e6;
}
.left-flip span{
/*行内块级才能 transform 属性*/
display: inline-block;
animation: revolveScale .4s forwards;
opacity: 0;
}
@keyframes revolveScale {
0% {
transform: translate(150px, -50px) rotate(-180deg) scale(3);
opacity: 0;
}
60% {
transform: translate(20px, 20px) rotate(30deg) scale(.3);
}
100% {
transform: translate(0) rotate(0) scale(1);
opacity: 1;
}
}
.left-flip span:nth-of-type(2) {
animation-delay: .1s;
}
.left-flip span:nth-of-type(3) {
animation-delay: .2s;
}
.left-flip span:nth-of-type(4) {
animation-delay: .3s;
}
.left-flip span:nth-of-type(5) {
animation-delay: .4s;
}
.left-flip span:nth-of-type(6) {
animation-delay: .5s;
}
.left-flip span:nth-of-type(7) {
animation-delay: .6s;
}
.left-flip span:nth-of-type(8) {
animation-delay: .7s;
}
.left-flip span:nth-of-type(9) {
animation-delay: .8s;
}
.left-flip span:nth-of-type(10) {
animation-delay: .9s;
}
.left-flip span:nth-of-type(11) {
animation-delay: 1s;
}
/*按钮样式*/
.repeat {
padding: 5px;
font-size: 12px;
text-decoration: none;
color: rebeccapurple;
border: 1px solid #24a8e6;
}
</style>
</head>
<body>
<div class="container left-flip" >
<span>H</span>
<span>e</span>
<span>l</span>
<span>l</span>
<span>o</span>
<span>W</span>
<span>o</span>
<span>r</span>
<span>l</span>
<span>d</span>
<span>!</span>
<a class="repeat" href="javascript:void(0);">Repeat Animation</a>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script>
$('.repeat').click(function () {
var $container = $('.container')
$container.removeClass('left-flip')
setTimeout(function () {
$container.addClass('left-flip')
}, 20)
})
</script>
</body>
</html>
网友评论