【CSS】CSS特效集錦，視覺魔法的碰撞與融合（一）

時間  2019-11-06
標籤 CSS css 特效 集錦 視覺 碰撞 融合 欄目 CSS 简体版
原文   原文鏈接

前言

在本文中我講述了7種CSS的特效，它們也許看起來並不驚豔，可是我認爲卻足夠傳達本文的理念：編寫一些特殊的CSS樣式的時候須要不拘於常理，要用特殊的認識角度看待標籤和樣式屬性，從而用「繞個彎」的方式達到效果。css

一.浮光掠影

首先咱們看第一個實現效果：在鼠標浮動到圖片上方時，讓一片白影一閃而過。html

 

實現思路css3

  1. 畫一個豎直的長方形的白色div，設置opcity將其變爲半透明web

  2. 藉助transform:skewX將長方形變成等高的平行四邊形瀏覽器

  3. 白條div絕對定位，外層div相對定位，一開始left屬性默認是0app

  4. 在:hover僞元素中修改left值，例如left=600px（超出圖片長度），經過transition指定left和時間，造成過渡svg

圖示post

 

HTMLurl

 

<div class="flash">
        <div class="flash-bar"></div>
        <img src="{圖片地址}" />
</div>

 

CSSspa

 

.flash {
   position: relative;
   width: 500px;
}
.flash img {
    width: 100%;
}
.flash-bar {
   position: absolute;
   left:-100px;
   width: 20px;
   height: 100%;
   background: #fff;
   opacity: 0.5;
   transform: skewX(-30deg);
   transform-origin: 0 100%;
}
.flash:hover .flash-bar {
  left:900px;
  transition: left ease-in-out 1s;
}

 

 

 

二.發光球體

 

實現思路

讓一個球體散發光芒，一開始好像有點蒙，可是換個角度思考一下，光芒只是另外一種顏色的box-shadow而已，而後咱們經過animation讓它動起來就行了

 

HTML

<div class="light"></div>

CSS

@keyframes light {
    from {
       box-shadow:0px 0px 4px #f00;
    }
    to {
      box-shadow:0px 0px 16px #f00;
    }
}
.light {
  margin:300px;
  width: 100px;
  height: 100px;
  margin:20px;
  border-radius: 50%;
  animation: light 2s ease-in-out infinite alternate;
}

 

三.圓環進度條

很顯然，圓框是經過border去實現的，但具體怎麼作呢？

 

 

 

這個進度條，表面上看它是由一個div圓框組成，實則否則，它是由左右兩個半圓的div組成的，其中一個div轉動180度，而後另外一個div再轉180度。看一下下面的例子你就明白了,咱們把顏色調成藍色和紅色，以對比

 

咱們一步一步來解釋，首先咱們整個圓的外部是一個正方形，左右由兩個div,div-left和div-right組成，各佔一半，分別放左半圓和右半圓。並且兩個div分別設置overflow:hidden實現溢出隱藏，這樣的結果是，左邊的圓的右半邊被隱藏了，右邊的圓的左半邊被隱藏了。

 

 

並且更重要的是，兩個由於溢出被隱藏的半圓分別被塗上了藍色和紅色，而沒有溢出的兩個半圓的圓框則是透明的。因此咱們看到的初始的空進度條實際上是下面這樣的

 

 

這兩個圓框轉動的規則是：

  1. 左邊的藍色圓框先轉完0度到180度，這段時間裏紅色圓框是不動的

  2. 接下來紅色圓框轉完180度到360度，這段時間裏藍框則是不動的

（備註：咱們約定最上方爲0/360度）

轉到45度角的時候進度條是下面這樣子

 

 

轉角超過180時也是同理的，不過這個時候就輪到紅色框轉動了，藍框保持不動

 

代碼以下:

HTML

<div class="progress">
    <div class="wrapper-circle left">
        <div class="circle"></div>
    </div>
    <div class="wrapper-circle right">
        <div class="circle"></div>
    </div>
</div>

CSS

@keyframes left_cirlce_spin {
    0%,50% {
      transform: rotate(-45deg);
    }
    100%{
      transform: rotate(135deg); 
    }
}
@keyframes right_cirlce_spin {
    0% {
      transform: rotate(45deg);
    }
    50%,100%{
      transform: rotate(225deg); 
    }
}
.progress {
    overflow: hidden;
    width: 100px;
    height: 100px;
}
.progress .wrapper-circle {
    overflow: hidden;
    width: 50%;
    height: 100%;
}
.left {
    float: left;
}
.right {
    float: right;
}
.progress {
    margin: 20px;
}
.progress .circle {
    border-radius: 50%;
    width: 90px;
    height: 90px;
}
.progress .left .circle {
    float: left;
    border: 5px solid red;
    border-top-color: transparent;
    border-left-color: transparent;
    animation: left_cirlce_spin 4s linear infinite;
}

.progress .right .circle {
    float: right;
    border: 5px solid red;
    border-top-color: transparent;
    border-right-color: transparent;
    animation: right_cirlce_spin 4s linear infinite;
}

 

四.三角形

這個話題已是老生常談了，我第一個瞭解的比較有趣的CSS實現就是它。它是經過一個寬高設置爲0的div的border去實現的。

要實現三角形，首先咱們要改變內心對border形狀的刻板認知。border實際上是一個等腰梯形而不是長方形

 

 

當width和height被減少爲0，只有border的時候，border就從等腰梯形變成了等腰三角形：

 

 

而後咱們須要哪一塊三角形，就把剩餘的部分border都設爲transparent(透明)就能夠了

