宇波

東南大學網絡空間安全學院副教授

沒有關閉按鈕或按鈕不醒目，不能一鍵關閉；彈出頻率高，一次性彈出廣告數量多且占網頁尺寸過大；軟件安裝時未經提示默認勾選、強制捆綁安裝其他軟件……

上網時頻繁彈出的網絡彈窗有沒有曾讓你有棄網、砸電腦的沖動？

就在不久前，江蘇省消費者權益保護委員會（以下簡稱江蘇省消保委）召開新聞發布會，通報個人計算機（PC）端應用軟件網絡彈窗調查情況，上述網絡彈窗“頑疾”在此次調查中被集中披露。

8月2日，相關專家在接受科技日報記者采訪時表示，網絡彈窗在誕生之初，一度是一種創新的廣告形式，它以誘導用戶關閉彈窗的形式，吸引用戶的注意力。但隨著網絡彈窗的廣泛應用，巨大的經濟效益導致其被惡意濫用：搜集用戶個人數據、盜取用戶賬號信息、誘使用戶下載惡意軟件等屢見不鮮，既造成了視覺污染，也給用戶正常的互聯網生活、數據安全帶來了隱患。

廣告為何青睞彈窗 彈窗廣告轉化率要比其他廣告高很多

互聯網時代，網絡彈窗猶如“牛皮癬”，滲透進網絡世界的各個角落。在江蘇省消保委本次調查中，大部分互聯網消費者表示深受彈窗困擾。問卷調查結果顯示，78%的消費者表示遇到過網絡彈窗，裝機工具類網絡彈窗問題突出，其次是影音類、系統工具類；58%的消費者表示經常遇到購物廣告，其次是游戲廣告、影視廣告；52%的消費者表示網絡彈窗關閉按鈕不易發現；60%的消費者表示在PC端應用軟件安裝過程中經常被要求捆綁安裝其他軟件……

在江蘇省消保委公布的體驗調查結果中，從官方渠道下載的30款應用軟件中，有11款存在網絡彈窗問題，占調查總量的37%。其中360安全瀏覽器、暴風影音、酷我音樂等3款軟件彈窗彈出頻率較高。360安全瀏覽器15分鐘內彈出9次，暴風影音15分鐘內彈出6次，酷我音樂搜索一次彈一次。

“其實，網絡彈窗從其誕生之日起就與廣告密切相關。互聯網的商業模式大都依賴廣告收入，而廣告的效果則依賴受眾對廣告的注意力。”東南大學網絡空間安全學院副教授宋宇波向記者細數了網絡彈窗的前世今生。

他介紹，在上世紀90年代末，互聯網廣告的投放形式是將廣告嵌入在頁面內容中。但當時的廣告商擔心消費者在瀏覽負面內容時，會將廣告與消費者所閱讀的負面信息聯系在一起，從而對品牌造成不利影響。所以，當時的網頁托管網站trippod.com便利用網頁腳本程序，發明了一種在新開窗口發布廣告的方法，這也就是網絡彈窗的起源。

“與其他形式的網頁廣告展現方式不同，用戶必須手動關閉彈窗廣告，這更能吸引用戶的注意力，其廣告轉化率也比其他廣告類型高很多，因此彈窗廣告自誕生以后就備受青睞。特別是商務優惠類廣告和應用程序推廣安裝類廣告，尤其喜歡采用網絡彈窗的廣告形式。”宋宇波說。

阻止彈窗的技術難點在哪 作為網頁內容的組成部分很難被攔截

不過，隨著網絡彈窗的廣泛應用，巨大的經濟效益讓它逐漸走向了一條“歪路”，成為違法、低俗內容泛濫的溫床?！皬娭剖健闭宫F的性質，也對用戶造成了視覺污染，給用戶正常的網頁瀏覽、下載應用等行為造成了極大不便。

在宋宇波看來，除了影響互聯網生活外，網絡彈窗也對用戶的數據安全造成了嚴重影響。

“很多帶有網絡彈窗功能的軟件常駐后臺，會對用戶設備性能造成影響；惡意的網絡彈窗內容會誘導、致使用戶誤操作點擊惡意軟件，造成經濟損失。”宋宇波說，近年來，常見的利用網絡彈窗廣告的攻擊行為，包括搜集用戶個人數據、盜取個人賬號信息、誘使用戶下載惡意軟件等。

