同事幫我用css做出炫酷的卡券效果荞驴,深感崇拜啊

前言

前幾天不皆,我接到了一個項目范咨,模塊中要寫一個卡券效果飘言,當(dāng)時沒有圖片,也就是要用css來實現(xiàn)拣宏,當(dāng)時我是懵逼的,也沒有寫過這樣的犬耻,一時間不知道怎么寫踩晶,畢竟要寫的像UI設(shè)計的一樣美觀。我就只好求救我的大神級別的同事了枕磁。不僅css玩的溜渡蜻,人家JavaScript玩的更溜,閣下實在是佩服计济。

常見的卡券樣式如下:

image.png

同事二話沒說茸苇,直接給我寫了一種,那真的是快如閃電就給我實現(xiàn)了一個沦寂。是用偽元素實現(xiàn)的

使用偽元素實現(xiàn)(Less 版本)

image.png

ticket.less

.ordinary-mixins-ticket-horizontal(@width,@height,@r,@top, @color) {
  position: relative;
  box-sizing: border-box;
  padding: 0 @r;
  width: @width;
  height: @height;
  background-clip: content-box;
  background-color: @color;

  &::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    display: block;
    width: @r + 1px;
    height: 100%;
    background: radial-gradient(@r circle at left @top, transparent @r, @color @r + 1px);
  }

  &::after {
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    display: block;
    //這里的 @r + 1px 是為了避免某些百分百比縮放頁面時学密,出現(xiàn)空隙
    width: @r + 1px;
    height: 100%;
    //這里的 @r + 1px 是為了防止出現(xiàn)鋸齒
    background: radial-gradient(@r circle at right @top, transparent @r, @color @r + 1px);
  }
}

.parent {
  .ordinary-mixins-ticket-horizontal(200px, 200px, 10px, 150px, #fc3a28);
}
.child {
  line-height: 200px;
}

App.js

import React from 'react';
import './App.css';
import './ticket.less';

function App() {
    return (
        <div className="App" style={
            {
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                height: 600
            }
        }>
            <div className={'parent'}>
                <div className="child">666</div>
            </div>
        </div>
    );
}

export default App;

后面我回去之后,仔細去研究了一下传藏,想把它做得更好看腻暮,然后就有了升級版樣式一

升級版樣式一(Less 版本)

image.png
.mixins-ticket-vertical(@width, @height, @r, @left, @l-color, @r-color) {
  width: @width;
  height: @height;
  // @left - 1px 是為了避免某些百分百比縮放頁面時,出現(xiàn)空隙
  // @r + 1px 是為了防止出現(xiàn)鋸齒
  // 51% 是為了防止出現(xiàn)元素中間會有一小段空白區(qū)域的情況
  background: radial-gradient(circle at left top, transparent @r, @l-color  @r + 1px) @left - 1px top ~'/' 100% 51% no-repeat,
  radial-gradient(circle at left bottom, transparent @r, @l-color  @r + 1px) @left - 1px bottom ~'/' 100% 51% no-repeat,
    radial-gradient(circle at  right top, transparent @r, @r-color  @r + 1px ) -(@width - @left) top ~'/' 100% 51% no-repeat,
    radial-gradient(circle at right bottom , transparent @r, @r-color  @r + 1px )  -(@width - @left) bottom ~'/' 100% 51% no-repeat;

  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));
}

.mixins-ticket-vertical-two(@width, @height, @r, @left, @l-color, @r-color) {
  width: @width;
  height: @height;
  // @left + 1px 是為了避免某些百分百比縮放頁面時毯侦,出現(xiàn)空隙
  // @r + 1px 是為了防止出現(xiàn)鋸齒
  // 51% 是為了防止出現(xiàn)元素中間會有一小段空白區(qū)域的情況
  background: radial-gradient(circle at left top, transparent @r, @r-color @r + 1px) right top ~'/' (@width - @left) 51% no-repeat,
  radial-gradient(circle at left bottom, transparent @r, @l-color @r + 1px) right bottom ~'/' (@width - @left)   51% no-repeat,
  radial-gradient(circle at right top, transparent @r, @r-color @r + 1px) left top ~'/' @left + 1px 51% no-repeat,
  radial-gradient(circle at right bottom, transparent @r, @l-color @r + 1px) left bottom ~'/' @left + 1px   51% no-repeat;

  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));
}

.parent {
  .mixins-ticket-vertical(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);
  //.mixins-ticket-vertical-two(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);
}
.child {
  line-height: 200px;
}

升級版樣式一(Scss 版本)

