這篇文章主要介紹“怎么用CSS實(shí)現(xiàn)常見(jiàn)的UI效果”，在日常操作中，相信很多人在怎么用CSS實(shí)現(xiàn)常見(jiàn)的UI效果問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”怎么用CSS實(shí)現(xiàn)常見(jiàn)的UI效果”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

創(chuàng)新互聯(lián)從2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站建設(shè)、做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元東川做網(wǎng)站,已為上家服務(wù),為東川各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:028-86922220

覆蓋 - cover

@mixin cover($top: 0, $left: 0, $width: 100%, $height: 100%) {    position: absolute;    top: $top;    left: $left;    width: $width;    height: $height;  }

當(dāng)你想在原先元素的基礎(chǔ)上再“復(fù)制”一個(gè)元素，并將其覆蓋在它身上時(shí)，你將會(huì)用到它

demo地址：https://codepen.io/alphardex/pen/GRjEoBZ

嵌入 - inset

@mixin inset($inset: 0) {    position: absolute;    top: $inset;    left: $inset;    right: $inset;    bottom: $inset;  }

同樣地，這也是在原先元素基礎(chǔ)上復(fù)制出一個(gè)元素，只不過(guò)這個(gè)元素位置和原先的元素相同，大小會(huì)基于原先的元素而增減。

舉個(gè)例子，倘若你想創(chuàng)建多個(gè)半徑不同的同心圓，這個(gè)Mixin將會(huì)很有幫助

aqua.css

aqua.css是筆者開(kāi)源的一個(gè)優(yōu)雅的、輕量級(jí)的CSS框架。里面有很多常用的組件以及常用的樣式類，用它來(lái)寫(xiě)CSS體驗(yàn)將會(huì)非常爽

在codepen上，筆者準(zhǔn)備了一個(gè)aqua.css模版，大家可以用它來(lái)進(jìn)行CSS的創(chuàng)作

常見(jiàn)UI效果

條紋效果

2

首先，我們要抓住“邊框”這個(gè)詞，如何創(chuàng)作出一個(gè)特殊的邊框呢？如果一般的CSS屬性實(shí)現(xiàn)不了的話，可以考慮用偽元素來(lái)實(shí)現(xiàn)，思路如下：在原先的元素下方創(chuàng)建一個(gè)有條紋背景的偽元素，并保證原先元素覆蓋住它就行，這樣就模擬了邊框的效果。

那么如何創(chuàng)建條紋背景呢？這里我們將使用repeating-linear-gradient來(lái)實(shí)現(xiàn)它

<div class="card w-80">    <div class="border-stripe rounded-xl">      Lorem ipsum...    </div>  </div>

.border-stripe {    --stripe-width: 0.5rem;    --stripe-deg: -45deg;    --stripe-color-1: var(--grey-color-1);    --stripe-offset-1: 2px;    --stripe-color-2: var(--skin-color-2);    --stripe-offset-2: 1rem;    --stripe-radius: 15px;    --stripe-inset: calc(var(--stripe-width) * -1);    &::before {      @include inset(var(--stripe-inset));      content: "";      z-index: -1;      background: repeating-linear-gradient(        var(--stripe-deg),        var(--stripe-color-1) 0 var(--stripe-offset-1),        var(--stripe-color-2) 0 var(--stripe-offset-2)      );      border-radius: var(--stripe-radius);    }  }

為了保證復(fù)用性，這里將其抽象成了border-stripe類，里面的值都可以通過(guò)CSS變量來(lái)動(dòng)態(tài)調(diào)節(jié)

demo地址：https://codepen.io/alphardex/pen/VwKWvdG

光澤效果

一看到光澤，相信你可能會(huì)想到一個(gè)關(guān)鍵角色——徑向漸變，通過(guò)它，我們可以創(chuàng)作出放射狀的圖案，而光澤也恰好是放射狀的，再根據(jù)背景可以疊加的特性，光澤效果就能輕松實(shí)現(xiàn)了

<div class="flex flex-col space-y-4">    <span class="btn btn-primary btn-round inline-flex">      <span class="font-bold text-grad">Shine Button 1</span>    </span>    <span class="btn btn-info btn-round btn-depth inline-flex">      <span class="font-bold">Shine Button 2</span>    </span>  </div>

