css实现剪切蒙版,CSS3“蒙版(剪切路径)”: clip-path

.box{width:400px;height:300px;position:relative;}

.box img{width:100%;height:100%;}

.mask{width:100%;height:100%;border:solid 5px red;box-sizing:border-box;position:absolute;top:0;left:0;-webkit-clip-path:polygon(0 0, 0 0, 0 0);/*蒙版形状(裁切路径)*/}

.clipleft{ -webkit-animation:ml 0.6s linear forwards;}

.clipright{ -webkit-animation:mr 0.6s linear forwards;}

@keyframes ml{

/*蒙版形状动画*/

from{-webkit-clip-path:polygon(400px 300px, 400px 300px, 400px 300px);}

to{-webkit-clip-path: polygon(400px 0, 0 300px, 400px 300px);}

}

@keyframes mr{

/*蒙版形状动画*/

from{-webkit-clip-path:polygon(0 0, 0 0, 0 0);}

to{-webkit-clip-path:polygon(0 0, 400px 0, 0 300px);}

}

无标题文档

$(".box").mouseenter(

function(){

$(".mask:first").addClass("clipleft")

$(".mask:last").addClass("clipright")

}

).mouseleave(

function(){

$(".mask:first").removeClass("clipleft")

$(".mask:last").removeClass("clipright")

}

)

css实现剪切蒙版,CSS3“蒙版(剪切路径)”: clip-path相关推荐

CSS制作类似 Photoshop 模糊蒙版效果
CSS制作类似 Photoshop 模糊蒙版效果引言不兼容IE的纯css实现代码实现代码实现原理兼容IE10,IE11的模糊蒙版效果,使用canvas 实现代码实现原理引言为了使一个在 ...
canvas路径剪切和判断是否在路径内
1.剪切路径 clip() var ctx=mycanvas.getContext('2d'); ctx.beginPath(); // 建一个矩形路径 ctx.moveTo(20,10) ctx.l ...
【前端开发基础】CSS基础知识以及CSS3
文章目录一.CSS层叠样式 (一) 目标 1.CSS简介 1.1 HTML的局限性 1.2 CSS网页的美容师 1.3 CSS语法规范 1.4 CSS代码风格 (1)样式格式书写 (2)样式大小写风 ...
linux整行剪切_linux整行剪切_linux 的复制/剪切命令用法
复制/拷贝: cp 文件名路径 cp hello.csv ./python/ml:把当前目录的hello.csv拷贝到当前目的python文件夹里的ml文件夹里 cp 源文件名 ...
[css] 举例说明在css3中怎么实现背景裁剪？
[css] 举例说明在css3中怎么实现背景裁剪? background-clip: border-box(默认,背景延伸至边框外沿,但是在边框的下层) padding-box(背景延伸至paddin ...
CSS：媒体查询 CSS3 Media Queries
定义和使用使用 @media 查询,你可以针对不同的媒体类型定义不同的样式. @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的. ...
CSS入门八、CSS3动画
零.文章目录文章地址个人博客-CSDN地址:https://blog.csdn.net/liyou123456789 个人博客-GiteePages:https://bluecusliyou.gi ...
CSS入门七、CSS3新特性
零.文章目录 CSS入门七.CSS3新特性 1.CSS3 的现状新增的CSS3特性有兼容性问题,ie9+才支持移动端支持优于 PC 端不断改进中应用相对广泛 2.CSS3 新增选择器 CSS3 ...
二叉树：路径之和 Path Sum
给定一个二叉树与整数sum,找出所有从根节点到叶结点的路径,这些路径上的节点值累加和为sum 即创建一个二叉树,要求二叉树中有一个路径从根节点到叶节点到路径加起来代表到和为给定的sum 如下二叉树 ...
路径规划(Path Planning)与运动规划(Motion Planning)
路径规划(Path Planning)与运动规划(Motion Planning) 评论区有个观点: 也可以把路径规划理解为运动规划的一份．我个人具体的认识是,特别是在实现的时候,路径规划我们强调的是 ...

css实现剪切蒙版,CSS3“蒙版(剪切路径)”: clip-path

css实现剪切蒙版,CSS3“蒙版(剪切路径)”: clip-path相关推荐

最新文章

热门文章