我們在瀏覽許多網站的時候會看見各種各樣的網頁，其中會有很多的動畫特效，令人眼前一亮。其實這些都是在HTML文件中編寫的一些特殊的CSS樣式，從而達到的動態的特殊效果。本文給大家帶來比較經典的3種CSS特效，也算是我們做出自己的特效前的啟蒙。

一、浮光掠影

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

實現思路

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

借助transform:skewX將長方形變成等高的平行四邊形

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

在:hover偽元素中修改left值，例如left=600px（超出圖片長度），通過transition指定left和時間，形成過渡。如圖所：”

HTML
<div class="flash">
????????<div class="flash-bar"></div>
????????<img src="{圖片地址}" /></div>
CSS
.flash {
???position: relative;
???width: 500px;}.flash img {
???width: 100%;}.flash-bar {
???position: absolute;
?? eft:-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實現溢出隱藏，這樣的結果是，左邊的圓的右半邊被隱藏了，右邊的圓的左半邊被隱藏了。

而且更重要的是，兩個因為溢出被隱藏的半圓分別被涂上了藍色和紅色，而沒有溢出的兩個半圓的圓框則是透明的。所以我們看到的初始的空進度條其實是下面這樣的

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

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

接下來紅色圓框轉完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;}

上述的3種CSS特效，它們也許看起來并不驚艷，但是我認為卻足夠傳達本文的理念：編寫一些特殊的CSS樣式的時候需要不拘于常理，要用特殊的認識角度看待標簽和樣式屬性，從而用屬于自己的方式達到效果，這和本站的CSS教程中所講述的內容也是相契合的。