:root {    --blue-color-1: #08123d;    --gold-color-1: #dcb687;    --brown-color-1: #50301f;    --brown-color-2: #936237;    --gold-grad-1: radial-gradient(        circle at 50% 5%,        #{transparentize(white, 0.5)},        #eba262      ),      #eba262;    --gold-grad-2: linear-gradient(88deg, #e7924e 0%, #f8ffee 50%, #e7924e 100%);    --blue-grad-1: radial-gradient(        circle at 50% 5%,        #{transparentize(white, 0.8)},        #091344      ),      #091344;    --primary-color: var(--blue-grad-1);    --info-color: var(--gold-grad-1);  }  .btn {    &-primary {      border: 4px solid var(--gold-color-1);      span {        background-image: var(--gold-grad-2);      }    }    &-info {      color: var(--brown-color-1);      border: none;    }    &-depth {      box-shadow: 0 -5px 0 var(--brown-color-2);    }  }

demo地址：https://codepen.io/alphardex/details/vYXZNez

不規(guī)則形狀

首先，讓我們先觀察一下上圖的緞帶形狀是由哪些基本形狀組成的：中間是一個(gè)矩形，矩形下方有2個(gè)三角形，左右2側(cè)各有一個(gè)被裁切過(guò)的矩形。一提裁切，就能想到clip-path這個(gè)屬性，于是問(wèn)題也就很好解決了

<div class="ribbon">    Pure CSS Ribbon    <div class="block"></div>    <div class="block"></div>    <div class="block"></div>    <div class="block"></div>  </div>

.ribbon {    --ribbon-color-1: var(--yellow-color-1);    --ribbon-color-2: var(--yellow-color-2);    --ribbon-color-3: var(--yellow-color-3);    position: relative;    padding: 0.5rem 1rem;    color: white;    background: var(--ribbon-color-1);    .block {      &:nth-child(1),      &:nth-child(2) {        position: absolute;        bottom: -20%;        width: 20%;        height: 20%;        background: var(--ribbon-color-2);        clip-path: polygon(0 0, 100% 100%, 100% 0);      }     &:nth-child(1) {        left: 0;      }      &:nth-child(2) {        right: 0;        transform: scaleX(-1);     }      &:nth-child(3),      &:nth-child(4) {        position: absolute;        z-index: -1;        top: 20%;        width: 40%;        height: 100%;        background: var(--ribbon-color-3);        clip-path: polygon(0 0, 25% 50%, 0 100%, 100% 100%, 100% 0);      }      &:nth-child(3) {        left: -20%;      }      &:nth-child(4) {        right: -20%;        transform: scaleX(-1);      }    } }

注意到有一行代碼transform: scaleX(-1);，這起到了水平翻轉(zhuǎn)的作用，它可以防止再寫(xiě)一遍clip-path

demo地址：https://codepen.io/alphardex/pen/OJRvaaR

浮雕效果

通過(guò)仔細(xì)觀察，你會(huì)發(fā)現(xiàn)這是由2個(gè)同心的元素組成的，于是自然就想到了inset這個(gè)Mixin。

創(chuàng)建了2個(gè)同心元素后，就要想辦法來(lái)創(chuàng)建它們的浮雕光澤了。這里的光澤可以用box-shadow來(lái)實(shí)現(xiàn)，通過(guò)疊加多重陰影，我們就能模擬出浮雕的效果了

<div class="px-6 py-2 text-xl embossed cursor-pointer" data-text="浮雕按鈕" style="--emboss-radius: 1.5rem">    浮雕按鈕  </div>

:root {    --red-color-1: #af2222;    --red-color-2: #c1423e;    --red-color-3: #c62a2a;    --red-color-4: #951110;    --green-color-1: #486433;    --green-color-2: #2b361a;    --red-grad-1: linear-gradient(      to right,      var(--red-color-1) 50%,      var(--red-color-2) 0    );  }  .embossed {    --emboss-radius: 1rem;    --emboss-out: 6px;    --emboss-out-minus: calc(var(--emboss-out) * -1);    --emboss-inset: 2px;    --emboss-inset-minus: calc(var(--emboss-inset) * -1);    --emboss-blur: 1px;    --emboss-bg-1: var(--red-color-3);    --emboss-bg-2: var(--green-color-1);    --emboss-color-1: white;    --emboss-color-2: var(--red-color-4);    --emboss-color-3: var(--green-color-2);    position: relative;    box-sizing: border-box;    white-space: nowrap;     &::before {      @include inset(var(--emboss-out-minus));      content: "";      background: var(--emboss-bg-1);      box-shadow: inset var(--emboss-inset-minus) var(--emboss-inset-minus)          var(--emboss-blur) var(--emboss-color-1),        inset var(--emboss-inset) var(--emboss-inset) var(--emboss-blur)         var(--emboss-color-2);      border-radius: calc(var(--emboss-radius) + var(--emboss-out));    }    &::after {      @include inset;      @include flex-center;      content: attr(data-text);      color: white;      font-weight: bold;      background: var(--emboss-bg-2);      box-shadow: inset var(--emboss-inset) var(--emboss-inset) var(--emboss-blur)          var(--emboss-color-1),        inset var(--emboss-inset-minus) var(--emboss-inset-minus)          var(--emboss-blur) var(--emboss-color-3);     border-radius: var(--emboss-radius);    }  }

demo地址：https://codepen.io/alphardex/pen/poEEERM?editors=0110

到此，關(guān)于“怎么用CSS實(shí)現(xiàn)常見(jiàn)的UI效果”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

網(wǎng)頁(yè)題目：怎么用CSS實(shí)現(xiàn)常見(jiàn)的UI效果
網(wǎng)站地址：http://www.js-pz168.com/article26/iecjcg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁(yè)設(shè)計(jì)公司、做網(wǎng)站、企業(yè)網(wǎng)站制作、面包屑導(dǎo)航、ChatGPT、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)