純css實現水平無限滾動--適應PC和移動端

阿新 • • 發佈：2018-11-13

一、HTML

<style type="text/css">
            * {
                margin: 0;
                padding: 0;
                list-style: none;
            }
            /*水平無限滾動css*/
            #container {
                width: 100%;
                height: 35px;
                margin: 10px auto;
                overflow 
: hidden;
                position: relative;
                border: 1px solid red;
                box-sizing: border-box;
            }

            #container ul {
                width: 100%;
                right: -100%;
                top: 0;
                position: absolute;
                -webkit-animation 
: scollLeft 10s linear 0s infinite;
            }

            #container ul li {
                float: left;
                line-height: 35px;
                width: 10%;
                text-align: center;
                box-sizing: border-box;
            }

            @-webkit-keyframes scollLeft  
{
                from {
                    right: -100%;
                }
                to {
                    right: 100%;
                }
            }

            @keyframes scollLeft {
                from {
                    right: -100%;
                }
                to {
                    right: 100%;
                }
            }

            @-moz-keyframes scollLeft {
                from {
                    right: -100%;
                }
                to {
                    right: 100%;
                }
            }

            @-o-keyframes scollLeft {
                from {
                    right: -100%;
                }
                to {
                    right: 100%;
                }
            }
            /*上下無限抖動css*/
            .jump span {
                float: left;
                position: relative;
            }

            .jump span:nth-child(1) {
                -webkit-animation: jump 1s linear 0s infinite alternate;
            }

            .jump span:nth-child(2) {
                -webkit-animation: jump 1s linear 0.2s infinite alternate;
            }

            .jump span:nth-child(3) {
                -webkit-animation: jump 1s linear 0.4s infinite alternate;
            }

            .jump span:nth-child(4) {
                -webkit-animation: jump 1s linear 0.6s infinite alternate;
            }

            .jump 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;
                }
            }

            @keyframes jump {
                0% {
                    top: 0px;
                    color: red;
                }
                50% {
                    top: -10px;
                    color: green;
                }
                100% {
                    top: 10px;
                    color: blue;
                }
            }

            @-moz-keyframes jump {
                0% {
                    top: 0px;
                    color: red;
                }
                50% {
                    top: -10px;
                    color: green;
                }
                100% {
                    top: 10px;
                    color: blue;
                }
            }
        </style>
    </head>

    <body>
        <div id="container">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>10</li>
            </ul>
        </div>

        <h2 class="jump">  
            <span>我</span>  
            <span>愛</span>  
            <span>你</span>  
            <span>中</span>  
            <span>國</span>  
        </h2>
    </body>

二、效果圖

這裡寫圖片描述

純css實現水平無限滾動--適應PC和移動端

