pixi实现文字拆散飞行朗读困难效果代码

代码语言:html

所属分类:动画

代码描述:pixi实现文字拆散飞行朗读困难效果代码

代码标签: 拆散 飞行 朗读 困难 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

 
<meta charset="UTF-8">
 

 
 
<style>
nav
{
 
width: 100vw;
 
position: fixed;
 
z-index: 1;
}
nav ul
{
 
display: flex;
 
flex-flow: row nowrap;
 
gap: 1px;
}
nav ul li
{
 
padding: 1rem;
 
text-overflow: ellipsis;
 
overflow: hidden;
 
white-space: nowrap;
 
background: #fffd;
}
nav ul
li:first-of-type {
 
flex: 0 0 auto;
}
main
{
 
width: 100vw;
 
height: 100vh;
 
grid-template-rows: 1rem [sk] 1fr 1rem;
 
grid-template-columns: 1rem [sk] 1fr 1rem;
 
overflow: hidden;
 
display: grid;
 
transition: all 1s;
}
main
#sketch {
 
grid-area: sk;
 
display: grid;
 
place-content: center;
 
overflow: hidden;
}
main
#sketch.stretchByCss canvas {
 
margin: auto;
 
max-height: 100%;
 
max-width: 100%;
}
body
{
 
overflow: hidden;
}
</style>




</head>

<body>
 
<nav>

</nav>
<main>
 
<section class="stretchByCss" id="sketch"></section>
</main>
 
 
     
<script type="module">
// import * as $ from '//cdn.skypack.dev/pixi.js@6.0.1?min';
import * as $ from '//cdnjs.cloudflare.com/ajax/libs/pixi.js/6.0.1/browser/.........完整代码请登录后点击上方下载按钮下载查看

网友评论0