當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

css 实现虚线滚动

發(fā)布時間：2023/12/13 综合教程 27 生活家

生活随笔收集整理的這篇文章主要介紹了 css 实现虚线滚动小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

<!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>
    .box {
      width: 100px;
      height: 100px;
      float: left;
      margin-left: 20px;
    }
    .box1 {
      position: relative;
      background: url(https://www.zhangxinxu.com/study/image/selection.gif);
    }
    .box1>p {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      height: calc(100% - 2px);
      width: calc(100% - 2px);
      background-color: #fff;
    }

    .box2 {
      background: repeating-linear-gradient(
        135deg,
        transparent,
        transparent 4px,
        #000 4px,
        #000 8px
      );
      overflow: hidden;
      animation: move 1s infinite linear;
    }
    .box2>p {
      height: calc(100% - 2px);
      margin: 1px;
      background-color: #fff;
    }

    @keyframes move {
      from {
        background-position: -1px;
      }
      to {
        background-position: -12px;
      }
    }

    .box3 {
      background: linear-gradient(0deg, transparent 6px, #e60a0a 6px) repeat-y,
        linear-gradient(0deg, transparent 50%, #0f0ae8 0) repeat-y,
        linear-gradient(90deg, transparent 50%, #09f32f 0) repeat-x,
        linear-gradient(90deg, transparent 50%, #fad648 0) repeat-x;
      background-size: 1px 12px, 1px 12px, 12px 1px, 12px 1px;
      background-position: 0 0, 100% 0, 0 0, 0 100%;
      animation: move2 1s infinite linear;
    }
    .box3>p {
      margin: 1px;
    }

    @keyframes move2 {
      from {
      }
      to {
        background-position: 0 -12px, 100% 12px, 12px 0, -12px 100%;
      }
    }

    .box4 {
      background: linear-gradient(0deg, #f0e, #fe0);
      -webkit-mask: linear-gradient(0deg, transparent 6px, #e60a0a 6px) repeat-y,
        linear-gradient(0deg, transparent 50%, #0f0ae8 0) repeat-y,
        linear-gradient(90deg, transparent 50%, #09f32f 0) repeat-x,
        linear-gradient(90deg, transparent 50%, #fad648 0) repeat-x,
        linear-gradient(0deg, #fff, #fff) no-repeat;
      -webkit-mask-size: 1px 12px, 1px 12px, 12px 1px, 12px 1px, 98px 98px;
      -webkit-mask-position: 0 0, 100% 0, 0 0, 0 100%, 1px 1px;
      overflow: hidden;
      animation: move3 1s infinite linear;
    }
    .box4>p {
      height: calc(100% - 2px);
      margin: 1px;
      background-color: #fff;
    }

    @keyframes move3 {
      from {
      }
      to {
        -webkit-mask-position: 0 -12px, 100% 12px, 12px 0, -12px 100%, 1px 1px;
      }
    }
  </style>
</head>
<body>
  <div class="box box1">
    <p>測試測試</p>
  </div>
  <div class="box box2">
    <p>測試測試</p>
  </div>
  <div class="box box3">
    <p>測試測試</p>
  </div>
  <div class="box box4">
    <p>測試測試</p>
  </div>
</body>
</html>

示例如下：

.box { 100px; height: 100px; float: left; margin-left: 20px }
.box1 { position: relative; background: url("https://www.zhangxinxu.com/study/image/selection.gif") }
.box1>p { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; height: calc(100% - 2px); calc(100% - 2px); background-color: rgba(255, 255, 255, 1) }
.box2 { background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 4px, rgba(0, 0, 0, 1) 4px, rgba(0, 0, 0, 1) 8px); overflow: hidden; animation: 1s linear infinite move }
.box2>p { height: calc(100% - 2px); margin: 1px; background-color: rgba(255, 255, 255, 1) }
@keyframes move { 0% { background-position: -1px } 100% { background-position: -12px } }
.box3 { background: linear-gradient(0deg, rgba(0, 0, 0, 0) 6px, rgba(230, 10, 10, 1) 6px) left top / 1px 12px repeat-y, linear-gradient(0deg, rgba(0, 0, 0, 0) 50%, rgba(15, 10, 232, 1) 0) right top / 1px 12px repeat-y, linear-gradient(90deg, rgba(0, 0, 0, 0) 50%, rgba(9, 243, 47, 1) 0) left top / 12px 1px repeat-x, linear-gradient(90deg, rgba(0, 0, 0, 0) 50%, rgba(250, 214, 72, 1) 0) left bottom / 12px 1px repeat-x; animation: 1s linear infinite move2 }
.box3>p { margin: 1px }
@keyframes move2 { 0% { } 100% { background-position: 0 -12px, 100% 12px, 12px 0, -12px 100% } }
.box4 { background: linear-gradient(0deg, rgba(255, 0, 238, 1), rgba(255, 238, 0, 1)); -webkit-mask: linear-gradient(0deg, transparent 6px, #e60a0a 6px) repeat-y,
linear-gradient(0deg, transparent 50%, #0f0ae8 0) repeat-y,
linear-gradient(90deg, transparent 50%, #09f32f 0) repeat-x,
linear-gradient(90deg, transparent 50%, #fad648 0) repeat-x,
linear-gradient(0deg, #fff, #fff) no-repeat; -webkit-mask-size: 1px 12px, 1px 12px, 12px 1px, 12px 1px, 98px 98px; -webkit-mask-position: 0 0, 100% 0, 0 0, 0 100%, 1px 1px; overflow: hidden; animation: 1s linear infinite move3 }
.box4>p { height: calc(100% - 2px); margin: 1px; background-color: rgba(255, 255, 255, 1) }
@keyframes move3 { 0% { } 100% { -webkit-mask-position: 0 -12px, 100% 12px, 12px 0, -12px 100%, 1px 1px } }

測試測試

總結

以上是生活随笔為你收集整理的css 实现虚线滚动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

css
虚线

上一篇：学习笔记1-Linux1
下一篇： mysql_real_escape_st

3atv精品不卡视频,97人人超碰国产精品最新,中文字幕av一区二区三区人妻少妇,久久久精品波多野结衣,日韩一区二区三区精品

综合教程

css 实现虚线滚动

總結