ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS3でテキストの波線効果を実現

CSS3でテキストの波線効果を実現

高洛峰
高洛峰オリジナル
2017-03-01 15:24:041987ブラウズ

まえがき

CSSのデザインも工夫されており、実装もよく考えると異常で素晴らしいです。この波線は、linear-gradient 属性を巧みに使用して、角度、色、位置を統合し、背景サイズと背景繰り返しを使用して、1 つを多数に変換し、滑らかに遷移します。うわー、最後のエフェクトがとても巧妙ですね!それを説明する言葉はありません...

実装方法

文法: Linear-gradient(direction, color-stop 1, color-stop 2,...)

CSS3でテキストの波線効果を実現
簡単な使用法:背景-画像: 線形グラデーション(赤、透明);

CSS3でテキストの波線効果を実現

角度を増やす、線形グラデーション(45度、赤、透明)

CSS3でテキストの波線効果を実現

位置を追加: 線形グラデーション(45度、赤、透明) 45%)

CSS3でテキストの波線効果を実現

colorlinear-gradient (45deg、赤、透明 45%、赤) を追加します
これを見て皆さんも何かひらめくのではないでしょうか。

CSS3でテキストの波線効果を実現
linear-gradient(45deg, 透明45%, 赤55%, 透明60%)

CSS3でテキストの波線効果を実現

linear-gradient(135deg, 透明45%, 赤55%, 透明60%)

これを入れます2つのラインが結合されます。

CSS3でテキストの波線効果を実現

を組み合わせる これを見て、波線効果を実現する方法を知っていますか? ^_^

CSS3でテキストの波線効果を実現
高さは元の1/2です

最終コード:

CSS3でテキストの波線効果を実現
テキスト波線効果

概要

それでは、これが記事です。コンテンツはここにあります。CSS3 の学習や使用に役立つことを願っています。質問がある場合は、メッセージを残してください。

テキストの波線効果を実現する CSS3 に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。