你不知道的css3(下） -- 用css3爲你的組件添加可靠性

時間  2019-11-06
標籤 不知道 css3 css 爲你 組件 添加 可靠性 欄目 CSS 简体版
原文   原文鏈接

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

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

鼠標劃過光影效果

1.HTML模板web

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

<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選擇器：bash

.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);
}
複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程