@mixin mixins-ticket-vertical($width, $height, $r, $left, $l-color, $r-color) {
  width: $width;
  height: $height;
  // $left - 1px 是為了避免某些百分百比縮放頁面時哭靖,出現(xiàn)空隙
  // $r + 1px 是為了防止出現(xiàn)鋸齒
  // 51% 是為了防止出現(xiàn)元素中間會有一小段空白區(qū)域的情況
  background: radial-gradient(circle at left top, transparent $r, $l-color  $r + 1px) $left - 1px top / 100% 51% no-repeat,
  radial-gradient(circle at left bottom, transparent $r, $l-color  $r + 1px) $left - 1px bottom / 100% 51% no-repeat,
  radial-gradient(circle at  right top, transparent $r, $r-color  $r + 1px ) -($width - $left) top / 100% 51% no-repeat,
  radial-gradient(circle at right bottom , transparent $r, $r-color  $r + 1px )  -($width - $left) bottom / 100% 51% no-repeat;

  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));
}

.parent {
  @include mixins-ticket-vertical(200px, 200px, 10px, 150px, #fc3a28, #fc3a28);
}

.child {
  line-height: 200px;
}

后面也接連改了幾次,大家看一看效果怎么樣

升級版樣式二(Less 版本)

image.png
.mixins-ticket-horizontal(@width, @height, @r, @top, @l-color, @r-color) {
  width: @width;
  height: @height;
  background: radial-gradient(circle at left top, transparent @r, @l-color @r + 1px) left  @top - 1px ~'/' 51% 100% no-repeat,
  radial-gradient(circle at left bottom, transparent @r, @l-color @r + 1px) left -(@height - @top) ~'/' 51% 100% no-repeat,
  radial-gradient(circle at right top, transparent @r, @r-color @r + 1px) right  @top - 1px ~'/' 51% 100% no-repeat,
  radial-gradient(circle at right bottom, transparent @r, @r-color @r + 1px) right -(@height - @top) ~'/' 51% 100% no-repeat;

  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));
}

.mixins-ticket-horizontal-two(@width, @height, @r, @top, @l-color, @r-color) {
  width: @width;
  height: @height;
  background: radial-gradient(circle at left top, transparent @r, @r-color @r + 1px) left bottom ~'/' 51%  (@height - @top) no-repeat,
  radial-gradient(circle at left bottom, transparent @r, @l-color @r + 1px) left top ~'/' 51%  @top + 1px  no-repeat,
  radial-gradient(circle at right top, transparent @r, @r-color @r + 1px) right bottom ~'/' 51%  (@height - @top) no-repeat,
  radial-gradient(circle at right bottom, transparent @r, @l-color @r + 1px) right top ~'/' 51% @top + 1px no-repeat;

  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));
}

.parent {
  .mixins-ticket-horizontal(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);
  //.mixins-ticket-horizontal-two(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);
}
.child {
  line-height: 200px;
}

升級版樣式三(Less 版本)

image.png
.mixins-ticket-horizontal-line(@width, @height, @r, @top, @l-color, @r-color,@border-offset,@border-color) {
  width: @width;
  height: @height;
  background: radial-gradient(circle at left top, transparent @r, @l-color @r + 1px) left @top - 1px ~'/' 51% 100% no-repeat,
  radial-gradient(circle at left bottom, transparent @r, @l-color @r + 1px) left -(@height - @top) ~'/' 51% 100% no-repeat,
  radial-gradient(circle at right top, transparent @r, @r-color @r + 1px) right @top - 1px ~'/' 51% 100% no-repeat,
  radial-gradient(circle at right bottom, transparent @r, @r-color @r + 1px) right -(@height - @top) ~'/' 51% 100% no-repeat;
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));

  &::after {
    position: absolute;
    left: 0;
    right: 0;
    top: @top;
    margin: auto;
    content: '';
    width: calc(~"100%" - 2*@r - @border-offset);
    border-top: 1px dashed @border-color;
  }
}

.parent {
  .mixins-ticket-horizontal(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);
  //.mixins-ticket-horizontal-two(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);
}
.child {
  line-height: 200px;
}

升級版樣式四(Less 版本)

image.png
.mixins-ticket-vertical-three(@width, @height, @r, @left, @l-color, @r-color,@sm-r,@sm-offset,@sm-color) {
  width: @width;
  height: @height;
  // @left - 1px 是為了避免某些百分百比縮放頁面時叫惊,出現(xiàn)空隙
  // @r + 1px 是為了防止出現(xiàn)鋸齒
  // 51% 是為了防止出現(xiàn)元素中間會有一小段空白區(qū)域的情況
  background: radial-gradient(circle at left top, transparent @r, @l-color  @r + 1px) @left - 1px top ~'/' 100% 51% no-repeat,
  radial-gradient(circle at left bottom, transparent @r, @l-color  @r + 1px) @left - 1px bottom ~'/' 100% 51% no-repeat,
    radial-gradient(circle at  right top, transparent @r, @r-color  @r + 1px ) -(@width - @left) top ~'/' 100% 51% no-repeat,
    radial-gradient(circle at right bottom , transparent @r, @r-color  @r + 1px )  -(@width - @left) bottom ~'/' 100% 51% no-repeat;

  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));

  &::after {
    content: '';
    position: absolute;
    top: 0;
    right: -@sm-r;
    width: @sm-r;
    height: 100%;
    background-image: radial-gradient(circle at @sm-r, transparent @sm-r, @r-color @sm-r + 1px);
    //background-size: @sm-r;
    background-size: @sm-r @sm-offset;
  }
}