“避無可避”的網絡彈窗，從技術上看是如何實現的？

宋宇波說，網絡彈窗通常來說有三大類型，一是網站的網頁彈窗，二是電腦筆記本上運行軟件的桌面彈窗，三是智能手機上的App彈窗。

網頁彈窗通常是利用內嵌在網頁里的腳本程序實現；桌面彈窗則是通過駐留在后臺的軟件實現；而App彈窗由于受手機操作系統安全機制的限制，只能在用戶使用該App的時候展現。

“瀏覽器在21世紀初就出現了阻止網頁彈窗的功能，可允許用戶自行決定是否阻止網頁彈窗，但現在出現了新型彈窗技術，它使彈窗的打開方式發生了變化，導致原來阻止彈窗的技術失效。”宋宇波說，目前，懸停式廣告是網站網頁彈窗主要的技術形式，這是一種使用動態HTML、JavaScript等技術創建的彈出式廣告。它們“懸?！痹陧撁嫔希瑤缀醪浑S網頁滾動，由于懸停式廣告內容是作為網頁內容的組成部分存在，所以很難被傳統的彈出窗口攔截軟件過濾攔截。

“在3種類型的網絡彈窗中，目前針對桌面彈窗的攔截技術是比較成熟的，有很多專業軟件可以阻止桌面彈窗。但由于大部分用戶對專業攔截軟件缺乏了解，而國內主要的安全軟件廠商并不熱衷提供網絡彈窗攔截功能，造成了國內桌面彈出窗口泛濫的局面?！彼斡畈ū硎尽?/p>

此外，他指出，智能手機App彈窗目前是個盲區，由于智能手機操作系統的安全機制限制，App無法控制手機在后臺進行彈窗，通常是在用戶使用該App時出現彈窗，但這也造成了其他軟件無法阻止App的內部彈窗。

如何更好地約束彈窗廣告 提高違法成本、將不良行為納入征信體系

在我國，網絡彈窗并未構成直接的違法犯罪行為，《中華人民共和國廣告法》及《互聯網廣告管理暫行辦法》也只能以不影響用戶正常網絡體驗為條件，提出“確保一鍵關閉”的最低原則。

根據這個原則，未能顯著標明關閉標志、確保一鍵關閉的，對廣告主處5000元以上3萬元以下罰款；以欺騙方式誘使用戶點擊廣告內容的，或者未經允許，在用戶發送的電子郵件中附加廣告或者廣告鏈接的，責令改正，處1萬元以上3萬元以下的罰款。

“這對彈窗行為的約束其實是非常寬松的，與彈窗廣告所能帶來的巨大經濟利益相比，根本不值一提。違法成本較低，也是造成惡意網絡彈窗廣告泛濫的原因之一?！彼斡畈ńㄗh，應完善相關法律法規，提高違法成本，為治理彈窗廣告提供制度保障；同時提高監管力度，完善準入追責制度，建立多元開放化的監管體系，對互聯網廣告公司進行重點監管，將不良廣告行為納入征信體系。

“此外，要實現常態化治理，應對網絡彈窗廣告實施定期合規檢查及培訓整頓，以實現行業自治和規范監管；應為網民提供便利通道，鼓勵群眾舉報網絡彈窗，實現自下而上的全網防護?！彼斡畈ㄕf。

湖南科技大學人文學院教授黃洪珍則建議，相關部門要激勵軟件開發商研究系統軟件和應用軟件，運用科技甄別并過濾不良信息，在維護互聯網綠色安全的同時，帶動相關產業的發展。(本報記者 金 鳳)

來源：科技日報

var gulp=require('gulp');
var stylus=require('gulp-stylus');
var watch=require('gulp-watch');
var nib=require('nib');
var rename=require('gulp-rename');
var autoprefixer=require('gulp-autoprefixer');
var browserslist=['Android 2.3', 'Android >=4', 'Chrome >=20', 'Firefox >=24', 'Explorer >=8', 'iOS >=6', 'Opera >=12', 'Safari >=6'];
 gulp.src('./style/hover.styl')
 .pipe(stylus({
 compress:true,
 use: nib()
 }))
 .pipe(rename('hover.min.css'))//重命命
 .pipe(gulp.dest('./build/css/'));//壓縮到的文件夾

