不抖的css3图片无缝滚动

最新推荐文章于 2023-05-12 14:06:43 发布
最新推荐文章于 2023-05-12 14:06:43 发布
阅读量113 收藏
点赞数
分类专栏： html5+css3 动画效果 文章标签： css css3 html jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37103514/article/details/118298297
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无缝滚动</title>
    <script src="js/jquery-3.2.1.min.js"></script>
    <style>
        *{margin: 0;padding: 0;}
        li{list-style: none;}
        a{text-decoration: none;}
        .wrap {
        width: 870px;
        height: 180px;
        position: relative;
        overflow: hidden;
        }
        .wrap ul .wrap_ref {
        display: block;
        width: 130px;
        height: 180px;
        float: left;
        }
        .wrap ul {
        overflow: hidden;
        position: absolute;
        left: 0;
        top: 0;
        _height: 180px;
        height: 180px;
        animation: 25s move infinite linear;
        -webkit-animation: 25s move infinite linear;
        }
        .wrap ul:hover {
        animation-play-state: paused;
        /*动画暂停播放*/
        -webkit-animation-play-state: paused;
        /*动画暂停播放*/
        }
        @keyframes move {
        0% {
            transform: translate(0px, 0px);
        }
        100% {
            transform: translate(-50%, 0px);
        }
        }
        @-webkit-keyframes move {
        0% {
            transform: translate(0px, 0px);
        }
        100% {
            transform: translate(-50%, 0px);
        }
        }
        .wrap_li {
        margin-top: 20px;
        width: 120px;
        height: 160px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        border: 1px solid #E6EAEF;
        transition: all 0.4s ease;
        -webkit-transition: all 0.4s ease;
        -moz-transition: all 0.4s ease;
        color: #3D4A5E;
        }
        .wrap_li:hover {
        box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.1);
        }
        .wrap_li:hover span {
        color: #3D4A5E;
        }
        .wrap_img {
        width: 70px;
        height: 70px;
        margin: auto;
        border-radius: 10px;
        margin-top: 30px;
        display: block;
        }
        .wrap_p {
        width: 100px;
        font-size: 14px;
        height: 15px;
        line-height: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        margin: auto;
        margin-top: 20px;
        text-align: center;
        }
        .wrap_p:hover {
        color: #3B8CFE !important;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <ul>
            <a class="wrap_ref" href="" target="_blank">
                <li class="wrap_li k_linkBlack">
                    <img class="wrap_img" src="images/2-01.jpg" alt="">
                    <span class="wrap_p">图片1</span>
                </li>
            </a>
            <a class="wrap_ref" href="" target="_blank">
                <li class="wrap_li k_linkBlack">
                    <img class="wrap_img" src="images/2-02.jpg" alt="">
                    <span class="wrap_p">图片2</span>
                </li>
            </a>
            <a class="wrap_ref" href="" target="_blank">
                <li class="wrap_li k_linkBlack">
                    <img class="wrap_img" src="images/2-03.jpg" alt="">
                    <span class="wrap_p">图片3</span>
                </li>
            </a>
            <a class="wrap_ref" href="" target="_blank">
                <li class="wrap_li k_linkBlack">
                    <img class="wrap_img" src="images/2-04.jpg" alt="">
                    <span class="wrap_p">图片4</span>
                </li>
            </a>
            <a class="wrap_ref" href="" target="_blank">
                <li class="wrap_li k_linkBlack">
                    <img class="wrap_img" src="images/2-05.jpg" alt="">
                    <span class="wrap_p">图片5</span>
                </li>
            </a>
            <a class="wrap_ref" href="" target="_blank">
                <li class="wrap_li k_linkBlack">
                    <img class="wrap_img" src="images/2-06.jpg" alt="">
                    <span class="wrap_p">图片6</span>
                </li>
            </a>
            <a class="wrap_ref" href="" target="_blank">
                <li class="wrap_li k_linkBlack">
                    <img class="wrap_img" src="images/2-07.jpg" alt="">
                    <span class="wrap_p">图片7</span>
                </li>
            </a>
            <a class="wrap_ref" href="" target="_blank">
                <li class="wrap_li k_linkBlack">
                    <img class="wrap_img" src="images/2-08.jpg" alt="">
                    <span class="wrap_p">图片8</span>
                </li>
            </a>
            <a class="wrap_ref" href="" target="_blank">
                <li class="wrap_li k_linkBlack">
                    <img class="wrap_img" src="images/2-09.jpg" alt="">
                    <sapn class="wrap_p">图片9</sapn>
                </li>
            </a>
            <a class="wrap_ref" href="" target="_blank">
                <li class="wrap_li k_linkBlack">
                    <img class="wrap_img" src="images/2-10.jpg" alt="">
                    <span class="wrap_p">图片10</span>
                </li>
            </a>
        </ul>
    </div>

    <script>
        $(function(){
        
            // 图片滚动
            var oul = $('.wrap ul');
            var oulHtml = oul.html();
            oul.html(oulHtml+oulHtml)
            var ali = $('.wrap ul .wrap_ref');
            var aliWidth = ali.eq(0).width();
            var aliSize = ali.length;
            var ulWidth = aliWidth*aliSize;
            $('.wrap ul').width(ulWidth)
        })
       
    </script>
</body>
</html>
金翅
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Css3实现无缝滚动防抖
11-19
### CSS3 实现无缝滚动防抖 #### 问题背景与挑战 在移动设备上实现图片加文字的无缝滚动效果时，经常会遇到一个棘手的问题：图片在某些浏览器中会出现明显的抖动现象。这种抖动不仅影响用户体验，还可能降低网站的...
Css3无缝滚动防抖
易函123
09-12 1336
问题 图片加文字的无缝滚动，在手机端的效果总体还行，但是图片在手机某些浏览器会抖得腻害！ 错误写法 不能用left，margin-left,像这种写法: .donghua.active{ animation: scoll ease-in-out 1s infinite alternate; -webkit-animation: scoll ease-in-out 1s infinite alternate; } @keyframes scoll { from { left: 0;
CSS动画出现抖动的问题
Little_naive的博客
05-12 2008
1. css动画出现抖动情况有很多, 我查阅了一些资料, 说其中主要的影响是硬件加速的开启, 硬件加速是利用GPU来加速页面渲染, 来提高页面性能. 但是开启硬件加速同时也会产生动画抖动.这种情况下我通过以下办法去做的。2. 动画出现了重复的布局计算和重绘, 像这种情况我采用了以下方法处理。把上面两个属性配合使用。
css3动画效果抖动解决
weixin_34006965的博客
08-29 4881
div{ height: 20%; } @keyframes shanghua{ from{ height: 0%; } to{ height: 60%; } } div:hover{ animation: shanghua 1s linea...
css3帧动画无缝衔接会闪一下,向大神求助，css3逐帧动画，下面的两种写法中，第一种为什么每帧之间会有闪动...
weixin_35617554的博客
08-04 262
写法一：总共32帧 用的是steps(32)Document.m-component-loading{width: 400px; height: 350px;margin: 20px auto;background:url(images/loadingimg.png) no-repeat 0 0;-webkit-animation: charector 1000ms 0s steps(32) in...
使用css动画做无缝滚动时内容抖动问题
weixin_51411364的博客
01-30 1107
使用css动画做无缝滚动时内容抖动问题
纯css实现无缝滚动
09-03
消息列表向上滚动，不使用js操作，纯css3实现向上无缝滚动。
用CSS3实现无限循环的无缝滚动的实例代码
09-24
主要介绍了用CSS3实现无限循环的无缝滚动的实例代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
css3无缝连续滚动网页特效
11-13
首先，CSS3中的关键帧动画（@keyframes）是实现无缝滚动的核心。通过定义动画的不同阶段，我们可以控制元素在时间轴上的运动轨迹，从而实现连续滚动的效果。例如： ```css @keyframes scrollEffect { 0% { ...
用CSS3实现无限循环的无缝滚动的示例代码
12-02
【CSS3实现无限循环无缝滚动】在网页设计中，为了创建动态效果，有时我们需要让一些内容如新闻、公告等在页面上实现无限循环滚动。本文将详细介绍如何利用CSS3的特性来实现这一功能，尤其关注`transform`和`...
css实现图片（箭头）无缝滚动（向右）
10-25
css样式控制实现图片无缝滚动，移动的速度是匀速，并且速度可控。
防抖节流
萌萌的博客
09-21 120
防抖节流1.防抖1.1防抖概念：1.2防抖案例：1.3搜索框节流案例：2.节流2.1节流的概念2.2节流案例2.3节流应用场景3.总结 1.防抖 1.1防抖概念： 当事件出发之后，预定单位时间（比如1s）之后执行里面的代码； 如果在单位时间内再触发了事件，那么要重新计时，以保证事件里面的代码只执行一次。 1.2防抖案例： <body> <button>注册</button> <script> let timer=null doc
基础知识 | css基础知识
A123ppleQueen的博客
06-09 1582
css概述 定义：Cascading style 层叠样式表，简称样式 作用：页面的布局，数据的加载
CSS3 用动画实现无缝滚动图效果
xiongmouren_jy的博客
05-12 1万+
使用CSS3 实现无缝滚动窗口效果
css3图片无缝滚动
qq_65167898的博客
05-17 1603
文章目录 前言 一、什么是无缝滚动？ 二、如何创建一个无缝滚动 前言 今天来大家了解一下无缝滚动的简单制作 一、无缝滚动是什么？ 在我看来，无缝滚动是将多张图片进行无间隙的连播 二、使用步骤 1.创建一个左右无缝滚动 代码如下（示例）： <style type="text/css"> * { margin:0; padding:0; } .wrap {width:500px; height:100px; border:4px solid #000; ...
CSS3无缝滚动效果案例
jolinoy的博客
01-08 1368
【代码】CSS3无缝滚动效果案例。
CSS实现图片无限循环无缝滚动
热门推荐
k464746的博客
10-26 1万+
实现代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {
css一张图无限循环滚动,纯css实现单张图片无限循环无缝滚动，
weixin_39673742的博客
08-03 1011
functionaddKeyFrames(height,offsetHeight){let style= document.createElement('style');style.type= 'text/css';let keyFrames= '\@-webkit-keyframes scrollUpAndPause {\0% {\-webkit-transform: translateY(0)...
【前端】实现图片无缝滚动·教程
qq_45677671的博客
02-04 614
文章目录效果图：需求分析：源代码：所用图片： 效果图： 需求分析： 实现无缝滚动 源代码： HTML部分 <div id="box"> <ul id="u"> <li><img src="a.jpg" alt="" /></li> <li><img src="b.jpg" alt="" /></li> <li><img src="c.jpg" alt="" />&l
css实现图片无缝滚动，并且可以手动滑动
最新发布
06-09
要实现图片无缝滚动并且可以手动滑动，可以使用CSS的动画和滚动条属性。以下是一个简单的实现示例： HTML代码： ```html <img src="image3.jpg" alt="Image 3"> ``` CSS代码： ```css .scroll-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值