Чистый CSS для достижения эффекта саржи

CSS

причина

Когда я открыл WeGame, чтобы поиграть в LOL, я обнаружил, что он будет обновляться, и я случайно мельком увидел этот эффект (PS: я стар, я не знаю ни одну из этих команд)

效果图

Не знаю, что вы подумали на первый взгляд, но я подумал о следующем

Дальнейшее чтение:Почему у входа во многие парикмахерские стоят вращающиеся цилиндрические световые короба?

И....тогда я просто хотел добиться этого эффекта, и...и даже сейчас не могу поиграть в игру

Окончательный эффект заключается в следующем, реализованный чистым натуральным CSS, готовым к употреблению прямо из пакета, без добавления консервантов, дети по соседству плачут

проходить через

Без лишних слов открывайте vscode и начинайте мастурбировать, в первую очередьHTMLструктура

    <div class="cont">
        <div class="twill"></div>
        <div class="btn">查看详情</div>
    </div>

Это очень просто, много говорить нечего, сосредоточьтесь на реализации саржи 👇👇👇


  
  .twill {
    width: 20px;
    height: 2000px;
    background: skyblue;
    position: absolute;
    left: 0px;
    top: -500px;
    transform: rotateZ(30deg);
    transform-origin: top left;
    box-shadow: 40px 0px 1px 1px rgba(255, 255, 255,0.6),
      80px 0px 1px 1px rgba(255, 255, 255,0.6),
      120px 0px 1px 1px rgba(255, 255, 255,0.6),
      160px 0px 1px 1px rgba(255, 255, 255,0.6),
      200px 0px 1px 1px rgba(255, 255, 255,0.6),
      240px 0px 1px 1px rgba(255, 255, 255,0.6),
      280px 0px 1px 1px rgba(255, 255, 255,0.6),
      320px 0px 1px 1px rgba(255, 255, 255,0.6),
      360px 0px 1px 1px rgba(255, 255, 255,0.6),
      400px 0px 1px 1px rgba(255, 255, 255,0.6),
      440px 0px 1px 1px rgba(255, 255, 255,0.6),
      480px 0px 1px 1px rgba(255, 255, 255,0.6),
      520px 0px 1px 1px rgba(255, 255, 255,0.6),
      560px 0px 1px 1px rgba(255, 255, 255,0.6),
      600px 0px 1px 1px rgba(255, 255, 255,0.6),
      640px 0px 1px 1px rgba(255, 255, 255,0.6);

  }
  

пройти черезbox-shadowДобавьте несколько теней,transformРеализовать саржу

В конце концов, конечно, пусть он движется сам по себе, а решать вам! Публично заявить!анимация! ! !

Код ниже 👇👇👇

  @keyframes move {
    0% {
      left: 0px;
    }
  
    100% {
      left: 45px;
    }
  }
  .twill{
      animation: move 1s linear infinite ;
  }
  

codePen полный просмотр кода

результат

вы спрашиваете меня результат? Результат

  • я еще не играл в лол

  • Эта статья с содержанием воды 99,99%

  • Ты будешь говорить мне комплименты, да?

  • Я не мог найти правильный инструмент при выборе цветов.затем хочу использоватьelectronнаписать палитру цветов

  • При записи эффектовХотите написать инструмент для записи gif, и, наконец, найти удобный инструментНажмите на меня, чтобы скачать ScreenToGif

Задайте вопрос большим парням, как использовать функцию less или scss для генерации этого длинногоbox-shadow ?, я пробовал с циклом scss,Не удалось, я действительно новичок

Нечего писать, а потом дать вам благодаря старости, я желаю всем счастливого старости!, Бежал ~ ~ ~ ~

Я Midnight, новичок в интерфейсе, это только вода или вода, общедоступный номер:Нет, QQ группа:Нет, (Рекламное место в первом ряду)