breathjs
Version:
一个类似呼吸节奏的动画库
50 lines (48 loc) • 1.48 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Breath.js</title>
<style>
body,
html {
width: 100%;
height: 100%;
overflow: hidden;
background: #5fb0f5;
text-align: center;
display: flex;
padding: 0 1em;
margin: 0;
font-size: 3em;
align-items: center;
justify-content: space-around;
box-sizing: border-box;
}
.item {
color: #ffffff;
display: inline-block;
line-height: 1;
}
</style>
</head>
<body>
<div class="item" data-breath="scale(1.2,1.2);duration(2000)">B</div>
<div class="item" data-breath="rotate(15deg)">r</div>
<div class="item" data-breath="scale(1.2,1.2);rotate(-15deg)">e</div>
<div class="item" data-breath="rotate(15deg);origin(left bottom)">a</div>
<div class="item" data-breath="skew(-20deg)">t</div>
<div class="item" data-breath="skewY(-20deg)">h</div>
<div class="item" data-breath="translate(0.3em, 0)">.</div>
<div class="item" data-breath="translate(0, 0.5em)">j</div>
<div class="item" data-breath="translate(0, -0.5em)">s</div>
<script src="./breath.js"></script>
<script>
window.onload = function() {
var breath = new Breath()
breath.init()
}
</script>
</body>
</html>