查看: 2243|回复: 7

[HTML5动画] html5 3D爆炸特效适合节日庆典(7种图案)

[复制链接]
发表于 2019-8-1 09:41:59 | 显示全部楼层 |阅读模式

html5 3D爆炸特效适合节日庆典

html5 3D爆炸特效适合节日庆典



简要教程


这是一款基于three.js的3D爆炸特效。该特效实现3d物体爆炸成碎片的效果,可以通过鼠标点击或鼠标移动来触发效果。

使用方法


在页面中引入下面的文件(js插件)。


  1. <script src="js/ico.js"></script>
  2.                 <script src="js/TweenMax.min.js"></script>
  3.                 <script src="js/charming.min.js"></script>
  4.                 <script src="js/demo.js"></script>
复制代码

html



html代码
  1. <p class="frame__credits">Inspired by <a href="https://dribbble.com/shots/6019111-Kubrick-Life-Website-3D-Motion" target="_blank">Kubrick Life Website: 3D Motion</a></p>
  2.                                 <div class="frame__demos">
  3.                                         <a href="index.html" class="frame__demo frame__demo--current">Demo 1</a>
  4.                                         <a href="index2.html" class="frame__demo">Demo 2</a>
  5.                                         <a href="index3.html" class="frame__demo">Demo 3</a>
  6.                                         <a href="index4.html" class="frame__demo">Demo 4</a><br/>
  7.                                         <a href="index-icosahedron.html" class="frame__demo">Icosahedron</a>
  8.                                         <a href="index-heart.html" class="frame__demo">Heart</a>
  9.                                         <a href="index-egg.html" class="frame__demo">Egg</a>
  10.                                         <a href="index-brain.html" class="frame__demo">Brain</a>
  11.                                 </div>
  12.                                 <div class="frame__deco">
  13.                                         <span class="frame__deco-inner">Amnesia - Bogotá</span>
  14.                                 </div>
  15.                                 
  16.                         </div><!-- /frame -->
  17.                         <div class="content">
  18.                                 <div class="content__item">
  19.                                         <button class="content__button">Take me in</button>
  20.                                 </div>
  21.                                 <div class="content__item content__item--details">
  22.                                         <h3 class="content__location">Bogotá</h3>
  23.                                         <h1 class="content__title">Amnesia</h1>
  24.                                         <p class="content__date">July 14 — 15</p>
  25.                                 </div>
  26.                                 <div class="content__item content__item--details content__item--columns">
  27.                                         <div class="content__inner">
  28.                                                 <span class="content__inner-item content__inner-item--date">14</span>
  29.                                                 <span class="content__inner-item">DJ Madow</span>
  30.                                                 <span class="content__inner-item">Franklin Doe</span>
  31.                                                 <span class="content__inner-item">Josh Z</span>
  32.                                                 <span class="content__inner-item">Stevvy</span>
  33.                                                 <span class="content__inner-item">Supernova</span>
  34.                                                 <span class="content__inner-item">Kiz</span>
  35.                                                 <span class="content__inner-item">BrickX</span>
  36.                                                 <span class="content__inner-item">Miss Kara</span>
  37.                                                 <span class="content__inner-item">Beatlove</span>
  38.                                                 <span class="content__inner-item">DJ Oxymoron</span>
  39.                                                 <span class="content__inner-item">Couture</span>
  40.                                                 <span class="content__inner-item">The Wild B</span>
  41.                                                 <span class="content__inner-item">Honey</span>
  42.                                                 <span class="content__inner-item">DJ K</span>
  43.                                                 <span class="content__inner-item">Frankie</span>
  44.                                                 <span class="content__inner-item">Soundfreak</span>
  45.                                                 <span class="content__inner-item">Grind</span>
  46.                                         </div>
  47.                                         <div class="content__inner">
  48.                                                 <span class="content__inner-item content__inner-item--date">15</span>
  49.                                                 <span class="content__inner-item">Fan C</span>
  50.                                                 <span class="content__inner-item">The Kid</span>
  51.                                                 <span class="content__inner-item">Nelly</span>
  52.                                                 <span class="content__inner-item">Bubblegum</span>
  53.                                                 <span class="content__inner-item">Hot Monogram</span>
  54.                                                 <span class="content__inner-item">DJ Maximus</span>
  55.                                                 <span class="content__inner-item">Laura Gambler</span>
  56.                                                 <span class="content__inner-item">Starduust</span>
  57.                                                 <span class="content__inner-item">General XYZ</span>
  58.                                                 <span class="content__inner-item">Frank The Tank</span>
  59.                                                 <span class="content__inner-item">Pestcontrol</span>
  60.                                                 <span class="content__inner-item">Free Room</span>
  61.                                         </div>
  62.                                 </div>
  63.                         </div>
