html网页中图片展示为碎片,图片碎片化飞来.html

*{margin: 0;padding: 0;}

.clip[style]{opacity: 0;}

.active .clip:not([style]){opacity: 0;animation: fadeIn .1s .4s both;}

.active .clip[style]{will-change: transform;animation: noTransform .5s both;}

@keyframes noTransform{to{opacity: 1;transform: translate3d(0, 0, 0) rotate(0);}}@keyframes fadeIn{from{opacity: 0;}

to{opacity: 1;}}.box{height: 190px;}

.text{position: absolute;width: 300px;}

.image{position: absolute;}

Blossom

1. 普通带文本的元素

魔兽要上映了，由于我从来没有玩过《魔兽世界》，所以无感。但是，有一点我是知道的：不管是联盟狗还是部落猪，最后都是为了艾泽拉斯！

2. 替换元素如图片

class="image clip" src="images/pic_04.png" style="-webkit-clip-path: polygon(0px 0px,0px 60px,30px 30px);-webkit-transform:translate(-93.57569031495791px,-194.6704412446288px) rotate(56deg);transform:translate(-93.57569031495791px,-194.6704412446288px) rotate(56deg);">

class="image clip" src="images/pic_04.png" style="-webkit-clip-path: polygon(60px 0px,30px 30px,60px 60px);-webkit-transform:translate(-282.79179367560545px,-40.21668232930593px) rotate(-223deg);transform:translate(-282.79179367560545px,-40.21668232930593px) rotate(-223deg);">

class="image clip" src="images/pic_04.png" style="-webkit-clip-path: polygon(0px 60px,0px 120px,30px 90px);-webkit-transform:translate(165.18190365893054px,-176.2375672076193px) rotate(-117deg);transform:translate(165.18190365893054px,-176.2375672076193px) rotate(-117deg);">

class="image clip" src="images/pic_04.png" style="-webkit-clip-path: polygon(60px 60px,30px 90px,60px 120px);-webkit-transform:translate(138.2384143287956px,-171.36152171933526px) rotate(-173deg);transform:translate(138.2384143287956px,-171.36152171933526px) rotate(-173deg);">

class="image clip" src="images/pic_04.png" style="-webkit-clip-path: polygon(0px 120px,0px 180px,30px 150px);-webkit-transform:translate(210.83158333793853px,198.62373160440785px) rotate(300deg);transform:translate(210.83158333793853px,198.62373160440785px) rotate(300deg);">

class="image clip" src="images/pic_04.png" style="-webkit-clip-path: polygon(60px 120px,30px 150px,60px 180px);-webkit-transform:translate(103.40274663785549px,-39.836454015838505px) rotate(-189deg);transform:translate(103.40274663785549px,-39.836454015838505px) rotate(-189deg);">

class="image clip" src="images/pic_04.png" style="-webkit-clip-path: polygon(0px 180px,0px 240px,30px 210px);-webkit-transform:translate(-12.402856892671466px,92.20210373667031px) rotate(120deg);transform:translate(-12.402856892671466px,92.20210373667031px) rotate(120deg);">

class="image clip" src="images/pic_04.png" style="-webkit-clip-path: polygon(60px 180px,30px 210px,60px 240px);-webkit-transform:translate(205.39702750109115px,-293.1903671730395px) rotate(127deg);transform:translate(205.39702750109115px,-293.1903671730395px) rotate(127deg);">

class="image clip" src="images/pic_04.png" style="-webkit-clip-path: polygon(60px 0px,60px 60px,90px 30px);-webkit-transform:translate(-149.6468029519382px,5.685081425326821px) rotate(292deg);transform:translate(-149.6468029519382px,5.685081425326821px) rotate(292deg);">

class="image clip" src="images/pic_04.png" style="-webkit-clip-path: polygon(120px 0px,90px 30px,120px 60px);-webkit-transform:translate(-179.05167392516987px,236.98885988992998px) rotate(74deg);transform:translate(-179.05167392516987px,236.98885988992998px) rotate(74deg);">

class="image clip" src="images/pic_04.png" style="-webkit-clip-path: polygon(60px 60px,60px 120px,90px 90px);-webkit-transform:translate(293.83004911128967px,148.5692280330945px) rotate(-209deg);transform:translate(293.83004911128967px,148.5692280330945px) rotate(-209deg);">

class="image clip" src="images/pic_04.png" style="-webkit-clip-path: polygon(120px 60px,90px 90px,120px 120px);-webkit-transform:translate(178.2082690762457px,141.60957575393286px) rotate(100deg);transform:translate(178.2082690762457px,141.60957575393286px) rotate(100deg);">