一、HTML <style type="text/css"> * { margin: 0; padding: 0; list-style: none;

react滾動條開發適配PC 和移動端的滾動顯示隱藏header和footer/滾動顯隱公用元件

功能描述：移動端時，上滾則顯示footer,下滾則隱藏footer PC端時，上滾則顯示header,下滾則隱藏header。 xx.js import React, { Component } from 'react'; import { BrowserR

淺談PC和移動端的自適應

做網頁時，我們通常需要考慮到不同電腦螢幕尺寸，以及不同手機螢幕大小等問題，解決樣式發生改變的情況，那麼如何解決呢？現在主要是採用自適應來解決高度，寬度的，以及圖片自適應問題，下面就PC端和移動端來總結一下，通常進行自適應高度和寬度，圖片時，一般與頁面的佈局存在關係。

前端分辨pc和移動端匯入不同css

通過navigator獲取瀏覽器，根據瀏覽器的不同判斷出pc和移動端然後設定不同的css 分辨不同螢幕匯入不同的css檔案： function loadCSS() { if((navigator.userAgent.match(/(phone|

PC和移動端的CSS重置樣式表

自己一直在用並不斷完善的重置樣式表，直接放到專案裡面可讓瀏覽器樣式基本統一，現分兩個版本，針對不同平臺作出優化。 PC端 html{font-family:"Microsoft YaHei UI","Microsoft YaHei",sans-serif;-ms-tex

bootstrap響應式相容PC和移動端圖片無縫滾動效果demo

效果如圖所示： js程式碼部分： /** * Created by Administrator on 2017/9/15. */ (function(){ var firstD

控制容器文字行數（pc和移動端）

phone 行數 spa pre size 以及 :hover 框架 mx4 寫在前面的話：　　對於文字的單行以及多行顯示，應該是經常用到的一個功能了，看下文吧~ pc 端：　　1. 單行限制（兼容所有瀏覽器）這裏加了一個鼠標移入時顯示全部的效果：

dedecms中PC和移動端後臺後，圖片路徑處理

dedecms中PC和移動端共用一個後臺時，因為上傳圖片預設是PC端根目錄下的相對路徑，這樣對於移動端來說圖片路徑就不對了，所以需要把上傳的縮圖和文章中的圖片路徑進行處理：一：新增函式，在輸出時進行替換：開啟include目錄下的檔案extend.func.php，新增

PC和移動端瀏覽器同步測試工具Browsersync使用介紹

在移動端網頁開發中，總是因為不方便除錯，導致各種問題不容易被發現。但是現在有了Browsersync，一切都解決了。不熟悉的同學可以看看Browsersync的官方網站Browsersync中文網。五分鐘快速入門 1.使用Browsersync前需要安裝node.js。詳細的安裝過程可參見windows

pc和移動端預設樣式重置

首先說一下，為何要用重置樣式除了省心之外，還有兩個好處1.方便設計師/程式設計師發揮白紙的感覺確實好。各種margin，padding，border的為0。。。2.便於發現前端程式碼的遺漏用了reset後，如果“blockquote、ol、ul、hn等語義元素在沒有賦以其他合

textarea的placeholder屬性內容折行顯示(PC和移動端端)

1、PC端折行方法 placeholder="字型
字型" 
 可以使其折行顯示 2、移動端折行方法 webkit核心 textarea::-webkit-input-placeholder:after{ display:block; co

js面向物件思想封裝拖拽功能，相容pc和移動端

我們在開發專案過程中，很可能會碰到頁面上某塊需要可以拖拽移動的功能需求，網上已經有不少前輩分享了相關功能的案例，外掛或者程式碼，但是考慮到專案功能需求，我們可能僅需要實現拖拽移動功能就可以，不需要其他功能，而網上很多外掛往往附帶了其他功能需求。這裡筆者僅對拖拽移

js手寫滑動驗證（相容pc和移動端）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev

PC和移動端判斷滑鼠（手指）滑動方向（touch方向）

//移動端 $(".demo").on("touchstart", function(e) { 　　　　e.preventDefault(); 　　　　startX = e.originalEvent.

純 css 實現 PC 端無滾動條滾動樣式分享

由於接觸過各種後臺管理平臺開發，我們的開發介面一般左側導航欄，右側內容區域。在左側呢一旦超出高度在不同的瀏覽器就會顯示滾動條。嚴重影響頁面美觀。在這裡呢主要是講的css實現 PC 端無滾動條滾動樣式。下面直接上程式碼：html：<div class="box-wrapp

純CSS實現圖片水平垂直居中於DIV（圖片未知寬高）

分享分享圖片 gin pos pic ble 居中實現圖 class .demo{border:1px #ddd solid;width:267px;height:267px;overflow:hidden;text-align:center;display:tabl

純css實現頂部進度條隨滾動條滾動

<!DOCTYPE html> <head> 　　<meta charset="utf-8"> 　　<meta http-equiv="X-UA-Compatible" content="IE=edge"> 　　<tit

純css實現垂直水平居中

6種方案 1、絕對定位+margin：auto <style type="text/css"> .wrp { background-color: #b9b9b9; width: 240px; heig

純css實現自適應正方形

在處理移動端頁面時，我們有時會需要將banner圖做成與螢幕等寬的正方形以獲得最佳的體驗效果，如Flipbord的移動頁面：方案一：CSS3 中新增了一組相對於可視區域百分比的長度單位 vw, vh, vmin, vmax。其中 vw 是相對於視口寬度百

純CSS實現隱藏滾動條但仍具有滾動的效果

移動端移動端頁面只要相容 Chrome 和 Safari 就夠了，所以可以使用自定義滾動條的偽類選擇器 ::-webkit-scrollbar 來隱藏滾動條。 .container::-webkit-scrollbar { display: none; }PC

純css實現水平無限滾動--適應PC和移動端

一、HTML

二、效果圖

相關推薦