复制代码

css


css代码
  1. article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
  2. *,
  3. *::after,
  4. *::before {
  5.         box-sizing: border-box;
  6. }

  7. :root {
  8.         font-size: 14px;
  9. }

  10. body {
  11.         --color-text: #e0e0e0;
  12.         --color-text-secondary: #5e6262;
  13.         --color-bg: #151616;
  14.         --color-link: #5e6262;
  15.         --color-link-hover: #e0e0e0;
  16.         --color-date: #e0e0e0;
  17.         color: var(--color-text);
  18.         background-color: var(--color-bg);
  19.         font-family: Futura, "futura-pt", Arial, sans-serif;
  20.         -webkit-font-smoothing: antialiased;
  21.         -moz-osx-font-smoothing: grayscale;
  22. }

  23. .demo-3 {
  24.         --color-text: #f58d13;
  25.         --color-date: #5e6262;
  26. }

  27. .demo-4 {
  28.         --color-text: #298c86;
  29.         --color-date: #5e6262;
  30. }

  31. /* Page Loader */
  32. .js .loading::before {
  33.         content: '';
  34.         position: fixed;
  35.         z-index: 100000;
  36.         top: 0;
  37.         left: 0;
  38.         width: 100%;
  39.         height: 100%;
  40.         background: var(--color-bg);
  41. }

  42. .js .loading::after {
  43.         content: '';
  44.         position: fixed;
  45.         z-index: 100000;
  46.         top: 50%;
  47.         left: 50%;
  48.         width: 60px;
  49.         height: 60px;
  50.         margin: -30px 0 0 -30px;
  51.         pointer-events: none;
  52.         border-radius: 50%;
  53.         opacity: 0.4;
  54.         background: var(--color-link);
  55.         animation: loaderAnim 0.7s linear infinite alternate forwards;
  56. }

  57. @keyframes loaderAnim {
  58.         to {
  59.                 opacity: 1;
  60.                 transform: scale3d(0.5,0.5,1);
  61.         }
  62. }

  63. a {
  64.         text-decoration: none;
  65.         color: var(--color-link);
  66.         outline: none;
  67. }

  68. a:hover,
  69. a:focus {
  70.         color: var(--color-link-hover);
  71.         outline: none;
  72. }

  73. #container {
  74.         width: 100vw;
  75.         height: 100vh;
  76.         left: 0;
  77.         top: 0;
  78.         position: fixed;
  79.         z-index: -1;
  80. }

  81. canvas {
  82.         display: block;
  83. }

  84. .frame {
  85.         padding: 3rem 5vw;
  86.         text-align: center;
  87.         position: relative;
  88.         z-index: 1000;
  89. }

  90. .demo-1 .frame,
  91. .demo-2 .frame,
  92. .demo-3 .frame,
  93. .demo-4 .frame {
  94.         opacity: 0;
  95. }

  96. .frame__deco {
  97.         margin-top: 10vh;
  98. }

  99. .frame__deco span {
  100.         position: relative;
  101.         display: inline-block;
  102. }

  103. .frame__deco span::after {
  104.         content: '';
  105.         width: 100%;
  106.         height: 100%;
  107.         position: absolute;
  108.         top: 0;
  109.         left: 0;
  110.         transform-origin: 0% 50%;
  111.         background: var(--color-text);
  112.         transition: transform 0.5s cubic-bezier(0.2,1,0.3,1);
  113. }

  114. .frame__deco--hide span::after {
  115.         transform: scale3d(0,1,1);
  116. }

  117. .frame__title {
  118.         font-size: 1rem;
  119.         margin: 0 0 1rem;
  120.         font-weight: normal;
  121. }

  122. .frame__links {
  123.         display: inline;
  124. }

  125. .frame__demos {
  126.         margin: 1rem 0;
  127. }

  128. .frame__demos a,
  129. .frame__links a {
  130.         display: inline-block;
  131.         margin: 0 1rem 1rem 1rem;
  132. }

  133. .frame__demo--current,
  134. .frame__demo--current:hover {
  135.         color: var(--color-text);
  136.         text-decoration: underline;
  137. }

  138. .content {
  139.         display: grid;
  140.         grid-template-columns: 100%;
  141.         grid-auto-rows: 100%;
  142.         width: 100vw;
  143.         height: calc(100vh - 13rem);
  144.         position: relative;
  145.         justify-items: center;
  146.         text-align: center;
  147. }

  148. .js .content__item {
  149.         grid-area: 1 / 1 / 2 / 2;
  150. }

  151. .js .content__item > * {
  152.         opacity: 0;
  153.         pointer-events: none;
  154. }

  155. .content__item--details {
  156.         font-family: titling-gothic-fb-wide, sans-serif;
  157. }

  158. .content__location {
  159.         margin: 0;
  160.         font-weight: 300;
  161.         color: var(--color-text-secondary);
  162. }

  163. .content__title {
  164.         font-weight: 700;
  165.         font-size: 9vw;
  166.         margin: 0;
  167. }

  168. .js .content__item .content__title {
  169.         opacity: 0;
  170. }

  171. .content__title span {
  172.         display: inline-block;
  173.         opacity: 0;
  174. }

  175. .demo-2 .content__title span {
  176.         transform-origin: 0% 50%;
  177. }

  178. .demo-3 .content__title span {
  179.         transform-origin: 50% 0%;
  180. }

  181. .content__date {
  182.         font-size: 3rem;
  183.         font-weight: 700;
  184.         margin: 1rem 0 0 0;
  185.         color: var(--color-date);
  186. }

  187. .content__item--columns {
  188.         padding: 0 4rem;
  189.         width: 100%;
  190.         font-size: 1.5rem;
  191. }

  192. .content__inner {
  193.         text-align: left;
  194.         list-style: none;
  195.         padding: 0;
  196.         margin: 2rem 0 0 0;
  197.         display: block;
  198. }

  199. .content__inner-item {
  200.         display: inline;
  201.         white-space: nowrap;
  202.         font-weight: 700;
  203. }

  204. .content__inner-item--date {
  205.         display: block;
  206.         margin: 0 0 1.5rem;
  207.         font-size: 2rem;
  208. }

  209. .content__inner-item:nth-child(3n-1) {
  210.         font-family: titling-gothic-fb-narrow, sans-serif;
  211.         font-weight: 100;
  212.         text-transform: uppercase;
  213. }

  214. .content__inner-item:nth-child(3n) {
  215.         font-family: titling-gothic-fb-extended, sans-serif;
  216.         font-weight: 200;
  217. }

  218. .content__button {
  219.         padding: 0;
  220.         margin: 0;
  221.         background: none;
  222.         border: 0;
  223.         color: var(--color-text);
  224.         cursor: pointer;
  225.         font-size: 1.25rem;
  226.         font-family: titling-gothic-fb-wide, sans-serif;
  227.         font-weight: 700;
  228.         position: relative;        
  229. }

  230. .content__button::after {
  231.         content: '';
  232.         position: absolute;
  233.         width: 100%;
  234.         height: 2px;
  235.         background: currentColor;
  236.         left: 0;
  237.         top: 100%;
  238.         opacity: 0;
  239.         transition: transform 0.3s, opacity 0.3s;
  240.         transform: scale3d(0,1,1);
  241.         transform-origin: 0% 50%;
  242. }

  243. .content__button:hover::after {
  244.         opacity: 1;
  245.         transition: transform 0.3s, opacity 0.1s;
  246.         transform: scale3d(1,1,1);
  247. }


  248. .js .content__item .content__button {
  249.         opacity: 1;
  250.         pointer-events: auto;
  251. }

  252. .content__button:focus {
  253.         outline: none;
  254. }

  255. @media screen and (min-width: 53em) {
  256.         .frame {
  257.                 position: fixed;
  258.                 text-align: left;
  259.                 z-index: 10000;
  260.                 top: 0;
  261.                 left: 0;
  262.                 display: grid;
  263.                 align-content: space-between;
  264.                 width: 100%;
  265.                 max-width: none;
  266.                 height: 100vh;
  267.                 padding: 3rem 4rem;
  268.                 pointer-events: none;
  269.                 grid-template-columns: 40% 20% 40%;
  270.                 grid-template-rows: auto auto auto;
  271.                 grid-template-areas: 'deco demos demos'
  272.                                                         '... ... ...'
  273.                                                         'title title credits';
  274.         }
  275.         .frame__deco {
  276.                 justify-self: start;
  277.                 margin: 0;
  278.         }
  279.         .frame__title-wrap {
  280.                 grid-area: title;
  281.                 display: flex;
  282.                 justify-content: end;
  283.         }
  284.         .frame__title {
  285.                 margin: 0 8vw 0 0;
  286.         }
  287.         .frame__credits {
  288.                 grid-area: credits;
  289.                 margin: 0;
  290.                 justify-self: end;
  291.         }
  292.         .frame__demos {
  293.                 margin: 0;
  294.                 grid-area: demos;
  295.                 justify-self: end;
  296.                 text-align: right;
  297.         }
  298.         .frame__demos a {
  299.                 pointer-events: auto;
  300.                 margin: 0 0 1rem 1rem;
  301.         }
  302.         .frame__credits a {
  303.                 pointer-events: auto;
  304.         }
  305.         .frame__links a {
  306.                 pointer-events: auto;
  307.                 margin: 0 0 0 1rem;
  308.         }
  309.         .frame__links a:not(:last-child)::after {
  310.             content: '|';
  311.             color: var(--color-text);
  312.             opacity: 0.1;
  313.             margin: 0 0 0 1rem;
  314.         }
  315.         .content {
  316.                 height: 100vh;
  317.                 justify-content: center;
  318.                 align-items: center;
  319.         }
  320.         .content__inner {
  321.                 margin: 0;
  322.         }
  323.         .content__item--columns {
  324.                 font-size: 2.15rem;
  325.                 display: grid;
  326.                 grid-template-rows: 100%;
  327.                 grid-template-columns: repeat(2, calc(50% - 2rem));
  328.                 padding: 0 4rem;
  329.                 grid-gap: 4rem;
  330.         }
  331. }