class="image clip" src="images/pic_04.png" style="-webkit-clip-path: polygon(60px 120px,60px 180px,90px 150px);-webkit-transform:translate(109.40583967611768px,-49.33942600044401px) rotate(220deg);transform:translate(109.40583967611768px,-49.33942600044401px) rotate(220deg);">

class="image clip" src="images/pic_04.png" style="-webkit-clip-path: polygon(120px 120px,90px 150px,120px 180px);-webkit-transform:translate(-260.7083397461732px,-36.34093129906479px) rotate(311deg);transform:translate(-260.7083397461732px,-36.34093129906479px) rotate(311deg);">

class="image clip" src="images/pic_04.png" style="-webkit-clip-path: polygon(60px 180px,60px 240px,90px 210px);-webkit-transform:translate(283.26852545940307px,-176.3548555136988px) rotate(-156deg);transform:translate(283.26852545940307px,-176.3548555136988px) rotate(-156deg);">

class="image clip" src="images/pic_04.png" style="-webkit-clip-path: polygon(120px 180px,90px 210px,120px 240px);-webkit-transform:translate(154.0543303046013px,230.88744767325986px) rotate(10deg);transform:translate(154.0543303046013px,230.88744767325986px) rotate(10deg);">

class="image clip" src="images/pic_04.png" style="-webkit-clip-path: polygon(120px 0px,120px 60px,150px 30px);-webkit-transform:translate(292.2243658097578px,-227.55643721246233px) rotate(238deg);transform:translate(292.2243658097578px,-227.55643721246233px) rotate(238deg);">

class="image clip" src="images/pic_04.png" style="-webkit-clip-path: polygon(180px 0px,150px 30px,180px 60px);-webkit-transform:translate(-137.84307118447927px,-67.67493887311575px) rotate(200deg);transform:translate(-137.84307118447927px,-67.67493887311575px) rotate(200deg);">

class="image clip" src="images/pic_04.png" style="-webkit-clip-path: polygon(120px 60px,120px 120px,150px 90px);-webkit-transform:translate(-224.99718486462666px,277.23203774530094px) rotate(-190deg);transform:translate(-224.99718486462666px,277.23203774530094px) rotate(-190deg);">

class="image clip" src="images/pic_04.png" style="-webkit-clip-path: polygon(180px 60px,150px 90px,180px 120px);-webkit-transform:translate(-243.30244549221698px,158.01344377597584px) rotate(36deg);transform:translate(-243.30244549221698px,158.01344377597584px) rotate(36deg);">

class="image clip" src="images/pic_04.png" style="-webkit-clip-path: polygon(120px 120px,120px 180px,150px 150px);-webkit-transform:translate(-227.77325296481953px,108.23729543619382px) rotate(193deg);transform:translate(-227.77325296481953px,108.23729543619382px) rotate(193deg);">

class="image clip" src="images/pic_04.png" style="-webkit-clip-path: polygon(180px 120px,150px 150px,180px 180px);-webkit-transform:translate(250.6723802125246px,-259.7544127688684px) rotate(310deg);transform:translate(250.6723802125246px,-259.7544127688684px) rotate(310deg);">

class="image clip" src="images/pic_04.png" style="-webkit-clip-path: polygon(120px 180px,120px 240px,150px 210px);-webkit-transform:translate(-130.5167891076636px,-244.40844935150724px) rotate(-8deg);transform:translate(-130.5167891076636px,-244.40844935150724px) rotate(-8deg);">

class="image clip" src="images/pic_04.png" style="-webkit-clip-path: polygon(180px 180px,150px 210px,180px 240px);-webkit-transform:translate(244.25522884405916px,-45.76460562507694px) rotate(11deg);transform:translate(244.25522884405916px,-45.76460562507694px) rotate(11deg);">

class="image clip" src="images/pic_04.png" style="-webkit-clip-path: polygon(180px 0px,180px 60px,210px 30px);-webkit-transform:translate(147.28490754556503px,85.88186480653826px) rotate(-307deg);transform:translate(147.28490754556503px,85.88186480653826px) rotate(-307deg);">

class="image clip" src="images/pic_04.png" style="-webkit-clip-path: polygon(240px 0px,210px 30px,240px 60px);-webkit-transform:translate(191.17618523557485px,-128.62568143764938px) rotate(-130deg);transform:translate(191.17618523557485px,-128.62568143764938px) rotate(-130deg);">

