整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
面
在一個項目中，我為了一個特效，在一個鏈接前面加入一個半透明遮罩。為此，鏈接被遮罩擋住，導致無法成功點擊到鏈接。
那么有什么辦法可以實現事件穿透呢。
這里要說到CSS3，CSS3引入不少屬性，也有不少屬性是包含了JS的集合，比如常見的attr這個。
對于以上事件，這樣介紹一個CSS3的屬性pointer-events
常見的pointer-events的值有auto|none
none:
pointer-events，英文直譯是指示器事件。none就是無的意思。合起來意思是，無指示器事件。顧名思義就是取消鼠標事件。
很詫異吧，css居然可以直接令JS的鼠標事件無效。
那無效以后呢，無效以后當前把點擊事件穿透到當前dom下的dom了。
auto:
這個就不用說了，大家都懂的。
所以要穿透當前的dom成功點擊下層的鏈接怎么辦？ CSS寫入pointer-events:none
更多前端小知識，盡在https://blog.imcyk.com
文：https://blog.csdn.net/TriDiamond6/article/details/105222289CSS是一個很獨特的語言?？雌饋矸浅：唵?，但是某種特殊效果看似簡單，實現起來就頗有難度。這篇文章主要是給在學習前端的童鞋分享一些新的CSS技巧，一些在前端教程和培訓課堂中不會講到的知識。第二就是讓還在前端開發這條道路上的童鞋們，重新燃起對前端排版和特效的熱愛和熱情！
1、固定底部內容
這種是一個非常常見的布局方式，但是對于新手來說是比較常見的難題。
這種布局方式在后臺管理系統中比較常見，當我們內容不足瀏覽器窗口高度時，底部內容需要固定在底部。當內容超出了瀏覽器窗口高度，就會隨著內容往后推。
在有CSS3之前，實現這個效果是頗有難度的。瀏覽器窗口高度是會根據不同用戶打開瀏覽器的情況，屏幕大小的差異和瀏覽器的縮放比例而變。我們需要借助JavaScript來實時獲取瀏覽器高度進行運算才能實現。雖然說標題是說“固定”底部，但是我們想要的效果不是position: fixed。使用固定定位，在內容高于窗口高度時，就會擋住我們的內容。
隨著CSS3的來臨，最完美的實現方式是使用Flexbox。實現的關鍵就是使用不太被關注的flex-grow屬性，可以在我們的內容標簽元素（比如div）中使用。在我們下面的例子里使用了main標簽。
我來講解一下實現原理吧。
flew-grow是用來控制一個flex元素相對它同等級flex元素的自身可擴充的空間。如果我們使用flex-grow: 0，那這個flex元素就完全不會擴展了。所以我們需要把頭部和底部之間的內容標簽元素設置為flex-grow: 1或者flex-grow: auto，這樣內容部分就會自動填充滿頭部和底部之外的所有空間。
為了避免底部內容受內容部分擴充空間的影響，我們給footer底部元素flex-shrink: 0屬性。flex-shrink的作用與flex-grow是恰恰相反，用來控制flex元素收縮的空間，這里我們給了flex-shrink: 0就是為了底部footer的大小不受影響。
我們直接上HTML和CSS代碼看看是怎么實現的。
<div id="document">
<nav>
<h1>頭部內容</h1>
</nav>
<main>
<p>可以添加更多內容看看底部的變化哦！</p>
</main>
<footer>
<h1>底部內容</h1>
</footer>
</div>CSS
#document {
height: 100vh;
display: flex;
flex-direction: column;
background: #202020;
font-family: microsoft yahei,wenquanyi micro hei,sans-serif !important;
}
nav, footer {
background: #494949;
display: flex;
justify-content: center;
}
main {
color: #bdbdbd;
flex: auto;
}
footer {
flex-shrink: 0;
}
* {
margin: 0;
}
h1,p {
padding: 15px;
}
nav > h1 {
color: #82FCFD;
text-shadow: 1px 1px 4px #00000080;
}
footer > h1 {
color: #82FCFD;
text-shadow: 1px 1px 4px #00000080;
}知識點總結：
2. 懸停放大圖片特效
懸停放大圖片是一個特別吸引眼球的特效，比較常用于可點擊的圖片。當用戶懸停鼠標在圖片上，圖片會稍微的放大。
其實實現這個特效是非常簡單的。首先我們需要一個div包裹這img標簽，這個包裹層是用來遮擋住圖片，當圖片放大時不會出現圖片超出我們規定的寬高以外。
首先我們來講講div包裹的屬性，我們需要給它一個固定的width寬和height高。然后我們必須給予這個元素overflow: hidden屬性。讓圖片放大的時候不會超出這個div元素的寬高。有了這個包裹層，我們就可以編寫img的各種效果了。
我的例子里面用了transform: scale(1,1)作為懸停時的圖片特效，這個transform是用于改變任何元素的屬性的，然后scale是用于放大（整數就會放大）或者縮小（負數就會縮小）元素的。
上代碼讓大家看看：
html body中放入
<div class="img-wrapper">
<img src="https://img-blog.csdnimg.cn/2020032122230564.png"/>
</div>CSS
.img-wrapper {
width: 400px;
height: 400px;
overflow: hidden;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.img-wrapper img {
height: 400px;
-webkit-transition: 0.3s linear;
transition: 0.3s linear;
}
.img-wrapper img:hover {
transform: scale(1.1);
}
.img-wrapper {
display: inline-block;
box-sizing: border-box;
border: 3px solid #000;
}如果你們想讓圖片更加炫酷可以加上圖片過濾屬性filter，讓圖片變灰或者變深褐色，然后懸停時候出現更加炫酷的顏色變幻。灰化的屬性是filter: grayscale(100%);，然后深褐色化的屬性是filter: sepia(100%)。其實圖片還有很多過濾屬性的，大家有興趣也可以去嘗試一下哦！
加入特殊效果的代碼如下：
HTML
<!-- 灰度過濾 -->
<div class="img-wrapper">
<img class="grayscale-img" src="https://img-blog.csdnimg.cn/2020032211021728.png" />
</div>
<!-- 深褐色過濾 -->
<div class="img-wrapper">
<img class="sepia-img" src="https://img-blog.csdnimg.cn/2020032122230564.png" />
</div>CSS
/*==============* 灰度過濾 *==============*/
.grayscale-img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.grayscale-img:hover {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
/*==============* 深褐色過濾*==============*/
.sepia-img {
-webkit-filter: sepia(100%);
filter: sepia(100%);
}
.sepia-img:hover {
-webkit-filter: sepia(0);
filter: sepia(0);
}3. 瞬間黑暗模式
最近微信也逃脫不了黑暗時代的到來，網頁也很多都做了黑暗模式的兼容和主題。如果我們在做的一個網站想瞬間實現黑暗模式可以怎么實現呢？
其實有一個很快的方式，我們可以使用invert和hue-rotate兩個CSS3過濾器來實現。
filter: invert() — 是從0到1的刻度，1是從白變黑。
filter: hue-rotate() — 用于改變你元素的顏色，同時或多或少保持原本相同的色系。這個屬性的值可以從0deg到360deg。
在我們頁面的body標簽上添加這兩個屬性，我們就可以快速嘗試把我們的網站變成"黑暗模式"。這里需要注意的是，如果body和html上沒有設置background背景顏色，這個過濾就會不起效了哦。
CSS的代碼如下：
html {
background: #fff;
}
body {
background: #fff; filter: invert(1) hue-rotate(270deg);
}實現效果
這里我們會發現圖片的顏色會受影響，并不是很美觀，使用css過濾器是無法完美切換黑暗模式的。不過使用JavaScript輔助就可以完美的切換黑暗模式。
最近出了一個JavaScript輔助插件叫Darkmode.js。
Darkmode.js
其實Darkmode.js運用的也是css里面的一個特性叫mix-blend-mode — “CSS 屬性描述了元素的內容應該與元素的直系父元素的內容和元素的背景如何混合“。加上Javascript的輔助判斷哪些頁面上的元素需要黑化的，哪些是不需要黑化的。就會想我們之前那種做法，導致其他不需要黑化的元素，比如圖片，受到影響導致顏色出現問題。
使用Darkmode.js非常簡單，只要在腳本里面添加以下代碼就可以馬上加入一個插件，
<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.5/lib/darkmode-js.min.js">
</script>
<script>
// 這些是這個插件的可配置項：
var options={
bottom: "32px", // 定位底部距離 - 默認: '32px'
right: "32px", // 定位右邊距離 - 默認: '32px'
left: "unset", // 定位左邊距離 - 默認: 'unset'
time: "0.5s", // 默認動畫時間: '0.3s'
mixColor: "#fff", // 需要改變的顏色 - 默認: '#fff'
backgroundColor: "#fff", // 背景顏色 - 默認: '#fff'
buttonColorDark: "#262728", // 黑暗模式下按鈕顏色 - 默認: '#100f2c'
buttonColorLight: "#fff", // 日間模式下按鈕顏色 - 默認: '#fff'
saveInCookies: true, // 是否在cookie保存當前模式 - 默認: true,
label: "", // 切換模式按鈕圖標 - 默認: ''
autoMatchOsTheme: true // 是否自動根據系統適應模式 - 默認: true
};
let darkmode=new Darkmode(options);
darkmode.showWidget();
</script>如果你不希望用這個插件的默認按鈕，你可以在你的JavaScript代碼中自主控制。我們可以通過.toggle()方法來切換模式，同時可以使用.isActivated()來檢測是否已經進入黑暗模式。
const darkmode=new Darkmode();darkmode.toggle();
console.log(darkmode.isActivated())
// 如果已經進入黑暗模式會返回 true知識總結
4. 自定義列表符號
ul，li的無序列表有默認的符號·，但是在很多情況下我們希望可以給這個符號加入自己的樣式和顏色，甚至是換成自定義的符號。默認的符號我們是無法做任何的樣式處理，而且默認的符號在CSS屬性里面只有幾個選擇可以使用，很多情況下都是無法滿足我們的設計。
其實自定義無序列表符號不難，我們只需要使用偽元素::before加content屬性就可以實現。
在我這個例子里面我做了兩個任務列表，一個是待處理任務，一個是已完成任務，各自給了不一樣的列表符號和顏色。
實現原理
一、首先我們禁用了ul的默認符號樣式list-style: none
二、在li的:before偽元素上給予content內容值，待處理任務使用，已完成任務li.completed:before使用?
三、為了展示效果更加好看我分別給了li和li .completed兩個不同的顏色
上代碼看看是怎么實現的吧：
HTML
<div>
<h2>待處理</h2>
<ul>
<li>待辦任務1</li>
<li>待辦任務2</li>
<li>待辦任務3</li>
<li>待辦任務4</li>
<li>待辦任務5</li>
</ul>
</div>
<div>
<h2>已完成</h2>
<ul>
<li class="completed">完成任務1</li>
<li class="completed">完成任務2</li>
<li class="completed">完成任務3</li>
</ul>
</div>CSS
ul {
list-style: none; color: #fff;
font-size: 20px;
border: 3px solid #000;
padding: 1rem 2rem;
min-height: 200px;
margin: 15px 2rem 0 0;
background: #323232;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
border-radius: 8px;
}
li {
padding: 0.3rem 0;
}
li::before {
content: " ";
color: aqua;
}
li.completed::before {
content: "? ";
text-decoration: none;
color: greenyellow;
}
li.completed {
text-decoration: line-through;
color: #bdbdbd;
}::before和::after偽元素加content屬性可以用來做很多特殊的效果，也是當代前端排版比較常用的“魔法”。說到偽元素的使用，我再給大家說一個比較常用的使用場景。
在管理后臺或者是文章展示中，我們經?？梢砸姷降摹懊姘紝Ш健币彩怯脗卧貋聿迦朊總€目錄中間的符號的。
實現邏輯
一、這個導航含有3個a標簽，首先給每個a標簽加入一個偽元素::after，然后在content屬性插入/符號。
二、然后使用a:first-child，這個偽類會選擇到第一個a標簽，然后使用content屬性加入?符號。
三、因為我們第一步在每個a標簽的后面插入了/符號, 所以我們需要在最后一個a標簽清除掉。這里我們使用:last-child選擇到最后一個a標簽，然后用content: " "屬性把偽元素的內容清楚掉。
HTML
<div class="breadcrumb">
<a>三鉆</a>
<a>前端</a>
<a>教程</a>
</div>CSS
.breadcrumb {
font-size: 1.6rem;
color: #fff;
}
.breadcrumb a:first-child {
color: #82fcfd;
}
.breadcrumb a:first-child::before {
content: " ? ";
}
.breadcrumb a::after {
content: " /";
color: #ef6eae;
}
.breadcrumb a:last-child::after {
content: "";
}知識總結
::before | ::after — 偽元素用于向某些選擇器添加特殊的效果。
content — CSS 屬性用于在元素的 ::before 和 ::after 偽元素中插入內容。使用content 屬性插入的內容都是匿名的可替換元素。
:first-child — CSS偽類表示在一組兄弟元素中的第一個元素。
:last-child — CSS偽類代表父元素的最后一個子元素。
者：幻靈爾依 (授權原創)
https://juejin.im/post/5e0fef935188253a624a6a72
《css揭秘》中講了47個css技巧，其中有很多日常編碼中并不會用到，本文除了將書中部分實用技巧羅列出來之外，還嘗試用幫助讀者搞明白background、animation 等常用但是卻掌握不牢固的知識點。所以閱讀本文不僅可以學習一些實用技巧，也可以鞏固自己的 css 基礎知識。
全名Don't Repeat Yourself，該原則適用于所有編程語言而不限于css。
.expand-range {
position: relative;
}
.expand-range:after {
content: '';
position: absolute;
top: -10px; right: -10px; bottom: -10px; left: -10px;
}推薦使用scss：
@mixin expand-range($top: -10px, $right: $top, $bottom: $top, $left: $right, $position: relative) {
position: $position;
&:after {
content: '';
position: absolute;
top: $top;
right: $right;
bottom: $bottom;
left: $left;
}
}
//使用：.test { @include expand-range($top: -5px, $position: absolute) } position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;層疊上下文
邊框內圓角
clip-path
border-radius: 5em 1em; /*相當于border-radius: 5em 1em 5em 1em / 5em 1em 5em 1em;*/自適應的橢圓
width: min-content;自適應寬度
height: 200px;
background: cyan;
box-shadow: 0 0 0 5px #000 inset,
0 0 0 10px #555 inset,
0 0 0 15px #999 inset;投影模擬多重邊框
box-shadow: 0 5px 4px -4px black;第二個參數使陰影整體下移 5px ，第三個參數使陰影四周多了 4px 的高斯模糊（注意由于整體下移了 5px，所以此時上方還是沒有陰影露出的），第四個參數又把陰影整體縮小了 4px，，所以左右兩邊才沒有出現模糊半徑導致的高斯模糊陰影色，從而實現單側投影。
單側投影
還可以逗號分隔設置多個陰影色，比如下面的兩側投影效果：地址
box-shadow: 5px 0 5px -5px black,
-5px 0 5px -5px black;單側投影
filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));不規則投影
前端開發大都了解糊濾的高斯模鏡效果是filter: blur()實現的，但是卻很少使用濾鏡的其他幾個調色效果。filter 的值有blur()、drop-shadow()、url()、brightness()、contrast()、grayscale()、hue-rotate()、invert()、opacity()、saturate()、sepia()～～可以使用復合形式如：filter: sepia(1) saturate(4)等。下面是filter屬性值大集合：地址
濾鏡的染色和褪色效果
餅圖的 css 實現方案非常奇怪，所以我忽略之。推薦使用 svg 的實現方案，非常簡單，先來個基本教學吧～
先畫個圓：
<svg width="100" height="100">
<circle r="25" cx="50" cy="50" />
</svg>這里 r="25" 是半徑25， cx cy 分別表示圓心的 x y 坐標。
circle {
fill: yellowgreen;
stroke: #666;
stroke-width: 50;
}這里給圓形定義了一個寬度 40 的描邊:
餅圖 svg
再把描邊設為線段長度 20 間隔 10 的虛線：
circle {
...
stroke-dasharray: 20 10;
}當把虛線的間隔設定為大于等于圓周時，虛線的線段長度就是一個扇形區域（當線段長度等于圓周時扇區達到100%）：
給 svg 設置圓角和背景色，并旋轉 -90deg ，就可以實現一個餅圖：地址（使用currentColor關鍵字和color: inherit 是為了實現DRY原則。）
但是這樣的餅圖其扇區大小是不易計算的，為了方便計算，可以讓虛線的線段長度同時也是圓周無限接近100，這樣就可以更方便的設置扇區的百分比。圓周是 2πr ，所以 100=2πr ，計算得出半徑 r 近似值 16。再利用 svg 的 viewBox 屬性，實現自適應容器大小的餅圖：地址
這種方法有個弊端，就是當設置 stroke-dasharray: 100 100 時會有一條縫，這是取近似值無法避免的。
background 是我們最常用的屬性之一，但作為一個老前端，我也只能羞恥的說我目前并沒有完全掌握這個屬性。
background 是一個簡寫屬性，可以包括多個屬性：background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size、background-attachment。接下來我們一個個來看看這些屬性的作用：
簡寫時 background-size 只能緊接著 background-position 出現，以 / 分割，如： "center / 80%"。
border: 10px solid rgba(255, 255, 255, .5);
background: white;
background-clip: padding-box;半透明邊框
height: 200px;
padding: 10px;
border: 5px solid cyan;
background: lightblue;
background: radial-gradient(#00a4fd, cyan) no-repeat right 100px bottom / 100px 100px;
background-origin: content-box;背景定位
background-position 設為百分比值較為復雜。百分比值實際上執行了以下的計算公式:
(container width - image width) * (position x%)=(x offset value)
(container height - image height) * (position y%)=(y offset value)由計算公式可知：當值為0%時，實際偏移值為0px，此時圖片的左邊界（或上邊界）和容器的左邊界（或上邊界）重合；當值為50%時，實際偏移值為容器減圖片剩余空間的一半，圖片左右邊界（或上下邊界）距離容器左右邊界（或上下邊界）相等，此時圖片的中點和容器的中點重合。當值100%時，實際偏移值為容器減圖片的剩余空間，所以此時圖片的右邊界（或下邊界）和容器的右邊界（或下邊界）重合。二者之差為負值時同樣有效。地址
背景定位
background: linear-gradient(#fb3 50%, #58a 0);
background-size: 100% 30px;條紋背景
也可以設置為垂直條紋背景：
background: linear-gradient(to right, #fb3 50%, #58a 0);
background-size: 100% 30px;還可以設置為斜向條紋：
background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
background-size: 30px 30px;垂直條紋背景
斜向條紋需要設置四條條紋才能在平鋪到時候做到無縫拼接。
更好的斜向條紋：(這里必須設置起始值#fb3 0)
background: repeating-linear-gradient(60deg, #fb3 0, #fb3 15px, #58a 0, #58a 30px);更好的斜向條紋
background: #58a;
background-image: linear-gradient(white 1px, transparent 0),
linear-gradient(to right, white 1px, transparent 0);
background-size: 30px 30px;網格
更好的網格：
background: #58a;
background-image: linear-gradient(white 2px, transparent 0),
linear-gradient(to right, white 2px, transparent 0),
linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 0),
linear-gradient(to right, rgba(255, 255, 255, .5) 1px, transparent 0);
background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;更好的網格
background: #eee;
background-image:
linear-gradient(45deg, rgba(0, 0, 0, .25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, .25) 0),
linear-gradient(45deg, rgba(0, 0, 0, .25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, .25) 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;棋盤
折角
到這里 background 屬性基本講完了，光看無用，多動手實踐吧。
background:
radial-gradient(tan 30%, transparent 0),
radial-gradient(tan 30%, transparent 0);
background-color: #666;
background-size: 30px 30px;
background-position: 0 0, 15px 15px;波點
background:
radial-gradient(circle at top left, transparent 15px, blue 0) top left,
radial-gradient(circle at top right, transparent 15px, cyan 0) top right,
radial-gradient(circle at bottom right, transparent 15px, cyan 0) bottom right,
radial-gradient(circle at bottom left, transparent 15px, cyan 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;切角
background: conic-gradient(lightblue 30%, yellowgreen 0, yellowgreen 50%, cyan 0);餅圖
animation 屬性是 animation-name、animation-duration、 animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state屬性的一個簡寫屬性形式。
如何給動畫加上回彈效果呢？這里介紹一種最便利的方法：
回彈效果
上圖圖橫軸為時間，縱軸為動畫進度。圖中貝塞爾曲線有兩個控制手柄，x1, y1 控制第一個錨點，x2, y2控制第二個錨點。其中 x1 、x2 不能大于/小于 1，但是y1, y2 可以。當 y2 大于 1 時，就會產生提前到達終點，然后超過終點，然后再返回終點的效果，像回彈一樣。地址
animation: bounce 3s both cubic-bezier(.7, .1, .3, 2);transition 屬性是 transition-property、transition-duration、transition-timing-function、transition-delay的一個簡寫屬性。使用 transition 同樣可以實現回彈效果：地址
p {
transform-origin: 1.4em -.4em;
transition: transform .5s cubic-bezier(.25, .1, .3, 1.5);
}
input:not(:focus) + p {
transform: scale(0);
transition: transform 300ms; /*此處是為了縮小時重置transition-timing-function，不觸發回彈*/
}div {
width: 150px; height: 150px;
background: url('http://c3.staticflickr.com/3/2671/3904743709_74bc76d5ac_b.jpg');
background-size: auto 100%;
animation: panoramic 10s linear infinite alternate;
}
div:hover {
animation-play-state: paused;
}
@keyframes panoramic {
to { background-position: 100% 0; }
}@keyframes spin {
to { transform: rotate(1turn); }
}
.avatar {
animation: spin 3s linear 2s infinite;
transform-origin: 110px 110px;
}
.avatar > img {
animation: inherit;
animation-direction: reverse;
}環形路徑移動的動畫
其實現在社區已經不乏介紹 css 技巧的好文，這里推薦幾篇我覺得寫的極好的css技巧文章（當然可能大家也看過，很慚愧我其實現在也沒看完）：
總體來說，《css揭秘》這本書并沒有給我帶來太大驚喜，個人感覺不如閱讀《css世界》帶來的收獲多。當然了，這本書屬于純技巧型的，并沒有講述很多原理知識，所以也不能苛責吧。有興趣的同學可以跟著我學習一波 css世界，相信肯定會有更大的收獲～
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
