你不知道的css3(下） -- 用css3為你的元件新增可靠性

nightZing發表於2018-11-27

寫在前面：上一篇介紹了下css3元件實戰--絢麗效果篇,那篇文章主要是介紹了幾個效果比較風騷但相對用的不多的幾個元件，這一次介紹幾個平時用的比較多的幾個實用元件

一.滑鼠劃過光影效果 當滑鼠移動到圖片上時，有一道白光從圖片上劃過，猶如刀光劍影。

1.HTML模板

我們要放置一張圖片，用一個div包裹起來：

<div class="highlight-box">
	![](images/example.jpg)
</div>
複製程式碼

2.設定圖片CSS樣式

.highlight-box {
	width: 500px;
	height: 300px;
	overflow: hidden;
	position: relative;
}

.highlight-box img {
	width: 100%;
	height: 100%;
}
複製程式碼

3.接著製作白光，這裡要用到強大的偽元素:before選擇器：

.highlight-box:before {
	display: block;
	/*注意這裡top和left，讓白光移動到圖片左上角，
	後續的劃過動畫也是依靠這兩個屬性*/
	top: -200%;
	left: -100%;
	/*定義白光的寬高*/
	width: 50%;
	height: 300%;
	/*旋轉角度，你也可以調整*/
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	/*使用漸變來實現白光*/
	background: -webkit-linear-gradient(left, rgba(255, 255, 255, .05) 20%, 
            rgba(255, 255, 255, .6) 65%, rgba(255, 255, 255, .05) 100%);
	background: linear-gradient(left, rgba(255, 255, 255, .05) 20%,
            rgba(255, 255, 255, .6) 65%, rgba(255, 255, 255, .05) 100%);
	content: '';
	z-index: 2;
	position: absolute;
}
複製程式碼

這裡使用漸變（linear-gradient）來實現白光效果，同時為了斜向劃過，使用transform: rotate(45deg)將其旋轉45度。上面的height、width、top和left，你也可以使用具體的畫素值，建議採用百分比。

4.最後一步，讓白光動起來：

.highlight-box:hover:before {
	animation: cross 1s linear;
}

@keyframes cross {
	0% {
		top: -200%;
		left: -100%;
	}
	100% {
		top: -50px;
		left: 100%;
	}
}
複製程式碼

需要改變的只是top和left的值，也就是讓白光從左上角向右下角移動。

二.仿loading動態效果 一般loading是用圖片來實現的，這裡使用純css來仿寫這個圖片效果。

1.HTML模板

我們需要一個div，裡面放置子元素。

<div class="loader circle-line small">
	 <span></span>
        <span></span>
       <span></span>
       <span></span>
      <span></span>
      <span></span>
</div>
複製程式碼

2.設定CSS樣式先製作靜態的loading 其實，是通過轉換不同span之間的位置和角度來實現：

.loader { position: relative; width: 5rem; height: 5rem;}.loader.circle-line span { position: absolute; display: inline-block; width: 1.5rem; height: .5rem; border-top-left-radius: .25rem; border-bottom-left-radius: .25rem; background: red;}.loader.circle-line span:nth-child(1) { top: 50%; left: 0; margin-top: -.25rem;}.loader.circle-line span:nth-child(2) { top: 1rem; left: .5rem; -webkit-transform: rotate(45deg); transform: rotate(45deg);}.loader.circle-line span:nth-child(3) { left: 50%; top: .5rem; margin-left: -.75rem; -webkit-transform: rotate(90deg); transform: rotate(90deg);}.loader.circle-line span:nth-child(4) { right: .5rem; top: 1rem; -webkit-transform: rotate(145deg); transform: rotate(145deg);}.loader.circle-line span:nth-child(5) { left: 3.5rem; top: 50%; margin-top: -.25rem; -webkit-transform: rotate(180deg); transform: rotate(180deg);}.loader.circle-line span:nth-child(6) { bottom: 1rem; right: .5rem; -webkit-transform: rotate(-145deg); transform: rotate(-145deg);}.loader.circle-line span:nth-child(7) { left: 50%; bottom: .5rem; margin-left: -15px; -webkit-transform: rotate(-90deg); transform: rotate(-90deg);}.loader.circle-line span:nth-child(8) { bottom: 1rem; left: .5rem; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
複製程式碼

靜態的loading已經有了，現在我們需要新增動畫讓其真實地動起來：

建立一個名為circle-line的動畫（改變透明度）：

@keyframes circle-line {
	0% {
		opacity: .05;
	}
	100% {
		opacity: .7;
	}
}

@-webkit-keyframes circle-line {
	0% {
		opacity: .05;
	}
	100% {
		opacity: .7;
	}
}
複製程式碼

然後給每一個線條新增circle-line動畫：

.loader.circle-line span {
	position: absolute;
	display: inline-block;
	width: 1.5rem;
	height: .5rem;
	border-top-left-radius: .25rem;
	border-bottom-left-radius: .25rem;
	background: #1ABC9C;
	opacity: .05;
	-webkit-animation: circle-line 1s ease infinite;
	animation: circle-line 1s ease infinite;
}
複製程式碼

要實現不同線條的間隔動畫，我們只需新增animation-delay延遲時間：

.loader.circle-line span:nth-child(1) {
	top: 50%;
	left: 0;
	margin-top: -.25rem;
	-webkit-animation-delay: .13s;
	animation-delay: .13s;
}

.loader.circle-line span:nth-child(2) {
	top: 1rem;
	left: .5rem;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-animation-delay: .26s;
	animation-delay: .26s;
}

.loader.circle-line span:nth-child(3) {
	left: 50%;
	top: .5rem;
	margin-left: -.75rem;
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
	-webkit-animation-delay: .39s;
	animation-delay: .39s;
}

.loader.circle-line span:nth-child(4) {
	right: .5rem;
	top: 1rem;
	-webkit-transform: rotate(145deg);
	transform: rotate(145deg);
	-webkit-animation-delay: .52s;
	animation-delay: .52s;
}

.loader.circle-line span:nth-child(5) {
	left: 3.5rem;
	top: 50%;
	margin-top: -.25rem;
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
	-webkit-animation-delay: .65s;
	animation-delay: .65s;
}

.loader.circle-line span:nth-child(6) {
	bottom: 1rem;
	right: .5rem;
	-webkit-transform: rotate(-145deg);
	transform: rotate(-145deg);
	-webkit-animation-delay: .78s;
	animation-delay: .78s;
}

.loader.circle-line span:nth-child(7) {
	left: 50%;
	bottom: .5rem;
	margin-left: -15px;
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
	-webkit-animation-delay: .91s;
	animation-delay: .91s;
}

.loader.circle-line span:nth-child(8) {
	bottom: 1rem;
	left: .5rem;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-animation-delay: 1.04s;
	animation-delay: 1.04s;
}
複製程式碼

circle-line動畫的週期時間正好是最後一個span的延遲時間。其他載入Loading也是同樣的原理，先是定義好靜態佈局，然後實現一個動畫（透明度變化、高度變化、大小變化等），最後將動畫新增給給每個子項，再新增動畫延遲時間即可。

三.紙片陰影

1.要實現實現陰影，先來了解一下box-shadow屬性：

box-shadow:[inset] x-offset y-offset blur-radius spread-radius color; 引數說明：

陰影型別：可選；如省略，預設是外陰影；它有且只有一個值“inset”，表示為內陰影； x-offset：陰影水平偏移量，它可以是正負值。如為正值，則陰影在元素的右邊；如其值為負值，則陰影在元素的左邊； y-offset：陰影垂直偏移量，它可以是正負值。如為正值，則陰影在元素的底部；如其值為負值時，則陰影在元素的頂部； blur-radius：陰影模糊半徑，可選，它只能是正值。如值為0，則陰影不具有模糊效果；它的值越大，陰影的邊緣就越模糊； spread-radius：陰影擴充套件半徑，可選，它可以是正負值。如為正值，則擴大陰影的尺寸；如為負值，則縮小陰影的尺寸；（記住這個屬性值，製作單邊陰影的關鍵） color：陰影顏色，可選，如不設定顏色，瀏覽器會取預設色，但各瀏覽器預設取色不一致。（經測試，在Safari上是半透明的，在chrome、firefox、ie上都是黑色的）。不推薦省略顏色值。注意：顏色（color）也可以放在最前面的，inset值也可以放在最後面；陰影並不會佔據空間，也就是說它不會陰影佈局。

2.HTML模板

只需一個div：

<div class="box shadow">紙片陰影</div>

3.設定CSS樣式

之前也已經已經介紹過box-shadow屬性的用法

// 四周陰影
.shadow {
  box-shadow:0 0 25px 0px rgba(0,0,0,0.22);
}
// 左上鄰邊陰影
.shadow-top-left {
  box-shadow:-10px -10px 25px 0px rgba(0,0,0,0.22);
}
// 右上鄰邊陰影
.shadow-top-right {
  box-shadow:10px -10px 25px 0px rgba(0,0,0,0.22);
}
// 右下鄰邊陰影
.shadow-bottom-right {
  box-shadow:10px 10px 25px 0px rgba(0,0,0,0.22);
}
// 左下鄰邊陰影
.shadow-bottom-left {
  box-shadow:-10px 10px 25px 0px rgba(0,0,0,0.22);
}
// 頂部單邊陰影
.shadow-top {
  box-shadow:0 -15px 10px -10px rgba(0,0,0,.22);
}
// 右側單邊陰影
.shadow-right {
  box-shadow:15px 0 10px -10px rgba(0,0,0,.22);
}
// 底部單邊陰影
.shadow-bottom {
  box-shadow:0 15px 10px -10px rgba(0,0,0,.22);
}
// 左側單邊陰影
.shadow-left {
  box-shadow:-15px 0 10px -10px rgba(0,0,0,.22);
}
複製程式碼

注意：當實現單邊陰影時，第四個數值都是負數，而且水平偏移量（第一個數值）或垂直偏移量（第二個數值）的絕對值都會比第四個數值的絕對值大。

四.純css版tooltip

我們平時用到的提示框tooltip大部分都是用js去寫的，其實用css3不需要一句js同樣可以達到這個效果的。

2.HTML模板 div和button都可，這裡的重點是data-tooltip和data-direction這兩個自定義屬性。

<button class="btn btn-tooltip tooltip" 
    data-tooltip="在下方" data-direction="down">
    在下方
</button>
複製程式碼

3.設定CSS樣式首先還是我們之前大量使用過的偽元素來寫出hover效果顯示的工具欄

.tooltip
{
    position: relative;
}
.tooltip:before
{
    position: absolute;
    content: '';
    border: 5px solid transparent;
}
.tooltip:after
{
    font-size: 14px;
    line-height: normal;
    position: absolute;
    padding: 5px 10px;
    /* 在 content裡使用HTML模板裡的data-tooltip屬性*/
    content: attr(data-tooltip);
    white-space: nowrap;
    color: #fff;
    border-radius: 3px;
    background: #383838;
}
複製程式碼

預設先用 visibility屬性隱藏tooltip

.tooltip:before,
.tooltip:after
{
    visibility: hidden;
    opacity: 0;
    z-index: 1000000;
    transition: .3s ease;
    transition-delay: 0ms;

/* 阻止tooltip元素不會成為滑鼠事件的target */
    pointer-events: none;
}
複製程式碼

然後hover讓tooltip顯示：

.tooltip:hover:before,
.tooltip:hover:after
{
    visibility: visible;
    opacity: 1;
}
複製程式碼

最後加點動畫：

[data-direction='down']:before
{
    top: -webkit-calc(100% - 5px);
    top:    -moz-calc(100% - 5px);
    top:         calc(100% - 5px);

    border-bottom-color: #383838;
}
[data-direction='down']:after
{
    top: -webkit-calc(100% + 5px);
    top:    -moz-calc(100% + 5px);
    top:         calc(100% + 5px);
}
[data-direction='down']:before,
[data-direction='down']:after
{
    left: 50%;
    -webkit-transform: translate3d(-50%,0,0);
    -moz-transform: translate3d(-50%,0,0);
    transform: translate3d(-50%,0,0);
}
複製程式碼

你不知道的css3(上） -- 用css3為你的元件新增風景
2018-11-27
CSSS3元件
你可能不知道的 CSS3 Animation
2019-04-04
CSSS3
你可能不知道的10個CSS3中的隱藏特性
2014-11-23
CSSS3
你不知道的前端元件庫
2019-11-28
前端元件
帶你玩轉css3的3D！
2016-07-28
CSSS33D
為你帶來靈感的 20 個 HTML5/CSS3 模板
2013-08-20
HTMLCSSS3
讓你心動的 HTML5 & CSS3 效果
2014-09-24
HTMLCSSS3
讓你心動的 HTML5 & CSS3 效果【附原始碼下載】
2014-09-02
HTMLCSSS3原始碼
css3中的@font-face你真的瞭解嗎
2020-06-13
CSSS3
你不知道的javascript，你不知道的奧祕
2016-06-03
JavaScript
為你的網站新增 htpps
2019-01-19
網站
css3新增屬性API
2015-07-11
CSSS3API
（高階）用CSS3新增的rem單位設定字型大小
2012-11-24
CSSS3REM
為你的 Flutter APP 新增互動性
2018-08-01
FlutterAPP
《你不知道的JavaScript》 (下) 讀書筆記
2019-02-16
JavaScript筆記
你不知道的 WebSocket
2020-07-28
Web
你不知道的CSS
2018-09-27
CSS
你不知道的JavaScript
2018-01-05
JavaScript
你也許不知道的Vuejs – 元件式開發
2019-03-04
VueJS元件
你也許不知道的Vuejs - 單檔案元件
2018-02-08
VueJS元件
你也許不知道的Vuejs - 元件式開發
2018-02-06
VueJS元件
佈局之: flex（CSS3新增）
2020-06-18
FlexCSSS3
css3新增哪些背景屬性
2021-09-11
CSSS3
你從不知道的 11 個 KDE 應用
2018-10-24
不知道這些，你以為你還能devops?
2020-06-14
dev
大牛帶你玩轉 CSS3 3D 技術
2019-03-10
CSSS33D
css3帶你實現3D轉換效果
2022-03-01
CSSS33D
[譯] 你不知道的 Node
2019-03-04
原型—-《你不知道的js》
2019-01-11
原型JS
JavaScript之你不知道的this
2018-11-14
JavaScript
你所不知道的css
2018-12-18
CSS
你不知道的.gitignore
2018-02-06
Git
你不知道的Event Loop
2018-01-26
OOP
你不知道的JavaScript（一）
2018-03-12
JavaScript
你不知道的JavaScript（二）
2018-03-13
JavaScript
你不知道的js坑
2018-04-17
JS
你所不知道的 POST
2018-04-21
你不知道的CSS（三）
2017-09-18
CSS

你不知道的css3(下） -- 用css3為你的元件新增可靠性

相關文章