class="image clip" src="images/pic_04.png" style="-webkit-clip-path: polygon(180px 60px,180px 120px,210px 90px);-webkit-transform:translate(180.7925244224387px,-229.08328739912395px) rotate(326deg);transform:translate(180.7925244224387px,-229.08328739912395px) rotate(326deg);">

class="image clip" src="images/pic_04.png" style="-webkit-clip-path: polygon(240px 60px,210px 90px,240px 120px);-webkit-transform:translate(-190.61701917468548px,290.3488557439575px) rotate(14deg);transform:translate(-190.61701917468548px,290.3488557439575px) rotate(14deg);">

class="image clip" src="images/pic_04.png" style="-webkit-clip-path: polygon(180px 120px,180px 180px,210px 150px);-webkit-transform:translate(55.47288448961258px,-86.82724006126921px) rotate(70deg);transform:translate(55.47288448961258px,-86.82724006126921px) rotate(70deg);">

class="image clip" src="images/pic_04.png" style="-webkit-clip-path: polygon(240px 120px,210px 150px,240px 180px);-webkit-transform:translate(191.20400137465668px,38.79950005855242px) rotate(-297deg);transform:translate(191.20400137465668px,38.79950005855242px) rotate(-297deg);">

class="image clip" src="images/pic_04.png" style="-webkit-clip-path: polygon(180px 180px,180px 240px,210px 210px);-webkit-transform:translate(-254.4818216781095px,267.98195924976034px) rotate(-146deg);transform:translate(-254.4818216781095px,267.98195924976034px) rotate(-146deg);">

class="image clip" src="images/pic_04.png" style="-webkit-clip-path: polygon(240px 180px,210px 210px,240px 240px);-webkit-transform:translate(92.19027693916911px,240.90205381411144px) rotate(98deg);transform:translate(92.19027693916911px,240.90205381411144px) rotate(98deg);">

class="image clip" src="images/pic_04.png" style="-webkit-clip-path: polygon(240px 0px,240px 60px,270px 30px);-webkit-transform:translate(-159.48122638245562px,-72.1517420127058px) rotate(-338deg);transform:translate(-159.48122638245562px,-72.1517420127058px) rotate(-338deg);">

class="image clip" src="images/pic_04.png" style="-webkit-clip-path: polygon(300px 0px,270px 30px,300px 60px);-webkit-transform:translate(-214.30560219235147px,291.8938544347541px) rotate(221deg);transform:translate(-214.30560219235147px,291.8938544347541px) rotate(221deg);">

class="image clip" src="images/pic_04.png" style="-webkit-clip-path: polygon(240px 60px,240px 120px,270px 90px);-webkit-transform:translate(-182.38356678250605px,27.44389168238186px) rotate(-155deg);transform:translate(-182.38356678250605px,27.44389168238186px) rotate(-155deg);">

class="image clip" src="images/pic_04.png" style="-webkit-clip-path: polygon(300px 60px,270px 90px,300px 120px);-webkit-transform:translate(20.068383089445206px,-275.7475471016166px) rotate(25deg);transform:translate(20.068383089445206px,-275.7475471016166px) rotate(25deg);">

class="image clip" src="images/pic_04.png" style="-webkit-clip-path: polygon(240px 120px,240px 180px,270px 150px);-webkit-transform:translate(-101.45067990622141px,-67.86976616472664px) rotate(-144deg);transform:translate(-101.45067990622141px,-67.86976616472664px) rotate(-144deg);">

class="image clip" src="images/pic_04.png" style="-webkit-clip-path: polygon(300px 120px,270px 150px,300px 180px);-webkit-transform:translate(176.1129496661416px,174.38747174029845px) rotate(188deg);transform:translate(176.1129496661416px,174.38747174029845px) rotate(188deg);">

class="image clip" src="images/pic_04.png" style="-webkit-clip-path: polygon(240px 180px,240px 240px,270px 210px);-webkit-transform:translate(34.30560403303038px,289.8672581267914px) rotate(249deg);transform:translate(34.30560403303038px,289.8672581267914px) rotate(249deg);">

class="image clip" src="images/pic_04.png" style="-webkit-clip-path: polygon(300px 180px,270px 210px,300px 240px);-webkit-transform:translate(-186.90458001165854px,271.6968054552524px) rotate(330deg);transform:translate(-186.90458001165854px,271.6968054552524px) rotate(330deg);">

var eleText = document.getElementById('text'),

eleImage = document.getElementById('image');

// 碎片特效初始化

clipPath(eleText);

clipPath(eleImage);

一键复制

编辑

Web IDE

原始数据

按行查看

历史