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

nightZing發表於2018-11-27
CSSS3元件

寫在前面：上一篇介紹了下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來仿寫這個圖片效果。

仿loading動態效果

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>
複製程式碼

純css版tooltip

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

image.png

.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);
}
複製程式碼

相關文章