clip-path的任意元素的碎片拼接动效
看了张大神的这篇文章后自己写的,兼容性不好clip-path要加-webkit-
css
#test img{position: absolute;}
.active .clip{
will-change: transform;
animation: clear_transform .5s both;
}
@keyframes clear_transform {
to {
opacity: ;
transform: translate3d(, , ) rotate() scale();
}
}
.active #image{
opacity: ;
animation: fadeIn .1s .4s both;
}
@keyframes fadeIn {
from { opacity: ; }
to { opacity: ; }
}
#repeat{position: absolute;top: 200px;}
html
<div id="test">
<img src="http://img.mswon.com/img.php?url=http://npic7.edushi.com/cn/zixun/zh-chs/2016-05/31/e-3053153-s1464644414872299.jpg" id='image'/>
</div>
<button id='repeat'>再来一次</button>
JS
test('image');//image-id
function test(ele){
var clip = {
parent:'',
id:ele,
src:'',
num:,//裁剪个数
x_tier:,//X轴要裁剪的个数
y_tier:,//Y轴要裁剪的个数
h:,//图片高度
w:,//图片宽度
y:,//要裁剪的高度40
x://要裁剪的宽度60
}
clip.parent = document.getElementById(ele).parentNode;//图片父级div
var img = document.getElementById(clip.id);
img.onload = function(){
clip.src = img.getAttribute('src');
clip.h = img.clientHeight;
clip.w = img.clientWidth;
clip.x = clip.w/clip.x_tier;
clip.y = clip.h/clip.y_tier;
clip.num = clip.num*clip.num;
start_clip();
}
function start_clip(){
var info = '<img src="'+clip.src+'" id="image" style="opacity:0;"/>';
for (var i = ;i<clip.x_tier;i++){
for (var j = ;j<clip.y_tier;j++) {//(x,y)
//裁剪
var d1 = (clip.x*j)+'px '+(clip.y*i)+'px';
var d2 = (clip.x*j)+'px '+(clip.y*i+clip.y)+'px';
var d3 = (clip.x*j+clip.x)+'px '+(clip.y*i+clip.y)+'px';
var d4 = (clip.x*j+clip.x)+'px '+(clip.y*i)+'px';
var css1 = '-webkit-clip-path: polygon('+d1+','+d2+','+d3+','+d4+');';
//旋转
var r = random()+'deg';
//位移
var t_x = random()+'px';
var t_y = random()+'px';
var t_z = random()+'px';
//缩放
var s = random();
var css2 = '-webkit-transform:translate3d('+t_x+','+t_y+','+t_z+') rotate('+r+') scale('+s+');';
info +='<img class="clip" src="'+clip.src+'" style="'+css1+''+css2+'"/>'
}
}
clip.parent.innerHTML = info;
clip.parent.className = 'active';
}
//随机数
function random(n){
var num = Number(Math.random()*n).toFixed();
return num;
}
document.getElementById('repeat').onclick = function(){
clip.parent.innerHTML = '<img src="'+clip.src+'" id="'+clip.id+'"/>';
test(clip.id);
}
}
clip-path的任意元素的碎片拼接动效的更多相关文章
- 基于clip-path的任意元素的碎片拼接动效(源自鑫空间)
一.实现原理. 效果本质上是CSS3动画,就是旋转transform:rotate和位移:transform:translate,只是旋转和位移的部件是三角碎片而已.三角是使用CSS3 clip-pa ...
- CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具,可以直接生成SVG代码以及配合Mask制作蒙板。
CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具,可以直接生成SVG代码以及配合Mask制作蒙板. CLIP PATH (MASK) GENERATO ...
- WPF-3D动效-文字球形环绕
原文:WPF-3D动效-文字球形环绕 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u013224722/article/details/81784 ...
- 玩转HTML5移动页面(动效篇)
原文:http://www.grycheng.com/?p=458 作为一名前端,在拿到设计稿时你有两种选择: 1.快速输出静态页面 2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来 作为一个有 ...
- 动效解析工厂:Mask 动画
转载自:http://www.cocoachina.com/ios/20160214/15250.html 前言:很多动效都是多种动画的组合,有时候你可能只是需要其中某个动画,但面对庞杂的代码库或是教 ...
- iOS开发之 Lottie -- 炫酷的动效
动效在软件开发中非常常见,炫酷的动画能提升应用的B格,然而由设计师的设计转化成程序猿GG的代码是个非常"痛苦"的过程.对于复杂动画,可能要花费很多时间去研究和实现.Lottie 的 ...
- 新版MATERIAL DESIGN 官方动效指南(三)
运动 Material design 的动效会被类似真实世界中的力的影响,类似重力. 物体在屏幕内的运动 屏幕内物体在两点之间的运动,是沿着一条自然.凹陷的弧线.屏幕上所有的运动都可以使用标准曲线. ...
- QQ音乐的动效歌词是如何实践的?
本文由云+社区发表 作者:QQ音乐技术团队 一. 背景 1. 现状 歌词浏览已经成为音乐app的标配,展示和动画效果也基本上大同小异,主要是单行的逐字染色的卡拉OK效果和多行的滚动效果.当然,我们也不 ...
- iOS动画进阶 - 实现炫酷的上拉刷新动效
移动端訪问不佳,请訪问我的个人博客 近期撸了一个上拉刷新的小轮子.仅仅要遵循一个协议就能自己定义自己动效的上拉刷新和载入,我自己也写了几个动效进去,以下是一个比較好的动效的实现过程 先上效果图和git ...
随机推荐
- 用pthon来写个跳板机
用pthon来写个跳板机 1.需求 程序一:1.后台管理- 堡垒机上创建用户和密码(堡垒机root封装的类,UserProfile表)- .bashrc /usr/bin/python3 /dat ...
- Sencha Touch+PhoneGap打造超级奶爸之喂养记(一) 源码免费提供(转)
起源 非常高兴我的宝宝健康平安的出生了.对于初次做奶爸的我,喜悦过后,面临着各中担心,担心宝宝各项指标是否正常.最初几天都是在医院待着,从出生那一天开始,护士妹妹隔一段时间就会来问宝宝的喂奶,大小便, ...
- 通过直接编码添加折线图到ChartControl
https://documentation.devexpress.com/#WindowsForms/CustomDocument2976 ChartControl lineChart = new C ...
- 第一章 spring起步
点击 网址 http://start.spring.io/ 就可以获得spring-boot的项目结构. 如下: 将项目解压到自己的项目中,然后找到mian函数所在启动类.运行.出现: 表示已经运行了 ...
- WeakHashMap 理解
WeakHashMap 通过 expungeStaleEntries 这个函数的来实现:移除其内部不用的条目,从而达到自动释放内存的目的. 基本上只要对 WeakHashMap 的内容进行访问就会调用 ...
- win10激活命令
以管理员方式打开命令提示符输入以下3条命令slmgr /ipk W269N-WFGWX-YVC9B-4J6C9-T83GX 按回车slmgr /skms 54.223.212.31 按回车slmgr ...
- ES(2): Build ES Cluster on Azure VM
目录: 系统环境准备 安装ES集群 安装Kibana 安装x-pack 安装head 系统环境准备 参见: HDP2.4安装(二):Centos7配置 修改network: 修改hosts: 配置ss ...
- oracle锁表查询
ORACLE EBS操作某一个FORM界面,或者后台数据库操作某一个表时发现一直出于"假死"状态,可能是该表被某一用户锁定,导致其他用户无法继续操作 复制代码代码如下: --锁表查 ...
- 【Spring学习笔记-MVC-6】SpringMVC 之@RequestBody 接收Json数组对象
作者:ssslinppp 1. 摘要 程序流程: 前台使用ajax技术,传递json字符串到后台: 后台使用Spring MVC注解@RequestBody 接受前台传递的json字符串, ...
- Appscan安装问题记录 + 最后问题解决的方法 和安装步骤
最后环节有问题,无法创建常规任务,腰折, 估计是在安装环节不可以忽略下面的报错,有空解决一下这个问题 解决: 安装了一个虚拟机W7系统 可以安装成功 appscan9.0.3要W8的系统 最后装了ap ...