数日前、同僚がポイントモールプロジェクトを受け取りました。このプロジェクトには、カードやクーポンをギフトと交換する機能が含まれていました。しばらく考えてみたのですが、いいアイデアが思いつかなかったので、自分のプロジェクトに戻りました。しかし、今後も同様のニーズに遭遇する可能性があると考え、週末にいくつかのカードとクーポンのエフェクトの実装を研究して整理しました。 一般的なカードのスタイルは次のとおりです。 疑似要素の使用(Lessバージョン) チケットレス .ordinary-mixins-ticket-horizontal(@width,@height,@r,@top, @color) { 位置: 相対的; ボックスのサイズ: 境界線ボックス; パディング: 0 @r; 幅: @width; 高さ: @height; 背景クリップ: コンテンツボックス; 背景色: @color; &::前に { 位置: 絶対; 上: 0; 左: 0; コンテンツ: ""; 表示: ブロック; 幅: @r + 1px; 高さ: 100%; 背景: 放射状グラデーション(@r 左端に円、@r 透明、@r カラー、@r + 1px); } &::後 { 位置: 絶対; 上: 0; 右: 0; コンテンツ: ""; 表示: ブロック; //ここでの @r + 1px は、特定のページ幅を拡大または縮小するときにギャップを回避するためのものです: @r + 1px; 高さ: 100%; //ここでの @r + 1px はエイリアシングを防ぐためのものです。背景: radial-gradient(@r circle at right @top, transparent @r, @color @r + 1px); } } 。親 { .ordinary-mixins-ticket-horizontal(200px, 200px, 10px, 150px, #fc3a28); } 。子供 { 行の高さ: 200px; } アプリ 'react' から React をインポートします。 './App.css' をインポートします。 './ticket.less' をインポートします。 関数App() { 戻る ( <div className="アプリ" style={ { 表示: "flex", justifyContent: "中央", alignItems: "center", 高さ: 600 } }> <div クラス名 = {'親'}> <div className="child">666</div> </div> </div> ); } デフォルトのアプリをエクスポートします。 アップグレードスタイル1(縮小版) .mixins-ticket-vertical(@width, @height, @r, @left, @l-color, @r-color) { 幅: @width; 高さ: @height; // @left - 1px は、特定のパーセンテージでズームしたときに隙間ができないようにするためです // @r + 1px は、ギザギザのエッジを防ぐためです // 51% は、要素の中央に小さな空白領域ができないようにするためです background: 放射状グラデーション (左上に円、透明 @r、@l-color @r + 1px) @left - 1px 上 ~'/' 100% 51% no-repeat, 放射状グラデーション(左下の円、透明@r、@l-color @r + 1px) @left - 1px 下 ~'/' 100% 51% 繰り返しなし、 放射状グラデーション(右上の円、透明@r、@r-color @r + 1px) -(@width - @left) 上部 ~'/' 100% 51% 繰り返しなし、 放射状グラデーション(右下の円、透明@r、@r-color @r + 1px) -(@width - @left) 下部 ~'/' 100% 51% 繰り返しなし; フィルター: ドロップシャドウ(2px 2px 2px rgba(0, 0, 0, .2)); } .mixins-ticket-vertical-two(@width, @height, @r, @left, @l-color, @r-color) { 幅: @width; 高さ: @height; // @left + 1px はズームイン時に隙間ができないようにするためです// @r + 1px はギザギザのエッジを防ぐためです// 51% は要素の中央に小さな空白領域ができないようにするためです background: 放射状グラデーション(左上に円、透明 @r、@r-color @r + 1px) 右上 ~'/' (@width - @left) 51% no-repeat, 放射状グラデーション(左下の円、透明@r、@l-color @r + 1px) 右下 ~'/' (@width - @left) 51% 繰り返しなし、 放射状グラデーション(右上の円、透明@r、@r-color @r + 1px) 左上 ~'/' @left + 1px 51% 繰り返しなし、 放射状グラデーション(右下の円、透明@r、@l-color @r + 1px) 左下 ~'/' @left + 1px 51% 繰り返しなし; フィルター: ドロップシャドウ(2px 2px 2px rgba(0, 0, 0, .2)); } 。親 { .mixins-ticket-vertical(200px, 200px, 10px, 150px, #fc3a28,#fc3a28); //.mixins-ticket-vertical-two(200px, 200px, 10px, 150px, #fc3a28,#fc3a28); } 。子供 { 行の高さ: 200px; } アップグレードされたスタイル 1 (Scss バージョン) @mixin mixins-ticket-vertical($width, $height, $r, $left, $l-color, $r-color) { 幅: $width; 高さ: $height; // $left - 1px は、特定のパーセンテージでズームしたときに隙間ができないようにするためです // $r + 1px は、ギザギザのエッジを防ぐためです // 51% は、要素の中央に小さな空白領域ができないようにするためです background: 放射状グラデーション (左上の円、透明 $r、$l-color $r + 1px) $left - 1px 上 / 100% 51% no-repeat、 放射状グラデーション(左下の円、透明 $r、$l-color $r + 1px) $left - 1px 下 / 100% 51% 繰り返しなし、 放射状グラデーション(右上の円、透明 $r、$r色 $r + 1px) -($width - $left) 上 / 100% 51% 繰り返しなし、 放射状グラデーション(右下の円、透明$r、$r色$r + 1px) -($width - $left) 下 / 100% 51% 繰り返しなし; フィルター: ドロップシャドウ(2px 2px 2px rgba(0, 0, 0, .2)); } 。親 { @include mixins-ticket-vertical(200px, 200px, 10px, 150px, #fc3a28, #fc3a28); } 。子供 { 行の高さ: 200px; } アップグレードスタイル2(縮小版) .mixins-ticket-horizontal(@width, @height, @r, @top, @l-color, @r-color) { 幅: @width; 高さ: @height; 背景: 放射状グラデーション(左上に円、透明@r、@l-color @r + 1px) 左 @top - 1px ~'/' 51% 100% 繰り返しなし、 放射状グラデーション(左下の円、透明@r、@l-color @r + 1px) 左 -(@height - @top) ~'/' 51% 100% 繰り返しなし、 放射状グラデーション(右上の円、透明@r、@r色@r + 1px) 右@top - 1px ~'/' 51% 100% 繰り返しなし、 放射状グラデーション(右下の円、透明@r、@r-color @r + 1px) 右 -(@height - @top) ~'/' 51% 100% 繰り返しなし; フィルター: ドロップシャドウ(2px 2px 2px rgba(0, 0, 0, .2)); } .mixins-ticket-horizontal-two(@width, @height, @r, @top, @l-color, @r-color) { 幅: @width; 高さ: @height; 背景: 放射状グラデーション(左上に円、透明@r、@r色@r + 1px) 左下 ~'/' 51% (@height - @top) 繰り返しなし、 放射状グラデーション(左下の円、透明@r、@l-color @r + 1px) 左上 ~'/' 51% @top + 1px 繰り返しなし、 放射状グラデーション(右上に円、透明@r、@r色@r + 1px) 右下 ~'/' 51% (@height - @top) 繰り返しなし、 放射状グラデーション(右下の円、透明@r、@l-color @r + 1px) 右上 ~'/' 51% @top + 1px no-repeat; フィルター: ドロップシャドウ(2px 2px 2px rgba(0, 0, 0, .2)); } 。親 { .mixins-ticket-horizontal(200px, 200px, 10px, 150px, #fc3a28,#fc3a28); //.mixins-ticket-horizontal-two(200px, 200px, 10px, 150px, #fc3a28,#fc3a28); } 。子供 { 行の高さ: 200px; } アップグレードスタイル3(縮小版) .mixins-ticket-horizontal-line(@width, @height, @r, @top, @l-color, @r-color,@border-offset,@border-color) { 幅: @width; 高さ: @height; 背景: 放射状グラデーション(左上に円、透明@r、@l-color @r + 1px) 左 @top - 1px ~'/' 51% 100% 繰り返しなし、 放射状グラデーション(左下の円、透明@r、@l-color @r + 1px) 左 -(@height - @top) ~'/' 51% 100% 繰り返しなし、 放射状グラデーション(右上の円、透明@r、@r色@r + 1px) 右@top - 1px ~'/' 51% 100% 繰り返しなし、 放射状グラデーション(右下の円、透明@r、@r-color @r + 1px) 右 -(@height - @top) ~'/' 51% 100% 繰り返しなし; フィルター: ドロップシャドウ(2px 2px 2px rgba(0, 0, 0, .2)); &::後 { 位置: 絶対; 左: 0; 右: 0; トップ: @top; マージン: 自動; コンテンツ: ''; 幅: calc(~"100%" - 2*@r - @border-offset); border-top: 1px 破線 @border-color; } } 。親 { .mixins-ticket-horizontal(200px, 200px, 10px, 150px, #fc3a28,#fc3a28); //.mixins-ticket-horizontal-two(200px, 200px, 10px, 150px, #fc3a28,#fc3a28); } 。子供 { 行の高さ: 200px; } アップグレードスタイル4(縮小版) .mixins-ticket-vertical-three(@width, @height, @r, @left, @l-color, @r-color,@sm-r,@sm-offset,@sm-color) { 幅: @width; 高さ: @height; // @left - 1px は、特定のパーセンテージでズームしたときに隙間ができないようにするためです // @r + 1px は、ギザギザのエッジを防ぐためです // 51% は、要素の中央に小さな空白領域ができないようにするためです background: 放射状グラデーション (左上に円、透明 @r、@l-color @r + 1px) @left - 1px 上 ~'/' 100% 51% no-repeat, 放射状グラデーション(左下の円、透明@r、@l-color @r + 1px) @left - 1px 下 ~'/' 100% 51% 繰り返しなし、 放射状グラデーション(右上の円、透明@r、@r-color @r + 1px) -(@width - @left) 上部 ~'/' 100% 51% 繰り返しなし、 放射状グラデーション(右下の円、透明@r、@r-color @r + 1px) -(@width - @left) bottom ~'/' 100% 51% no-repeat; フィルター: ドロップシャドウ(2px 2px 2px rgba(0, 0, 0, .2)); &::後 { コンテンツ: ''; 位置: 絶対; 上: 0; 右: -@sm-r; 幅: @sm-r; 高さ: 100%; 背景画像: 放射状グラデーション(円は @sm-r、透明は @sm-r、@r の色は @sm-r + 1px); //背景サイズ: @sm-r; 背景サイズ: @sm-r @sm-offset; } } 。親 { .mixins-ticket-vertical-three(200px, 200px, 10px, 150px, #fc3a28, #fc3a28,5px,20px,#fc3a28); } 。子供 { 行の高さ: 200px; } 予防 // チケットなし //背景: 放射状グラデーション(右上の円、透明 @r、@lcolor 0) -(@width - @left) top ~'/' 100% 55% no-repeat; // 上記のコード行を次のように分解します。 //背景画像: 放射状グラデーション(右上の円、透明@r、@lcolor 0); //背景の位置:-(@width - @left) top; //背景サイズ:100% 55% ; //背景繰り返し: 繰り返しなし; /*注: 最初に 50 ピクセルの透明領域があり、次に 2 番目の領域が 0 に設定されています。これは、ここからスタイル範囲をリセットするものとして理解できます。*/ /*背景: 放射状グラデーション(右上の円、透明 50px、赤 0、#66a8ff 50%);*/ /*Chrome では、2 つの領域間の色が 0 偏差で直接遷移すると、深刻なエイリアシングが発生します */ /*背景: 放射状グラデーション(左10px、透明度50%、#F6327C 50%);*/ /*背景: 放射状グラデーション(左10px、透明度50%、#F6327C 55%);*/ /*影の効果を追加*/ /*フィルター: ドロップシャドウ(2px 2px 2px rgba(0,0,0,.2));*/ /*複数の放射状グラデーションを累積*/ /*背景: 放射状グラデーション(50px 100px 楕円、透明 40px、黄色 41px、赤 49px、透明 50px)、 放射状グラデーション(30px 円、赤、赤 29px、透明 30px);*/ 要約する CSS で放射状グラデーションを使用してカードやクーポンの効果を実現する方法については、これで終わりです。CSS 放射状グラデーションを使用してカードやクーポンの効果を実現する方法については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: モバイルインターネット時代: レスポンシブウェブデザインが一般的なトレンドに
>>: mysql IS NULL インデックスケースの説明を使用する
Django アプリケーションを構築して拡張していくと、必然的に特定のタスクをバックグラウンドで自動...
システム環境: Windows 7 1. DockerをインストールするDocker公式サイトからd...
いつものように、まずは画像効果を投稿しましょう: このエフェクトの原理は非常にシンプルです。CSS3...
より良いスクロールの原則親コンテナーであるため、ラッパーの高さはコンテンツのサイズに応じて増加します...
目次序文質問原理テスト序文プログラムを作成するときに、読み込みの進行状況やアップロードの進行状況など...
HTMLコード: <a onclick="goMessage();" st...
VueはPCカメラを呼び出してリアルタイムで写真を撮影します。参考までに、具体的な内容は次のとおりで...
この記事では、指定された赤い封筒の順序と金額を実装するためのjsの具体的なコードを共有します。具体的...
この記事では、ネイティブ JS で実装されたドラッグ可能なログイン ボックスを紹介します。その効果は...
1. <body background=画像ファイル名 bgcolor=color text=...
数日前に仕事を始めて、Mysql をインストールしたところ、開くことができました。今日、会社に行った...
テーブルデータを作成する テーブル `praise_info` を作成します ( `id` bigi...
目次1. 外部キー制約外部キーとは何ですか?外部キーを使用する条件:外部キーの定義構文は次のとおりで...
フロントエンド開発では、スクロールバーを非表示にしながらスクロールをサポートしなければならないという...
この記事の例では、リストのシームレスなスクロールを実現するためのvueの具体的なコードを参考までに共...