20

次の画像をCSSで作成できるかどうか誰かが知っていますか？明るい線と暗い線は同じ幅である可能性があり、同じである必要があります。また、背景全体が暗い色（この場合は濃い青）になるように、エッジが暗い色にフェードインします。

どんな助けでも大歓迎です。私のグーグルスキルはこの種の効果に何の助けも提供しませんでした、「スターバーストステッカー/バッジのようなもの」だけが見つかりました。

ここに画像の説明を入力してください

4

5 に答える 5

26

いいえ。残念ながら、css3で生成された画像の仕様には、円錐/角度のグラデーションが含まれていません（ただし、次のリビジョンで公開される可能性があります）。これは、cssのみを使用してこれを行う最も可能性の高い方法です。ただし、これはcss+svgを使用して行うことができます。私は実際に、私が一度行った実験からこのsvgドキュメントを置いていました：

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
      "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="512px" height="512px" viewBox="-256 -256 512 512" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>Burst</title>
    <defs>
      <g id="burst">
        <g id="quad">
          <path id="ray" d="M0,0 -69,-500 69,-500 z" />
          <use xlink:href="#ray" transform="rotate(30)"/>
          <use xlink:href="#ray" transform="rotate(60)"/>
          <use xlink:href="#ray" transform="rotate(90)"/>
        </g>
        <use xlink:href="#quad" transform="rotate(120)"/>
        <use xlink:href="#quad" transform="rotate(240)"/>
      </g>
      <radialGradient id="grad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
        <stop offset="0%" stop-color="white" stop-opacity="0.65"/>
        <stop offset="100%" stop-color="black" stop-opacity="0.65"/>
      </radialGradient>
      <!-- a circle mask -->
      <mask id="m"><circle r="256" fill="white"/></mask>
    </defs>
    <!-- added a mask and scaled it to a different aspect ratio below. scale(x,y) -->
    <g mask="url(#m)" transform="scale(1, 0.75)"> 
      <use xlink:href="#burst" fill="lightslateblue"/>
      <use xlink:href="#burst" fill="darkslateblue" transform="rotate(15)"/>
      <circle r="360px" fill="url(#grad)" />
    </g>
    </svg>

それを背景画像として設定し、cssを設定しbackground-size: coverます。それでおしまい。これは、データURLでこの画像を使用するフィドルです。

于 2012-12-20T10:18:12.513 に答える
10

はい、可能です。

しかし、それはいくつかの作業が必要です。

私はこれとまったく同じ質問をしましたが、純粋なCSSでこの効果が行われている例は見つかりませんでした。それで、私はそれをいじくり回すことにしました。

たくさんの実験を重ねた結果、CSSだけでなく、（比較的）移植性の高いソリューションを思いついたのです。

線形グラデーションのトリックオン::beforeと::after疑似要素を使用して、上半分と下半分だけを別々に作成することから始めました。2番目のステップ（これははるかに時間のかかるステップでした）は、2つの半分を1つの要素にマージすることでした。

作業デモ： http ：//codepen.io/pestbarn/pen/aBybeK

（元のポスターは、放射状グラデーションのdivオーバーレイを使用して、上記のデモで個別に作成したビネット効果を望んでいました）

バニラCSSとSassミックスインの両方をgithub.com/pestbarn/starburst.cssで提供しました。いくつかの例は、公式デモページにあります。

これはクロスブラウザですか？

私の知る限りでは、そうです。現在のブラウザのサポートはリポジトリで確認できます。

アニメートできますか？

はい、他の要素をアニメーション化するのと同じように。ぜひお試しください。

注意点はありますか？

ああ、あります。別の色とは大幅に異なる2つの色（明るさなど）を使用すると、ギザギザのエッジが作成されます。したがって、互いに非常に似ている色を使用することをお勧めします。

また、エフェクトは疑似要素を使用して作成されるため、要素の高さと幅を明示的に設定する必要がある場合があります。

お気軽に実験してください！

于 2016-11-25T22:01:41.857 に答える
2

Lea VerouによるCSS4のドラフトには、実験的なプロパティがあります。

div
{
    repeating-conical-gradient(black, black 5%, #f06 5%, #f06 10%)
}

しかし、私が理解している限り、これは単なる提案であり、CSS3だけでは不可能です。背景画像に固執するか、回転した要素で三角形の画像を使用してみてください。

于 2012-12-20T10:00:08.537 に答える
2

CSS仕様に追加conic-gradient()することで、そのタイプのエフェクトを対象としたCSSを使用してエフェクトを作成できるようになりました。

基本的に、次のようにグラデーションストップを設定します。

background-image: conic-gradient( circle,
  black 0%,  black 5%,
  white 5%,  white 10%,
  black 10%, black 15%,
  ...
);

これが実用的なフィドルです

そして、これがアニメーションバージョンです:-)しかし、私のブラウザではアニメーションが少し途切れがちです。少し最適化できるかもしれません。

これはWebKitブラウザーでのみ機能することに注意してください。つまり、ChromeとSafariです。しかし正直なところ、これはユーザーの大部分をカバーしており、残りのユーザーはすぐにサポートを追加すると確信しています。

于 2018-12-24T09:02:56.497 に答える
0

現在、「marcus erronius」の答えを拡張するには、「円錐勾配（）」法よりも優れた解決策があります。repeating-conic-gradient繰り返しグラデーションで構成される画像を作成するがあります。

div {
  height: 500px;
  background: repeating-conic-gradient(
    hsl(0deg 0% 80% / 31%) 0deg 15deg,
    hsla(0,0%,100%,0) 0deg 30deg
  ) #3c1c32
}
<div></div>

詳細については、W3CSS画像値を参照してください。
このプロパティは、すべてのブラウザと互換性があるわけではありません。詳細については、 caniuseを確認してください。

于 2020-10-14T09:41:01.190 に答える