宇波

东南大学网络空间安全学院副教授

没有关闭按钮或按钮不醒目，不能一键关闭；弹出频率高，一次性弹出广告数量多且占网页尺寸过大；软件安装时未经提示默认勾选、强制捆绑安装其他软件……

上网时频繁弹出的网络弹窗有没有曾让你有弃网、砸电脑的冲动？

就在不久前，江苏省消费者权益保护委员会（以下简称江苏省消保委）召开新闻发布会，通报个人计算机（PC）端应用软件网络弹窗调查情况，上述网络弹窗“顽疾”在此次调查中被集中披露。

8月2日，相关专家在接受科技日报记者采访时表示，网络弹窗在诞生之初，一度是一种创新的广告形式，它以诱导用户关闭弹窗的形式，吸引用户的注意力。但随着网络弹窗的广泛应用，巨大的经济效益导致其被恶意滥用：搜集用户个人数据、盗取用户账号信息、诱使用户下载恶意软件等屡见不鲜，既造成了视觉污染，也给用户正常的互联网生活、数据安全带来了隐患。

广告为何青睐弹窗 弹窗广告转化率要比其他广告高很多

互联网时代，网络弹窗犹如“牛皮癣”，渗透进网络世界的各个角落。在江苏省消保委本次调查中，大部分互联网消费者表示深受弹窗困扰。问卷调查结果显示，78%的消费者表示遇到过网络弹窗，装机工具类网络弹窗问题突出，其次是影音类、系统工具类；58%的消费者表示经常遇到购物广告，其次是游戏广告、影视广告；52%的消费者表示网络弹窗关闭按钮不易发现；60%的消费者表示在PC端应用软件安装过程中经常被要求捆绑安装其他软件……

在江苏省消保委公布的体验调查结果中，从官方渠道下载的30款应用软件中，有11款存在网络弹窗问题，占调查总量的37%。其中360安全浏览器、暴风影音、酷我音乐等3款软件弹窗弹出频率较高。360安全浏览器15分钟内弹出9次，暴风影音15分钟内弹出6次，酷我音乐搜索一次弹一次。

“其实，网络弹窗从其诞生之日起就与广告密切相关。互联网的商业模式大都依赖广告收入，而广告的效果则依赖受众对广告的注意力。”东南大学网络空间安全学院副教授宋宇波向记者细数了网络弹窗的前世今生。

他介绍，在上世纪90年代末，互联网广告的投放形式是将广告嵌入在页面内容中。但当时的广告商担心消费者在浏览负面内容时，会将广告与消费者所阅读的负面信息联系在一起，从而对品牌造成不利影响。所以，当时的网页托管网站trippod.com便利用网页脚本程序，发明了一种在新开窗口发布广告的方法，这也就是网络弹窗的起源。

“与其他形式的网页广告展现方式不同，用户必须手动关闭弹窗广告，这更能吸引用户的注意力，其广告转化率也比其他广告类型高很多，因此弹窗广告自诞生以后就备受青睐。特别是商务优惠类广告和应用程序推广安装类广告，尤其喜欢采用网络弹窗的广告形式。”宋宇波说。

阻止弹窗的技术难点在哪 作为网页内容的组成部分很难被拦截

不过，随着网络弹窗的广泛应用，巨大的经济效益让它逐渐走向了一条“歪路”，成为违法、低俗内容泛滥的温床。“强制式”展现的性质，也对用户造成了视觉污染，给用户正常的网页浏览、下载应用等行为造成了极大不便。

在宋宇波看来，除了影响互联网生活外，网络弹窗也对用户的数据安全造成了严重影响。

“很多带有网络弹窗功能的软件常驻后台，会对用户设备性能造成影响；恶意的网络弹窗内容会诱导、致使用户误操作点击恶意软件，造成经济损失。”宋宇波说，近年来，常见的利用网络弹窗广告的攻击行为，包括搜集用户个人数据、盗取个人账号信息、诱使用户下载恶意软件等。

“避无可避”的网络弹窗，从技术上看是如何实现的？

宋宇波说，网络弹窗通常来说有三大类型，一是网站的网页弹窗，二是电脑笔记本上运行软件的桌面弹窗，三是智能手机上的App弹窗。

网页弹窗通常是利用内嵌在网页里的脚本程序实现；桌面弹窗则是通过驻留在后台的软件实现；而App弹窗由于受手机操作系统安全机制的限制，只能在用户使用该App的时候展现。

“浏览器在21世纪初就出现了阻止网页弹窗的功能，可允许用户自行决定是否阻止网页弹窗，但现在出现了新型弹窗技术，它使弹窗的打开方式发生了变化，导致原来阻止弹窗的技术失效。”宋宇波说，目前，悬停式广告是网站网页弹窗主要的技术形式，这是一种使用动态HTML、JavaScript等技术创建的弹出式广告。它们“悬停”在页面上，几乎不随网页滚动，由于悬停式广告内容是作为网页内容的组成部分存在，所以很难被传统的弹出窗口拦截软件过滤拦截。

“在3种类型的网络弹窗中，目前针对桌面弹窗的拦截技术是比较成熟的，有很多专业软件可以阻止桌面弹窗。但由于大部分用户对专业拦截软件缺乏了解，而国内主要的安全软件厂商并不热衷提供网络弹窗拦截功能，造成了国内桌面弹出窗口泛滥的局面。”宋宇波表示。

此外，他指出，智能手机App弹窗目前是个盲区，由于智能手机操作系统的安全机制限制，App无法控制手机在后台进行弹窗，通常是在用户使用该App时出现弹窗，但这也造成了其他软件无法阻止App的内部弹窗。

如何更好地约束弹窗广告 提高违法成本、将不良行为纳入征信体系

在我国，网络弹窗并未构成直接的违法犯罪行为，《中华人民共和国广告法》及《互联网广告管理暂行办法》也只能以不影响用户正常网络体验为条件，提出“确保一键关闭”的最低原则。

根据这个原则，未能显著标明关闭标志、确保一键关闭的，对广告主处5000元以上3万元以下罚款；以欺骗方式诱使用户点击广告内容的，或者未经允许，在用户发送的电子邮件中附加广告或者广告链接的，责令改正，处1万元以上3万元以下的罚款。

“这对弹窗行为的约束其实是非常宽松的，与弹窗广告所能带来的巨大经济利益相比，根本不值一提。违法成本较低，也是造成恶意网络弹窗广告泛滥的原因之一。”宋宇波建议，应完善相关法律法规，提高违法成本，为治理弹窗广告提供制度保障；同时提高监管力度，完善准入追责制度，建立多元开放化的监管体系，对互联网广告公司进行重点监管，将不良广告行为纳入征信体系。

“此外，要实现常态化治理，应对网络弹窗广告实施定期合规检查及培训整顿，以实现行业自治和规范监管；应为网民提供便利通道，鼓励群众举报网络弹窗，实现自下而上的全网防护。”宋宇波说。

湖南科技大学人文学院教授黄洪珍则建议，相关部门要激励软件开发商研究系统软件和应用软件，运用科技甄别并过滤不良信息，在维护互联网绿色安全的同时，带动相关产业的发展。(本报记者 金 凤)

来源：科技日报

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 实现的各种动画加载效果，代码简洁，全都只需要用一个元素｜那些免费的砖