一款带图标的文字无限滚动特效,多个图标配合滚动文字同步滚动,可以进行无限循环的效果,滚动的图标和文字均可以自由增加或删除,字体颜色、大小等也都能自由调整,喜欢的请直接收下哦。
页面的head部分先引入font-awesome.4.6.0.css图标字体库和jQuery库,代码如下:
<link rel="stylesheet" type="text/css" href="css/font-awesome.4.6.0.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
然后设置好页面各元素的样式,部分代码如下:
body {
background-color: #ff5d73;
padding-bottom: 3em;
}
.heading__container {
position: relative;
top: 5em;
left: 50%;
-webkit-transform: translate(-50%);
transform: translate(-50%);
width: 430px;
height: 165px;
}
.heading {
position: absolute;
width: 430px;
padding-bottom: 10px;
font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
font-size: 2.1em;
font-weight: 500;
color: #fff;
text-align: center;
border-bottom: 1px dashed #fff;
}
.bold {
display: inline-block;
line-height: 0.6;
font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
font-size: 1.1em;
font-weight: 300;
color: #fff838;
}
.facts__container {
position: absolute;
bottom: -2em;
left: 0;
width: 430px;
height: 78px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 20px 18px -25px #555;
}
.icon {
box-sizing: border-box;
display: inline-block;
height: 100%;
padding: 15px;
background-color: #12b48c;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
position: absolute;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
overflow-y: hidden;
}
.fa.fa-code,
.fa.fa-google,
.fa.fa-child,
.fa.fa-mortar-board,
.fa.fa-bug,
.fa.fa-lightbulb-o,
.fa.fa-headphones,
.fa.fa-keyboard-o {
height: auto;
color: #fff;
line-height: 46px;
-webkit-animation: animateEl 5s infinite;
animation: animateEl 5s infinite;
}
.fa-2x {
font-size: 2.5em;
}
.text__container {
box-sizing: border-box;
width: 320px;
height: auto;
padding: 5px 0;
position: absolute;
left: 98px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
overflow-y: hidden;
}
.text {
margin: 0;
font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
font-weight: 400;
font-size: 1.1em;
color: #12b48c;
position: relative;
-webkit-animation: animateEl 5s infinite;
animation: animateEl 5s infinite;
}
footer {
width: 100%;
height: 50px;
padding: 1em 0;
background-color: #ff5d73;
position: relative;
top: 10em;
text-align: center;
}
.footer__text {
font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
font-weight: 400;
font-size: 0.9em;
color: #fff;
}
.footer__text a {
text-decoration: none;
color: #fff838;
}
页面的body部分把图标和滚动文字放置在div容器里,代码如下:
<div class="heading__container">
<h1 class="heading">翻滚吧! <span class="bold"><code/></span></h1>
<div class="facts__container">
<div class="icon">
<span></span>
</div>
<div class="text__container">
<p class="text"></p>
</div>
</div>
</div>
页面的底部通过javascript设置图标和文字的滚动事件,代码如下:
(function(){
var iconList = [
"fa-code",
"fa-google",
"fa-child",
"fa-bug",
"fa-keyboard-o",
"fa-headphones",
"fa-lightbulb-o",
"fa-mortar-board"
];
var factsList = [
"想学编程永远不会太迟。",
"学编程时,百度和谷歌都是你的好朋友。",
"修复了一个错误,整个人感觉棒极了。",
"有时候,代码中可能有很多错误。",
"学编程可能从爱好变成职业。",
"即使在做其他事也可能想着代码。",
"编程培养了创造性思维,不容小觑哦。",
"推陈出新,编程是个终生学习的过程。"
];
function createElement(text, icon){
var p = document.querySelector(".text");
p.textContent = text;
var span = document.querySelector(".icon span");
span.className = "";
span.classList.add("fa", icon, "fa-2x", "fa-fw");
}
var i = 0;
var length = factsList.length;
var delayTime = 5000;
function nextFact(){
var fact = factsList[i];
var icon = iconList[i];
createElement(fact, icon);
i++;
if(i >= length){
i = 0;
}
setTimeout(nextFact, delayTime);
}
nextFact();
})();
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791