CSS 实例之滚动的图片栏

番茄西红柿发布于2019-04-23 13:21 / 2139人阅读

摘要：设置大小，宽度为的两倍，高度与相同，并指定动画相关属性定义动画，主要是向左移动一组图片的长度增加鼠标悬停，动画暂停的效果最后给增加使得超出的部分隐藏，这样整体一组滚动的图片栏就做好了整体代码如下

在一些网站上可以经常看到有一些图片进行持续不断的滚动，这个效果可以通过css的动画效果来实现。具体效果如下

主要原理是通过动画向左移动。

首先给出两组一样的图片（同一行上），让整体图片向左移动一组图片的长度，

这样在动画结束时会迅速还原到原来位置，而此时正好与第二组图片交替，看起来就像是一组图片在不断循环向左滚动。

具体步骤如下：

1、设置主体代码各处两组一样的图片

 <nav>
        <ul>
            <li><img src="Images/1 (2).jpg" alt="">li>
            <li><img src="Images/2 (2).jpg" alt="">li>
            <li><img src="Images/3 (2).jpg" alt="">li>
            <li><img src="Images/1 (2).jpg" alt="">li>
            <li><img src="Images/2 (2).jpg" alt="">li>
            <li><img src="Images/3 (2).jpg" alt="">li>
        ul>
    nav>

2、设置nav的大小，宽度为一组图片相加的宽度，高度为图片的高度。

 
        nav {
            width: 750px;
            height: 170px;
            border: 1px solid red;
            margin: 100px auto;
}

3、设置ul大小，宽度为nav的两倍，高度与nav相同，并指定动画相关属性

ul {
            width: 200%;
            height: 100%;
            animation: picmove 5s linear infinite forwards;
        }

4、定义动画，主要是向左移动一组图片的长度

 @keyframes picmove {
            from {
                transform: translate(0);
            }
            to {
                transform: translate(-750px);
            }
        }

5、增加鼠标悬停，动画暂停的效果

ul:hover {
            animation-play-state: paused;
        }

6、最后给nav 增加 overflow：hidden 使得超出的部分隐藏，这样整体一组滚动的图片栏就做好了

整体代码如下

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
        }
        
        nav {
            width: 750px;
            height: 170px;
            border: 1px solid red;
            margin: 100px auto;
            overflow: hidden;
        }
        
        ul {
            width: 200%;
            height: 100%;
            animation: picmove 5s linear infinite forwards;
        }
        
        @keyframes picmove {
            from {
                transform: translate(0);
            }
            to {
                transform: translate(-750px);
            }
        }
        
        img {
            width: 250px;
            height: 170px;
            float: left;
        }
        
        ul:hover {
            animation-play-state: paused;
        }
    style>
head>

<body>
    <nav>
        <ul>
            <li><img src="Images/1 (2).jpg" alt="">li>
            <li><img src="Images/2 (2).jpg" alt="">li>
            <li><img src="Images/3 (2).jpg" alt="">li>
            <li><img src="Images/1 (2).jpg" alt="">li>
            <li><img src="Images/2 (2).jpg" alt="">li>
            <li><img src="Images/3 (2).jpg" alt="">li>
        ul>
    nav>
body>

html>

View Code

GPU云服务器云服务器 html图片的滚动导航栏css代码 css滚动条滚动条css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1768.html

css - 收藏集 - 掘金

摘要：绝对底部前端掘金来自国外的设计达人，纯，可以实现当正文内容很少时，底部位于窗口最下面。有效解决图片使用单位边角缺失的问题前端掘金起因在移动端使用布局时图片也需要用单位。 CSS 绝对底部 - 前端 - 掘金来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案...

phpmatt 2019-08-29 12:41 评论0 收藏0
【CSS练习】IT修真院--练习4-移动端界面

摘要：任务四一个最常见的移动端页面完成的事情完成简单布局，然后填充界面与效果图对比优化完成验收要求扩展性顶栏固定进行样式兼容性研究完成任务四深度思考跟随深度思考师兄建议进行修改输入栏左侧换用输入限制电话位，密码位根据结构的语义化修改尝试下再加一任务四、一个最常见的移动端页面完成的事情完成简单布局，然后填充界面与效果图对比优化完成验收要求：header扩展性 & 顶栏固定进行p...

kun_jian 2019-08-29 15:39 评论0 收藏0
vue 模仿今日头条demo

vue 头条 demo 写在前面总结一下写 demo 过程中遇到的一些问题，方便自己的学习总结！如有错误，还请指正！一直想学习使用 vue ，并准备以后在实际项目使用，之前跟着慕课网黄轶老师敲了一下饿了么商品购买页的demoele效果预览该 demo 借鉴自 hcy1996-github 这个项目，但内部内容，布局风格，完全不同，只为共同学习，共同交流数据接口直接打开今日...

simpleapples 2019-08-21 12:03 评论0 收藏0
CSS及布局

摘要：经过半年的打磨，正式发布，主要是新增了一些常用组件，并使用命名，为接下来的微信小程序开发做好准备。这两种方式实现的瀑布流式布局均支持首屏和网页窗口大小改变时的列数自适应。主要是对于标准里的布局方式草案中的布局方式进行一些总结。一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看...

jaysun 2019-08-29 14:04 评论0 收藏0
可视化效果(Visual effects)

摘要：一般地，一个块盒的内容都被限制在该盒的边内。这种盒并不一定会根据其祖先的属性裁剪。默认情况下，元素不会被裁剪。在闭合路径内的内容会显示，而路径外边的都会被剪掉著作权归作者所有。 Overflow and clipping 一般地，一个块盒的内容都被限制在该盒的content边内。某些情况下，一个盒可能会溢出，意味着它的部分内容或者全部内容位于该盒外部，例如：一行无法拆分，导致行盒比...

JowayYoung 2019-08-29 12:37 评论0 收藏0