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 库,您可非常轻轻松地把这些动画效 ...
随机推荐
- 货物运输 51Nod - 1671
公元2222年,l国发生了一场战争. 小Y负责领导工人运输物资. 其中有m种物资的运输方案,每种运输方案形如li,ri.表示存在一种货物从li运到ri. 这里有n个城市,第i个城市与第i+1个城市相连 ...
- C#学习--SQL server数据库基本操作(连接、增、删、改、查)封装
写在前面: 在日常的工作中,通常一个项目会大量用的数据库的各种基本操作,因此小编几个常见的数据库的操作封装成了一个dll方便后续的开发使用.SQLserver数据库是最为常见的一种数据库,本文则主要是 ...
- unittest中的方法调用时报错ValueError: no such test method in <class 'mytestcase.MyTestCase'>: runTest
调用unittest中的方法时报错: ValueError: no such test method in <class 'mytestcase.MyTestCase'>: runTest ...
- 关于CSS Grid Layout的代码解释
.wrapper { display: grid; /*生成grid类型块级网格*/ grid-template-columns: repeat(3, 1fr); /*设置显示的列网格线,且重复3次1 ...
- 2019.4.22 python_Flag
想了很久 最后觉得还是对编程的知识点好好重新的拉一边 回炉重造并不可笑 虽然从C到java到php到python 有两年的时间了 但是很多知识点都是零零碎碎,没有花时间复习和记录 所以决定从pyth ...
- SDRAM
环境:STM32F769discovery板 SDRAM芯片:用的MT48LC4M32B2B5-6A 16Mbyte (sdram和flash一般标的容量都是bit) 硬件图: 第一步 配置FM ...
- php能在手机上运行吗
php能在手机上运行吗? php能在手机上运行.但是需要你的手机具有PHP运行环境. 比如一款安卓手机上面的php运行环境软件:anmpp. ANMPP是Android NGINX MYSQL PGS ...
- 4.Linux文件管理相关命令(上)
1.复制命令cp cp - copy files and directories 拷贝 文件 和 目录 -r 递归复制,通常用来复制目录 -p 保持复制源文件的属性 -v 显示复制的过程 1. 将当前 ...
- 题解 CF600E 【Lomsat gelral】
没有多少人用莫队做吗? 蒟蒻水一波莫队 这是一道树上莫队好题. 时间复杂度(\(n\sqrt{n}logn\)) 蒟蒻过菜,不会去掉logn的做法qaq 思路很简单: 1.dfs跑一下树上点的dfs序 ...
- kubectl get 后按2次tab键命令补全的失效原因分析
kubectl get 后按2次tab键命令补全的失效原因分析 2019/10/28 Chenxin a.bash客户端工具 在centos用户下, cd ~;echo "source &l ...