<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. 云计算之走进LINUX(一)

    引言 小比特的随笔: 亲爱的博友所有随笔部分记录的是小比特的一些学习笔记,阅读性不是太强仅供有基础的博友参考,对小白来说阅读起来可能会有些吃力.当然也可以参考啦!小比特将在文章部分提供详细的内容介绍供 ...

  2. wx.navigateTo、wx.redirectTo、wx.reLaunch、wx.switchTab和wx.navigateBack的区别

    wx.navigateTo.wx.redirectTo.wx.reLaunch.wx.switchTab和wx.navigateBack有什么区别呢? **wx.navigateTo:** 用于保留当 ...

  3. 玩转ADB命令（ADB命令使用大全）转载

    ADB是什么 Adb的全称为Android Debug Bridge:android调试桥梁,下图为Android官方对adb的介绍:可以看出,Android的初衷是用adb这样的一个工具来协助开发人 ...

  4. git的下载及简单使用一

    git 是世界上最先进的分布式版本控制系统 常用的git网站 GitHub gitee(码云) git的下载地址 https://git-scm.com/downloads 而后根据计算机的系统选择相 ...

  5. 对新手严重不友好的强者——Nginx那些俯拾皆是的坑

    1.if和后边的括号要隔一个空格,变量后面也要有空格. 2.location / 和location = / 的意味不一样.前面的是通用匹配,后面的匹配根节点访问请求,前面的使用不好很容易引发重定向过 ...

  6. 不安分的管家——Jenkins

    占个位,持续补充. 一.使用Jenkins进行自动化部署 一直以来关于xx框架/中间件的技术博客有个奇怪的事情.这类文章特点大而全,重复率高,读者阅读完毕基本从安装到放弃. 作为一个使用者,我只是为了 ...

  7. Vue中Class与Style如何动态绑定

    Class 可以通过对象语法和数组语法进行动态绑定: 对象语法: <div v-bind:class="{ active: isActive, 'text-danger': hasEr ...

  8. C#初始类和命名空间

    本节内容: 1.剖析Hello,World程序 1.1初始类(class)与名称空间(namespace) 2.类库的引用 2.1DLL的引用(黑盒引用) 2.2项目引用(白盒引用) 2.3建立自己的 ...

  9. Mybaits 源码解析 （二）----- 根据配置文件创建SqlSessionFactory（Configuration的创建过程）

    我们使用mybatis操作数据库都是通过SqlSession的API调用,而创建SqlSession是通过SqlSessionFactory.下面我们就看看SqlSessionFactory的创建过程 ...

  10. Swagger--解决日期格式显示为Unix时间戳格式 UTC格式

    在swagger UI模型架构上,字段日期显示为“日期”:“2018-10-15T09:10:47.507Z”但我需要将其作为“日期”:“2018-9-26 12:18:48”. tips:以下这两种 ...