CSS實現(xiàn)鏤空效果的示例代碼
發(fā)布時間：2018-12-24 15:44:48 作者：sex_squirrel 
我要評論
我要評論這篇文章主要介紹了CSS實現(xiàn)鏤空效果的示例代碼的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
效果原理
主要利用css漸變實現(xiàn)一些不需要切圖的背景鏤空
優(yōu)惠券樣式
.mixinsTicket(@width, @height, @r, @left, @lcolor, @rcolor) {
width: @width;
height: @height;
background:
radial-gradient(circle at top right, transparent @r, @lcolor 0) -(@width - @left) top ~'/' 100% 51% no-repeat,
radial-gradient(circle at bottom right, transparent @r, @lcolor 0) -(@width - @left) bottom ~'/' 100% 51% no-repeat,
radial-gradient(circle at top left, transparent @r, @rcolor 0) @left 0 ~'/' 100% 51% no-repeat,
radial-gradient(circle at bottom left, transparent @r, @rcolor 0) @left bottom ~'/' 100% 51% no-repeat;
}
.mixinsTicket1(@width, @height, @r, @top, @color) {
width: @width;
height: @height;
background:
radial-gradient(circle at bottom left, transparent @r, @color 0) left (@top - @height) ~'/' 51% 100% no-repeat,
radial-gradient(circle at top left, transparent @r, @color 0) left @top ~'/' 51% 100% no-repeat,
radial-gradient(circle at bottom right, transparent @r, @color 0) right (@top - @height) ~'/' 51% 100% no-repeat,
radial-gradient(circle at top right, transparent @r, @color 0) right @top ~'/' 51% 100% no-repeat;
&::after{
content: '';
display: block;
position: absolute;
width: calc(100% - 2 * @r);
left: @r;
top: @top;
border-top: 1px dashed #fff;
transform: translateY(.5);
}
}
切角效果
ps: 鋸齒跟設(shè)備的顯示有關(guān)系
.mixinFlag(@width, @height, @bg) when(default()) {
width: @width;
height: @height;
background:
linear-gradient(45deg, transparent sqrt(pow(@width/2, 2)/2), @bg 0) right,
linear-gradient(-45deg, transparent sqrt(pow(@width/2, 2)/2), @bg 0) left;
background-size: 50% 100%;
background-repeat: no-repeat;
}
.mixinFlag(@width, @height, @bg) when(@width > @height) {
width: @width;
height: @height;
background:
linear-gradient(-45deg, transparent sqrt(pow(@height/2, 2)/2), @bg 0) top left,
linear-gradient(-135deg, transparent sqrt(pow(@height/2, 2)/2), @bg 0) bottom left;
background-size: 100% 50%;
background-repeat: no-repeat;
}
.mixinsMark(@width, @height, @bg) {
width: @width;
height: @height;
background:
linear-gradient(-45deg, transparent sqrt(pow(@height/2, 2)/2), @bg 0) bottom left,
linear-gradient(-135deg, transparent sqrt(pow(@height/2, 2)/2), @bg 0) top left;
background-size: 100% 50%;
background-repeat: no-repeat;
}
ps:以上效果四個方向都可以實現(xiàn)，其他方向代碼沒有貼出，原理相同
格子布
css {
width: 510px;
height: 128px;
background: #FFF;
background-image: linear-gradient(rgba(182, 128, 102, .8) 8px, transparent 0),
linear-gradient(90deg, rgba(182, 128, 102, .8) 8px, transparent 0);
background-size: 8px 14px, 14px 8px;
}
焦點(diǎn)
.mask {
position: fixed;
top: 0;
left: 0;
z-index: 100;
width: 100vw;
height: 100vh;
background:
radial-gradient(closest-side at 50% 278rpx, transparent 140rpx, rgba(0, 0, 0, .12) 180rpx, rgba(0, 0, 0, .22) 200rpx, rgba(0,0,0,.3) 220rpx, rgba(0,0,0, .4)) no-repeat;
}
總結(jié)
每一層漸變都可被當(dāng)做一張背景圖，也就是說每一層漸變都可以指定其position、size、repeat。玩過PS的的同學(xué)應(yīng)該知道圖層的概念，咱們的背景圖層疊原理也類似（當(dāng)然，漸變也可以當(dāng)背景圖），控制漸變的大小，哪里需要鏤空，以及需要顯示的位置、是否平鋪，就可以實現(xiàn)大多數(shù)場景下的基本效果，當(dāng)然，一張切圖來的更快，但是有時候切圖并不能適應(yīng)所有的場景。
掌握background的書寫順序可以幫助在腦海中構(gòu)思自己想要的效果：
復(fù)制代碼
代碼如下:background: bg-color || bg-image || bg-position [ / bg-size]? || bg-repeat || bg-attachment || bg-origin || bg-clip
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了CSS實現(xiàn)鏤空遮罩效果,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-08-20
這篇文章主要介紹了用純CSS實現(xiàn)鏤空效果的示例代碼的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-25CSS3中文字鏤空、透明值、陰影效果設(shè)置示例小結(jié)
這篇文章主要介紹了CSS中文字鏤空、透明值、陰影效果設(shè)置示例小結(jié),其中通過text-stroke-color透明值的設(shè)置可以讓文字在某些程度上更加柔和,需要的朋友可以參考下2016-03-07- 這篇文章主要介紹了使用CSS實現(xiàn)中間鏤空的圖片遮罩效果的方法,文中同時附帶介紹了一個用CSS3實現(xiàn)的鏤空一個圓形的代碼示例,需要的朋友可以參考下2015-12-24
CSS背景色鏤空技術(shù)實際應(yīng)用及進(jìn)階分享
這篇文章主要介紹了CSS背景色鏤空技術(shù)實際應(yīng)用及進(jìn)階相關(guān)資料，需要的朋友可以參考下2013-10-10
這篇文章主要介紹了css3遮罩層鏤空效果的多種實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)2020-05-11
