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