<link rel="stylesheet" href="./build/css/hover.min.css">
<a href="#" class="hvr_pulse_grow">Pulse Grow</a>

個網站收集了很多 CSS 加載動畫，代碼很簡單，效果很好，可以收藏以后查閱用。

關于 CSS Loaders

CSS Loaders 是一個收集了互聯網上很多加載動畫效果代碼的網站，其中包含了動畫效果的源代碼，方便像我們這樣的前端開發者來使用。

自從 CSS3 的動畫屬性得到主流瀏覽器的支持以后，我們經?？吹绞褂?CSS 實現的各種加載動畫效果，而這個網站就專門收集并且分類整理這些動畫效果，無論是學習或者是查閱，甚至是二次修改來實現定制的需求，都能很好地滿足我。

網站特色

• 收集了超過 500 個 web 動畫加載效果，五花八門，幾乎覆蓋我們所見過的所有動畫；
• 所有的動畫都是通過 CSS3 來實現，沒有一行 JS 代碼；
• 所有的動畫都只需要一個 dom 元素，開發調用很簡單，代碼也很簡潔。

CSS 動畫實現的 loading 有什么優勢？

以前常規的動畫加載效果是做一張 gif 格式的動圖，需要加載時顯示圖片，加載完成后隱藏圖片。這種原始的方式有幾個缺點：

1. 動圖占用空間大，而且很難壓縮；
2. 顯示效果不好，特別是在手機這種高清屏幕上，往往都會模糊；
3. 透明像素會有白邊，在非純色背景上顯示很糟糕；
4. 圖片確定后不能修改，如要要改變顏色、播放速度，需要重新制作。

這就是 gif 動圖的弊端，相反，CSS 實現的加載效果，不僅動畫流暢，還可以根據需要改變顏色和播放速度等，關鍵是占用空間很小。所以越來越多的開發者和設計師在前期規劃時，都會優先考慮 CSS 動畫來實現。

CSS Loaders 已經幫我們把非常多的加載效果都整理好了，是一個非常好用的加載動畫預覽和文檔網站。

開發上手

CSS Loaders 主頁是一個隨機的動畫效果，顯示了該動畫的 dom 結構代碼，非常簡潔：

<div class="loader"></div>

所有的動畫效果都是這個結構，然后我們鼠標懸停在動畫上，就會顯示「copy the css」按鈕，點擊就會復制這個 loader 的所有樣式，粘貼到我們的項目 css 中，動畫就生效了，使用非常簡單。比如常見的圓圈加載動畫的 CSS 源碼：

.loader {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 8px solid #514b82;
  animation:
    l20-1 0.8s infinite linear alternate,
    l20-2 1.6s infinite linear;
}
@keyframes l20-1{
   0%    {clip-path: polygon(50% 50%,0       0,  50%   0%,  50%    0%, 50%    0%, 50%    0%, 50%    0% )}
   12.5% {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100%   0%, 100%   0%, 100%   0% )}
   25%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 100% 100%, 100% 100% )}
   50%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
   62.5% {clip-path: polygon(50% 50%,100%    0, 100%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
   75%   {clip-path: polygon(50% 50%,100% 100%, 100% 100%,  100% 100%, 100% 100%, 50%  100%, 0%   100% )}
   100%  {clip-path: polygon(50% 50%,50%  100%,  50% 100%,   50% 100%,  50% 100%, 50%  100%, 0%   100% )}
}
@keyframes l20-2{ 
  0%    {transform:scaleY(1)  rotate(0deg)}
  49.99%{transform:scaleY(1)  rotate(135deg)}
  50%   {transform:scaleY(-1) rotate(0deg)}
  100%  {transform:scaleY(-1) rotate(-135deg)}
}

如果需要多個動畫效果，我們可以直接修改 .loader 這個 className，讓不同的動畫效果對應自己的 CSS，這是很基礎的 CSS 語法，這里就不展開說了。

網站的左邊做了不同動畫類型的分類，我們可以點擊切換去查閱。

免費開源說明

CSS Loaders 上所有動畫效果的代碼都是公開可見的，而且得益于 CSS3 強大的動畫支持，實現的代碼都很簡潔，我們直接復制使用就可以了。

↓↓點擊查看本次分享的網站。

CSS Loaders - 純 CSS 實現的各種動畫加載效果，代碼簡潔，全都只需要用一個元素｜那些免費的磚