.parent {
  .mixins-ticket-vertical-three(200px, 200px, 10px, 150px, #fc3a28, #fc3a28,5px,20px,#fc3a28);
}

.child {
  line-height: 200px;
}

注意事項

// ticket.less

//background: radial-gradient(circle at top right, transparent @r, @lcolor 0) -(@width - @left) top ~'/' 100% 55% no-repeat;
// 將上面的這行代碼拆解如下:
//background-image: radial-gradient(circle at top right, transparent @r, @lcolor 0);
//background-position:-(@width - @left) top ;
//background-size:100% 55% ;
//background-repeat: no-repeat;

/*注意:這里先是有 50px 的透明區(qū)域款青,緊接著第二個區(qū)域設(shè)置了 0 ,可以理解為從這里開始重新設(shè)置樣式區(qū)間*/
/*background: radial-gradient(circle at top right, transparent 50px, red 0, #66a8ff 50%);*/

/*在Chrome下霍狰,如果兩個區(qū)域之間顏色直接以 0 偏差過渡,會有比較嚴重的鋸齒*/
/*background: radial-gradient(10px at left,transparent 50%,#F6327C 50%);*/
/*background: radial-gradient(10px at left,transparent 50%,#F6327C 55%);*/

/*加陰影效果*/
/*filter: drop-shadow(2px 2px 2px rgba(0,0,0,.2));*/

/*多個徑向漸變累加*/
/*background: 
radial-gradient(50px 100px ellipse, transparent 40px, yellow 41px, red 49px, transparent 50px),
radial-gradient(30px circle, red, red 29px, transparent 30px);*/

后面我對照這幾個饰及,最后我選了最后一種樣式蔗坯,我覺得這個比較酷,最后拿過去給他們看燎含,他們也覺得這個方案非常好看宾濒,得到了別人的認可,我也覺得很開心屏箍。

如果你覺得這篇文章不錯绘梦,請別忘記點個關(guān)注哦,成為我的粉絲~赴魁,我會繼續(xù)努力創(chuàng)作好的文章的??

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末卸奉,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子颖御,更是在濱河造成了極大的恐慌榄棵,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,544評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異疹鳄,居然都是意外死亡拧略,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,430評論 3 392
  • 文/潘曉璐 我一進店門瘪弓,熙熙樓的掌柜王于貴愁眉苦臉地迎上來垫蛆,“玉大人,你說我怎么就攤上這事腺怯「し梗” “怎么了?”我有些...
    開封第一講書人閱讀 162,764評論 0 353
  • 文/不壞的土叔 我叫張陵瓢喉,是天一觀的道長宁赤。 經(jīng)常有香客問我,道長栓票,這世上最難降的妖魔是什么决左? 我笑而不...
    開封第一講書人閱讀 58,193評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮走贪,結(jié)果婚禮上佛猛,老公的妹妹穿的比我還像新娘。我一直安慰自己坠狡,他們只是感情好继找,可當(dāng)我...
    茶點故事閱讀 67,216評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著逃沿,像睡著了一般婴渡。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上凯亮,一...
    開封第一講書人閱讀 51,182評論 1 299
  • 那天边臼,我揣著相機與錄音,去河邊找鬼假消。 笑死柠并,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的富拗。 我是一名探鬼主播臼予,決...
    沈念sama閱讀 40,063評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼啃沪!你這毒婦竟也來了粘拾?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,917評論 0 274
  • 序言:老撾萬榮一對情侶失蹤谅阿,失蹤者是張志新(化名)和其女友劉穎半哟,沒想到半個月后酬滤,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,329評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡寓涨,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,543評論 2 332
  • 正文 我和宋清朗相戀三年盯串,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片戒良。...
    茶點故事閱讀 39,722評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡体捏,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出糯崎,到底是詐尸還是另有隱情几缭,我是刑警寧澤,帶...
    沈念sama閱讀 35,425評論 5 343
  • 正文 年R本政府宣布沃呢,位于F島的核電站年栓,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏薄霜。R本人自食惡果不足惜某抓,卻給世界環(huán)境...
    茶點故事閱讀 41,019評論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望惰瓜。 院中可真熱鬧否副,春花似錦、人聲如沸崎坊。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,671評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽奈揍。三九已至曲尸,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間男翰,已是汗流浹背队腐。 一陣腳步聲響...
    開封第一講書人閱讀 32,825評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留奏篙,地道東北人。 一個月前我還...
    沈念sama閱讀 47,729評論 2 368
  • 正文 我出身青樓迫淹,卻偏偏與公主長得像秘通,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子敛熬,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,614評論 2 353