<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap{
position:absolute;
width: 400px;
border:1px solid black;
}
#mask{
height: 300px;
background:url(http://sandbox.runjs.cn/uploads/rs/142/wat3wtnz/dongzhi.jpg) lightblue;
-webkit-mask: url(http://sandbox.runjs.cn/uploads/rs/142/wat3wtnz/mask.png) no-repeat;
-webkit-mask-size:30px 20px;
/*animation: 2s maskPosition infinite alternate ;*/
}

@keyframes maskPosition{
0%{-webkit-mask-position:0 0;}
100%{-webkit-mask-position:1rem 1rem;}
}
</style>
</head>
<body>
<div class="wrap">
<div id="mask"></div>
</div>
<script>

</script>
</body>
</html>

</pre>

ps:

1 -webkit-mask-position 这个建议用rem来计算 不要用百分比计算 百分比不是按照图片的宽度来计算的

2 -webkit-mask-size 百分比是按照外面容器计算的 大小设置无限制的 (不设置为默认大小)

3 渐变属性不能做动画

4 实现照明灯 可以再参考http://newmiracle.cn/?p=1833这个

5 蒙版图片非透明地方显示 透明不显示

css3 mask遮罩动画(照明灯效果)的更多相关文章

  1. CSS3 mask 遮罩蒙版效果

    mask demo效果演示:http://dtdxrk.github.io/game/css3-demo/mask.html mask 的属性: -webkit-mask-image:url | gr ...

  2. css3 切换贞动画的效果，仿gif效果

    /*---第一组动画---*/ .cartonGif_1{ position: absolute; display: block; background:url("img/haihangzh ...

  3. 用于mask遮罩效果的图片配合resizableImage使用

    用于mask遮罩效果的图片配合resizableImage使用 效果: 作为素材用的图片: 源码: // // ViewController.m // Rect // // Created by Yo ...

  4. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  5. 使用 CSS3 制作一组超时尚的动画按钮效果

    通过 CSS3 的新特性,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享一些 CSS3 动画按钮效果.我们的想法是创建一个具有不同风格的一些动画链接元素,鼠标悬停时有动画效果和活 ...

  6. 3D Grid Effect – 使用 CSS3 制作网格动画效果

    今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的​​.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...

  7. 25个CSS3 渐变和动画效果教程

    随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站的建设变得简易,高效和快速.不过CSS3所提供的渐变功能有着显著的优点,特 ...

  8. Adobe Edge Animate –地球自转动画的实现，类似flash遮罩层的效果

    Adobe Edge Animate –地球自转动画的实现,类似flash遮罩层的效果 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 目前Edge的功能尚 ...

  9. jquery使用CSS3实现文字动画效果插件Textillate.js

    Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...

随机推荐

  1. 零基础：如何快速学习JavaScript，html+css技术

    前端开发要学的知识内容涉及的会很宽泛,虽然说主要是HTML.CSS和JavaScript这些基础知识点,但达妹今天想强调一下,学前端开发除了要学这些基础知识外,学员还要在这之上进行延伸和深入的去学,而 ...

  2. Web安全之爆破中的验证码识别~

    写爆破靶场的时候发现对于爆破有验证码的有点意思~这里简单总结下我们爆破有验证码的场景中几种有效的方法~~~ 0x01 使用现成工具 这里有pkav团队的神器PKAV HTTP Fuzzer 1.5.6 ...

  3. 全平台正向tcp端口转发工具rinetd的使用

    Linux下做地址NAT有很多种方法.比如haproxy.nginx的4层代理,linux自带的iptables等都能实现.其实,Linux下有一个叫rinetd的工具,安装简单,配置也不复杂. 下载 ...

  4. window下 phpstorm 打不开

    如果 window 上不能执行 strace 命令, 安装 Git Bash 工具. 切换到 phpstorm 安装的 bin 目录: D 盘的相关文件昨天被我删了!奇怪这文件怎么放到那里了? 换个路 ...

  5. shell数组（四）

    [root@ipha-dev71- exercise_shell]# cat test.sh #!/bin/bash my_array=(a b c d) echo "第一个元素为:${my ...

  6. java集合第一节，List简单介绍

    Java中List集合的常用方法   List接口是继承Collection接口,所以Collection集合中有的方法,List集合也继承过来. package 集合; import java.ut ...

  7. css定位 双飞翼

    <!doctype html><html><head><meta charset="utf-8"><title>双飞翼& ...

  8. 百万年薪python之路 -- 异常处理

    异常处理 1.错误的分类: 1.语法错误:(这种错误,根本过不了python解释器的语法检测,必须在程序执行前就改正) #语法错误示范一 if #语法错误示范二 def test: pass #语法错 ...

  9. Python 常见异常类型

    python标准异常 异常名称                                   描述 BaseException                         所有异常的基类Sy ...

  10. django-URL实例命名空间（十一）

    每生成一个地址,都是一个实例.使用实例命名空间,针对于一个app而言. book/views.py from django.http import HttpResponse from django.s ...