css3 mask遮罩动画(照明灯效果)
<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遮罩动画(照明灯效果)的更多相关文章
- CSS3 mask 遮罩蒙版效果
mask demo效果演示:http://dtdxrk.github.io/game/css3-demo/mask.html mask 的属性: -webkit-mask-image:url | gr ...
- css3 切换贞动画的效果,仿gif效果
/*---第一组动画---*/ .cartonGif_1{ position: absolute; display: block; background:url("img/haihangzh ...
- 用于mask遮罩效果的图片配合resizableImage使用
用于mask遮罩效果的图片配合resizableImage使用 效果: 作为素材用的图片: 源码: // // ViewController.m // Rect // // Created by Yo ...
- CSS3中的动画效果记录
今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...
- 使用 CSS3 制作一组超时尚的动画按钮效果
通过 CSS3 的新特性,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享一些 CSS3 动画按钮效果.我们的想法是创建一个具有不同风格的一些动画链接元素,鼠标悬停时有动画效果和活 ...
- 3D Grid Effect – 使用 CSS3 制作网格动画效果
今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...
- 25个CSS3 渐变和动画效果教程
随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站的建设变得简易,高效和快速.不过CSS3所提供的渐变功能有着显著的优点,特 ...
- Adobe Edge Animate –地球自转动画的实现,类似flash遮罩层的效果
Adobe Edge Animate –地球自转动画的实现,类似flash遮罩层的效果 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 目前Edge的功能尚 ...
- jquery使用CSS3实现文字动画效果插件Textillate.js
Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...
随机推荐
- linux 基本操作积累
1 sed 命令,替换含有指定字符的一整行数据 sed -i 's/原字符串/替换后的字符串/g' ./文件名 (此命令会全局替换[整个文件内替换]原字符串) sed -i.bak 's/原字符串/替 ...
- net core WebApi——使用NPOI导入导出操作
目录 前言 NPOI 测试 小结 @ 前言 时间过得好快,在之前升级到3.0之后,就感觉好久没再动过啥东西了,之前有问到Swagger的中文汉化,虽说我觉得这种操作的意义不是太大,也是多少鼓捣了下,其 ...
- Idea项目注释规范设置
Idea项目注释规范设置文档 1.类注释: /** *@ClassName: ${NAME} *@Description: TODO *@Author: guohui *@Da ...
- XSS中的同源策略和跨域问题
转自 https://www.cnblogs.com/chaoyuehedy/p/5556557.html 1 同源策略 所谓同源策略,指的是浏览器对不同源的脚本或者文本的访问方式进行的限制.比如源a ...
- JZOJ5771【NOIP2008模拟】遨游
Description MWH寒假外出旅游,来到了S国.S国划分为N个省,第i个省有Ti座城市,编号分别为Ci1,Ci2,……CiTi(各省城市编号不会重复).所有城市间有M条双向的道路连接 ...
- Cocos2d-x 学习笔记(11.7) Repeat RepeatForever
1. 成员变量 Repeat: unsigned int _times; //create参数 unsigned int _total; //执行的次数 float _nextDt; //startW ...
- java与java web数组括号的不同
由于之前学JAVA SE数组时习惯了数组括号的写法,到了Web这里写了有点不太习惯了,赶快写篇博客加深一下印象哈 一. java和java web中的数组的不同 java: int[] arr = n ...
- nginx::环境搭建
ubuntu18.04 环境 1.需要gcc 环境,如果没有gcc环境,则需要安装 apt install gcc .安装pcre依赖库 PCRE(Perl Compatible Regular Ex ...
- Halcon安装注意事项
安装使用评估版本 下载并安装 在ihalcon中下载halcon,版本随意,因为我也不知道怎么选择适合自己的版本,那就下载一个比较新的版本,19.05版本. 安装目录默认在C:\Program Fil ...
- 2、Struts2开始深入
一.Struts2的配置文件加载顺序 1 .进入过滤器[StrutsPrepareAndExecuteFilter]跟代码,可以看到对应的文件加载顺序 进入StrtsPrepareAndExecute ...