代碼很簡單，這裏就不加贅述了。

五.有色到透明的漸變

下面這張圖是從知乎的發現欄目上摘來的，很顯然它是利用漸變去實現的。思路也很簡單，主要是要有兩方面的認知：

    • 這張圖其實能夠分紅兩部分，右邊控制圖形和漸變，左邊就是一張純色背景，和漸變無關

    • 透明transparent也是一種顏色，也是漸變能夠設置的

 

 

代碼以下

HTML

<!-- 有色到透明的背景漸變 -->
<div class="background-gradient">
  <div class="mask"></div>
</div>

CSS

.background-gradient {
    background: rgb(44, 136, 207);
    position: relative;
    width: 500px;
    height: 200px;
}
.background-gradient .mask {
    background-image: linear-gradient(to right, rgb(44, 136, 207), transparent), url("https://pic1.zhimg.co
    m/50/v2-6c5aa2304a93b7fbaf903e3560543d7b_hd.jpg");
    background-position:center;
    background-blend-mode:normal;
    position: absolute;
    height: 100%;
    width: 180px;
    right: 0;
}

 

 

 

六.模糊效果和毛玻璃效果

知乎上，在發表文章或回答時引入連接就會有下面模糊的效果。它實際上是由CSS3的filter屬性去實現的

 

 <img class="blur" src="https://pic1.zhimg.com/50/v2-6c5aa2304a93b7fbaf903e3560543d7b_hd.jpg" />

 CSS

.blur {
    width: 100px;
    filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */
    
    -webkit-filter: blur(2px); /* Chrome, Opera */
       -moz-filter: blur(2px);
        -ms-filter: blur(2px);    
            filter: blur(2px);
    
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=2, MakeShadow=false); /* IE6~IE9 */
}

 

效果以下

 

要注意兼容，兼容各個瀏覽器的方法如上圖所示，順便一提這份代碼由大神張鑫旭提供,連接以下

CSS濾鏡讓圖片模糊（毛玻璃效果）

模糊效果和IOS中的毛玻璃效果仍是不同的。（其實我也感受毛玻璃效果比起模糊效果會漂亮不少），而IOS的毛玻璃效果能夠藉助backdrop-filter去實現，連接以下，你們能夠自行嘗試

backdrop-filter

CSS原生毛玻璃效果

不過注意，目前backdrop-filter在較高版本的瀏覽器纔會支持

七.斜角標籤

有的時候，在顯示一些時效性的UI數據的時候，例如一個商品卡片的打折標籤的時候，咱們可能會須要在卡片上顯示一個等腰梯形，那麼咱們該怎麼實現呢？

 

 

實際上，咱們能夠經過一個橫向的div經過transform：rotate逆時針旋轉45度角獲得它。以下圖所示，同時要注意給外層div設置overflow:hidden實現溢出隱藏。

 

 

除此以外，還須要進行簡單的計算，由於旋轉上去後，造成的是一個等腰直角三角形，因此標籤div的長度須要是它距離外層div頂部距離的√2(根號2)倍，如上圖所示。

代碼以下：

HTML

<div class="label">
     <div class="label-bar">打折</div>
     <img src="https://pic1.zhimg.com/50/v2-6c5aa2304a93b7fbaf903e3560543d7b_hd.jpg" />
</div>

CSS

.label {
    position: relative;
    overflow: hidden;
}
.label-bar {
    text-align: center;
    background: red;
    position: absolute;
    top:80px;
    left: 0px;
    width: 141px;
    height:20px;
    transform-origin: 0 100%;
    transform: rotate(-45deg);
}

技術總結

OK,下面進行CSS3的技術（坑點）總結~

 

1.轉換行爲(rotate,skew等)的2D座標系是這樣的，Y軸是向下的！原點是div的左上角。根據transform-origin能夠設置轉換（例如旋轉或者傾斜）的參考點，默認的參考點是（50%，50%），即中心。以下圖所示

 

2.改變大小的transform方法scale不接受百分比！ 只能是用數字表示倍數，如transform:scale(2),

transform:scale(0.5)等等

3.skewX和skewY在2D參考系裏至關於具備傾斜的效果，傾斜時候變成高度不變的平行四邊形。可是skewX和skewY具備相反的差別，skewX是X軸方向不動，Y軸方向逆時針傾斜， skewY是Y軸不動，X軸方向向順時針傾斜，二者連傾斜的方向都是不同的，具體能夠參考

https://link.zhihu.com/?target=http%3A//www.lvyestudy.com/css3/css3_9.5.aspx

4.transition和animation在使用最明顯的區別是什麼？

  1. transition的使用是很受限制的，而animation很是靈活，在不借助JS的前提下，它只能在CSS的僞元素中起相應的做用，由於transition只能對發生變化的屬性起做用，而除了僞元素外，其餘元素選擇器會出現後面的選擇器覆蓋前面選擇器屬性的現象，到最後屬性只有一個值，怎麼實現過渡呢？固然就不能夠了。

  2. 在不借助JS的前提下，transition只能來一遍，而animation能夠指定次數：1次，2次或無數次（指定infinite表示無限次數），還能夠指定方向(altertive，表示播放結束後倒退播放)

  3. 甚至animation還能夠經過百分比指定每一階段的細節變化，這一點transition就作不到了

本文完

 

知乎主頁和專欄

知乎主頁：https://www.zhihu.com/people/peng-hu-wan-56/activities

知乎專欄：  https://zhuanlan.zhihu.com/c_135367198

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