运用css3和js实现手写字体滚动动画
`
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
ul li {
list-style-type: none;
}
/* 字体滚动 */
#scrollDiv {
position: absolute;
z-index: 9999;
top: 0.5rem;
left: 0;
font-weight: lighter;
font-family: "PingFang SC Light", "PingFang SC", "Microsoft Yahei", sans-serif;
font-size: 0.28rem;
height: 2.40rem;
width: 100%;
overflow: hidden;
text-align: center;
}
#scrollDiv p {
position: absolute;
width: 100%;
left: 0;
bottom: 0.2rem;
height: 1rem;
line-height: 2.4rem;
text-align: center;
font-weight: lighter;
}
.defult-4 {
transform: translateY(-2.4rem);
color: #aaaaaa;
}
.defult-3 {
transform: translateY(-1.6rem);
color: #aaaaaa;
}
.defult-2 {
transform: scale(1.5, 1.5) translateY(-0.8rem);
/* font-size: 30px; */
}
.defult-1 {
transform: translateY(0);
color: #aaaaaa;
}
.defult-0 {
transform: translateY(0.8rem);
}
.animation1 {
animation: fadeInUp01 1s linear 0s 1 alternate;
/* Safari and Chrome: */
-webkit-animation: fadeInUp01 1s linear 0s 1 alternate;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
.animation2 {
animation: fadeInUp02 1s linear 0s 1 alternate;
/* Safari and Chrome: */
-webkit-animation: fadeInUp02 1s linear 0s 1 alternate;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
.animation3 {
animation: fadeInUp03 1s linear 0s 1 alternate;
/* Safari and Chrome: */
-webkit-animation: fadeInUp03 1s linear 0s 1 alternate;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
.animation4 {
animation: fadeInUp04 1s linear 0s 1 alternate;
/* Safari and Chrome: */
-webkit-animation: fadeInUp04 1s linear 0s 1 alternate;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
@keyframes fadeInUp04 {
0% {
transform: translateY(-1.6rem);
opacity: 1;
color: #ccc;
}
100% {
transform: translateY(-2.2rem);
color: #ccc;
opacity: 0;
}
}
@-webkit-keyframes fadeInUp04 {
0% {
transform: translateY(-1.6rem);
color: #aaaaaa;
}
100% {
transform: translateY(-2.4rem);
color: #aaaaaa;
}
}
@keyframes fadeInUp01 {
0% {
transform: translateY(0.8rem);
color: #aaaaaa;
}
100% {
transform: translateY(0);
color: #aaaaaa;
}
}
@-webkit-keyframes fadeInUp01 {
0% {
transform: translateY(0.8rem);
color: #aaaaaa;
}
100% {
transform: translateY(0);
color: #aaaaaa;
}
}
@-webkit-keyframes fadeInUp02 {
0% {
transform: scale(1, 1) translateY(0);
color: #aaaaaa;
}
100% {
transform: scale(1.5, 1.5) translateY(-0.8rem);
color: #3c3c3c;
}
}
@keyframes fadeInUp02 {
0% {
transform: scale(1, 1) translateY(0);
color: #aaaaaa;
}
100% {
transform: scale(1.5, 1.5) translateY(-0.8rem);
color: #3c3c3c;
}
}
@keyframes fadeInUp03 {
0% {
transform: scale(1.5, 1.5) translateY(-0.8rem);
color: #3c3c3c;
}
100% {
transform: scale(1, 1) translateY(-1.6rem);
color: #aaaaaa;
}
}
@-webkit-keyframes fadeInUp03 {
0% {
transform: scale(1.5, 1.5) translateY(-0.8rem);
color: #3c3c3c;
}
100% {
transform: scale(1, 1) translateY(-1.6rem);
color: #aaaaaa;
}
}
</style>
</head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script>
function updateFontSize() {
document.getElementsByTagName('html')[0].style.fontSize = 100 * (document.documentElement.clientWidth / 1920) + 'px';;
}
updateFontSize();
window.onresize = function() {
updateFontSize();
};
</script>
<body>
<!--滚动文字-->
<div id="scrollDiv">
<p class="defult-4" data-index="4">"小飞小飞，15+5-10×2÷4等于多少"</p>
<p class="defult-3" data-index="3">"小飞小飞，小鸟为什么会飞"</p>
<p class="defult-2" data-index="2">"小飞小飞，现在几点了"</p>
<p class="defult-1" data-index="1">"小飞小飞，明天天气怎么样"</p>
<p class="defult-0" data-index="0">"小飞小飞，我要听光辉岁月"</p>
<p class="defult-0" data-index="0">"小飞小飞，明天8点叫我起床"</p>
<p class="defult-0" data-index="0">"小飞小飞，我要听评书"</p>
<p class="defult-0" data-index="0">"小飞小飞，今天存贷款利率是多少"</p>
<p class="defult-0" data-index="0">"生活助手 金融家 娱乐明星 学习机 多面手"</p>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script>
// 字体滚动
function autoscroll(obj) {
let textContent = "";
$(obj).find('p').each(function(index, k) {
let $this = this;
//获取当前的内容
if(index == 0) {
textContent = $($this).html();
}
if(index > 0 && index < 5) {
let dataIndex = $($this).attr("data-index");
dataIndex = parseInt(dataIndex) + 1
$($this).removeClass($($this).attr("class")).addClass("animation" + dataIndex).attr("data-index", dataIndex);
setTimeout(function() {
$($this).addClass("defult-" + dataIndex);
if(index == 4) {
$(obj).append("<p class='defult-0' data-index='0'>" + textContent + "</p>");
$(obj).find('p').eq(0).remove();
}
}, 200);
}
})
}
$(function() {
setIntervalScrollDiv = setInterval('autoscroll("#scrollDiv")', 2000)
})
</script>
</body>