复制代码
源码下载:

游客,如果您要下载源码或者查看隐藏内容请回复

回复

使用道具 举报

发表于 2019-8-1 13:49:02 | 显示全部楼层
这个爆炸效果确实6666666666
回复 支持 反对

使用道具 举报

发表于 2019-8-19 13:38:54 | 显示全部楼层
厉害了  下载来看看好东西厉害了  下载来看看好东西厉害了  下载来看看好东西
回复 支持 反对

使用道具 举报

发表于 2019-9-7 23:10:04 手机频道 | 显示全部楼层
还好还好哈哈哈哈哈哈哈哈
回复 支持 反对

使用道具 举报

发表于 2019-9-20 14:29:48 | 显示全部楼层
这个H5做的真棒,很优秀啊
回复 支持 反对

使用道具 举报

发表于 2019-9-27 01:22:45 | 显示全部楼层
6666666很赞
回复 支持 反对

使用道具 举报

发表于 2019-10-22 15:26:14 | 显示全部楼层
js在哪里呢
回复 支持 反对

使用道具 举报

发表于 2019-12-4 20:44:43 | 显示全部楼层
感谢分享,效果很棒
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

关闭

网站推荐上一条 /1 下一条



邮箱:[email protected] QQ:791577401 木子牛HTML5工作室 版权所有

© MUZINIU Inc.小黑屋|手机版|Archiver|HANGNIU  

Powered by MuZiNiuX3.2( 豫ICP备12017936号 )

 豫公网安备 41078102000103号

快速回复 返回顶部 返回列表