无限滚动与文字跳动

㈠用HTML5+CSS3做无限滚动效果

⑴逻辑分析

无限滚动与文字跳动_第1张图片

 

⑵实践示例

前5张图片为所有图片显示区,假设总长度为1100px;

后面出现的五张图片为克隆区,只是将前面的图片拷贝了一份;

然后将前五张和后五张的内容“捆绑”放在一个ul中,滚动的时候,就可以使得他们整体移动了

为了方便起见,尽量将ul的宽度设置的大一点,这样的话,可以容纳足够多的图片,包括克隆的图片

 

代码示例:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Documenttitle>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
 
        #container{
            width:800px;
            height:300px;
            margin:100px auto;
            overflow: hidden;
            position: relative;
        }
 
        #container ul{
            list-style: none;
            width:4000px;
            left:0;
            top:0;
            position: absolute;
            -webkit-animation:scoll 6s linear 0s infinite;
        }
 
        #container ul li{
            float:left;
            margin-right:20px;
        }
 
        @-webkit-keyframes scoll{
            from{
                left:0;
            }
            to{
                left:-1100px;
            }
        } 
        
    style>
head>
<body>
    <div id="container">
        <ul>
            <li><a href="#"><img src="xz6.jpg" />a>li>
            <li><a href="#"><img src="xz2.jpg" />a>li>
            <li><a href="#"><img src="xz3.jpg" />a>li>
            <li><a href="#"><img src="xz4.jpg" />a>li>
            <li><a href="#"><img src="xz1.jpg" />a>li>
            <li><a href="#"><img src="xz6.jpg" />a>li>
            <li><a href="#"><img src="xz2.jpg" />a>li>
            <li><a href="#"><img src="xz3.jpg" />a>li>
            <li><a href="#"><img src="xz4.jpg" />a>li>
            <li><a href="#"><img src="xz1.jpg" />a>li>
        ul>
    div>
body>
html>

 

效果图:

无限滚动与文字跳动_第2张图片

 

 

㈡用HTML5+CSS3做文字跳动

思路分析:

1. 由于文字有层次感的跳动,所以我们应该 "各个击破", 每个文字有它自己的 "空间"。

2. 各个文字有先有后的跳动,所以我们应该一次递增每个文字的动画时长。

3. span标签默认是行内元素;但是对它们进行float操作之后,它们会变成块级元素。

代码示例

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style type="text/css">
 
        h2 span{
            float:left;
            position: relative;
        }
 
        h2 span:nth-child(1){
            -webkit-animation:jump 1s linear 0s infinite alternate;
        }
 
        h2 span:nth-child(2){
            -webkit-animation:jump 1s linear 0.2s infinite alternate;
        }
 
        h2 span:nth-child(3){
            -webkit-animation:jump 1s linear 0.4s infinite alternate;
        }
 
        h2 span:nth-child(4){
            -webkit-animation:jump 1s linear 0.6s infinite alternate;
        }
 
        h2 span:nth-child(5){
            -webkit-animation:jump 1s linear 0.8s infinite alternate;
        }
 
 
        @-webkit-keyframes jump
        {
            0%{
                top:0px;
                color:red;
            }
            50%{
                top:-10px;
                color:green;
            }
            100%{
                top:10px;
                color:blue;
            }
        }
 
    style>
head>
<body>
    <h2>
        <span>span>
        <span>span>
        <span>span>
        <span>span>
        <span>span>
        <span>span>
    h2>
body>
html>

 

效果图:

 

 

 

 

 参考:https://blog.csdn.net/sinat_27706697/article/details/49699367

你可能感兴趣的:(无限滚动与文字跳动)