简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Mit welcher Methode kann der Lichtstreifen im roten Feld im Bild gezeichnet werden?
三叔
三叔 2017-06-15 09:23:32
0
2
775

Im Projekt wurde ich gebeten, einen Lichtstreifen zu zeichnen, wie im roten Feld im Bild gezeigt. Ich habe einige Methoden ausprobiert, konnte es aber nicht vollständig realisieren, insbesondere die Schwanzteile an beiden Enden dass die Konvertierung von IMG in CSS am schnellsten ist, aber die Konvertierung war so groß, dass sie abgelehnt wurde. Ich bin also sehr neugierig, ob es wirklich eine CSS- oder Canvas-Methode gibt, um dies zu erreichen

三叔
三叔

Antworte allen (2)
伊谢尔伦
伊谢尔伦2017-06-15 09:25:32 2 Etage

canvas，直接把图片画上去

Wie+0
Antwort hinzufügen
    大家讲道理
    大家讲道理2017-06-15 09:25:32 1 Etage

    你也可以使用css的渐变

     
    p { width: 600px; height: 150px; border: 1px solid #666; line-height: 150px; text-align: center; font-weight: 900; font-size: 30px; color: #fff; margin: 10px auto; } .toLeft { background-image:-webkit-linear-gradient( to left, rgba(255,0,0,0) 0%, rgba(255,0,0,0.8) 7%, rgba(255,0,0,1) 11%, rgba(255,0,0,1) 12%, rgba(255,252,0,1) 28%, rgba(1,180,7,1) 45%, rgba(0,234,255,1) 60%, rgba(0,3,144,1) 75%, rgba(255,0,198,1) 88%, rgba(255,0,198,0.8) 93%, rgba(255,0,198,0) 100%); background-image:linear-gradient( to left, rgba(255,0,0,0) 0%, rgba(255,0,0,0.8) 7%, rgba(255,0,0,1) 11%, rgba(255,0,0,1) 12%, rgba(255,252,0,1) 28%, rgba(1,180,7,1) 45%, rgba(0,234,255,1) 60%, rgba(0,3,144,1) 75%, rgba(255,0,198,1) 88%, rgba(255,0,198,0.8) 93%, rgba(255,0,198,0) 100%); } .toRight { background-image:-webkit-linear-gradient( to right, rgba(255,0,0,0) 0%, rgba(255,0,0,0.8) 7%, rgba(255,0,0,1) 11%, rgba(255,0,0,1) 12%, rgba(255,252,0,1) 28%, rgba(1,180,7,1) 45%, rgba(0,234,255,1) 60%, rgba(0,3,144,1) 75%, rgba(255,0,198,1) 88%, rgba(255,0,198,0.8) 93%, rgba(255,0,198,0) 100%); background-image: linear-gradient( to right, rgba(255,0,0,0) 0%, rgba(255,0,0,0.8) 7%, rgba(255,0,0,1) 11%, rgba(255,0,0,1) 12%, rgba(255,252,0,1) 28%, rgba(1,180,7,1) 45%, rgba(0,234,255,1) 60%, rgba(0,3,144,1) 75%, rgba(255,0,198,1) 88%, rgba(255,0,198,0.8) 93%, rgba(255,0,198,0) 100%); }

    建议你阅读：ww.w3cplus.com/css3/new-css3-linear-gradient.html

    Wie+0
    Antwort hinzufügen
      Beliebte Themen
      Mehr>
      Populäre Artikel
      Beliebte Tutorials
      Mehr>
      Verwandte Tutorials
      Beliebte Empfehlungen
      Aktuelle Kurse
      Neueste Downloads
      Mehr>
      Web-Effekte
      Quellcode der Website
      Website-Materialien
      Frontend-Vorlage
      Über uns Haftungsausschluss Sitemap
      Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！