Embedded Files
NO.11（繰り返しはできません）
NO.11 コード
<div class="container">
<div class="animate txt">
<span>S</span>
<span>a</span>
<span>m</span>
<span>p</span>
<span>l</span>
<span>e</span>  <!-- 全角のスペース、半角スペースは -->
<span>T</span>
<span>e</span>
<span>x</span>
<span>t</span>
</div>
</div>
<style>
.container {
width: 100%;
height: 50vh; /* 文字上余白 */
display: flex;
justify-content: center; /* 文字水平位置、leftにすれば左寄せ */
align-items: center;
}
.animate {
font-family: serif; /* 文字種、sans-serifにすればゴシック体 */
font-size: 6.5vw; /* 文字サイズ */
letter-spacing: -0.1em; /* 文字間隔 */
font-weight: 700; /* 文字の太さ、標準は400 */
color: red; /* 文字色1、下記の文字色2・文字色3とは同じ色にします */
}
.animate span {
display: inline-block;
}
.animate span:nth-of-type(1) {
animation-delay: 0s; /* 最初の文字を出す秒数 */
}
.animate span:nth-of-type(2) {
animation-delay: 0.4s; /* 以降の文字を出す秒数、ここでは0.4秒毎で設定 */
}
.animate span:nth-of-type(3) {
animation-delay: 0.8s;
}
.animate span:nth-of-type(4) {
animation-delay: 1.2s;
}
.animate span:nth-of-type(5) {
animation-delay: 1.6s;
}
.animate span:nth-of-type(6) {
animation-delay: 2.0s;
}
.animate span:nth-of-type(7) {
animation-delay: 2.4s;
}
.animate span:nth-of-type(8) {
animation-delay: 2.8s;
}
.animate span:nth-of-type(9) {
animation-delay: 3.2s;
}
.animate span:nth-of-type(10) {
animation-delay: 3.6s;
}
.txt span {
opacity: 0;
transform: translate(-150px, 0) scale(0.3);
animation: leftRight .5s forwards;
}
@keyframes leftRight {
40% {
transform: translate(50px, 0) scale(0.8);
opacity: 1;
color: red; /* 文字色2 */
}
60% {
color: red; /* 文字色3 */
}
80% {
transform: translate(0) scale(1.5); /* 文字の拡大率、増やすとメリハリのある表現になります */
opacity: 0;
}
100% {
transform: translate(0) scale(1);
opacity: 1;
}
}
</style>
NO.12（波打たせなくも出来ます）
NO.12 コード
<div class="txt">
<p>S</p>
<p>A</p>
<p>M</p>
<p>P</p>
<p>L</p>
<p>E</p>  <!-- 全角のスペース、半角スペースは -->
<p>T</p>
<p>E</p>
<p>X</p>
<p>T</p>
</div>
<style>
.txt {
display: flex;
overflow: hidden;
padding-top: 1em; /* 文字上余白 */
justify-content: center; /* 文字水平位置、leftにすれば左寄せ */
}
.txt p {
font-family: serif; /* 文字種、sans-serifにすればゴシック体 */
color: blue; /* 文字色 */
font-size: 6vw; /* 文字サイズ */
font-weight: 700; /* 文字の太さ、標準は400 */
letter-spacing: 0.15em; /* 文字間隔 */
margin: 0;
transform: translateY(2em);
animation: textanimation 1s forwards 1; /* 2・3と変えると面白い効果がでます */
}
.txt p:nth-child(1) {
animation-delay: 0.2s /* 最初の文字を出す秒数 */
}
.txt p:nth-child(2) {
animation-delay: 0.4s /* 以降の文字を出す秒数、ここでは0.2秒毎で設定 */
}
.txt p:nth-child(3) {
animation-delay: 0.6s
}
.txt p:nth-child(4) {
animation-delay: 0.8s
}
.txt p:nth-child(5) {
animation-delay: 1.0s
}
.txt p:nth-child(6) {
animation-delay: 1.2s
}
.txt p:nth-child(7) {
animation-delay: 1.4s
}
.txt p:nth-child(8) {
animation-delay: 1.6s
}
.txt p:nth-child(9) {
animation-delay: 1.8s
}
.txt p:nth-child(10) {
animation-delay: 2.0s
}
@keyframes textanimation {
0% {
transform: translateY(2em);
}
50% {
transform: translateY(-1em); /* 文字が波打つ幅、0にすると波打たなくなります */
}
100% {
transform: translateY(0);
}
}
</style>
NO.13
NO.13 コード
<div class="bg">
<span class="wrap"><span class="txt">Sample Sample</span>
</div>
<style>
.bg .wrap {
position: relative;
display: inline-block;
margin-top: 5px;
}
.bg .wrap::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
animation: bg 3.0s linear forwards 1; /* 繰り返し回数 infiniteで無限 */
background: linear-gradient(to right, navy 0%, blue 60%, skyblue 100%); /* グラデーションの方向 */
transform-origin: left center; /* ラップの方向 rightで右から左 取り払えば中央から */
}
.bg .wrap .txt {
position: relative;
display: inline-block;
font-family: sans-serif; /* serif にすれば明朝体 */
color: yellow;
font-size: 7vw;
font-weight: bold; /* 400で通常の太さ */
padding: 5px 15px;
z-index: 1;
}
@keyframes bg {
0% {
opacity: 0;
transform: scaleX(0) translateX(-5%);
}
30% {
transform: scaleX(1) translateX(0);
}
100% {
transform: scaleX(1) translateX(0);
}
30%, 100% {
opacity: 1;
}
}
</style>
NO.14
NO.14 コード
<div class="mask txt">
Sample Sample
</div>
<style>
.mask {
display: inline-block;
position: relative;
font-size: 7vw; /* 文字サイズ */
font-weight: bold; /* 400で通常の太さ */
overflow: hidden;
}
.mask::after {
display: block;
position: absolute;
content: '';
left: 0;
right: 0;
top: 0;
bottom: 0;
background: forestgreen; /* 背景色 */
transform: translate(0, 100%);
opacity: 0.8; /* 背景の透明度 */
}
.mask.txt {
font-family: serif; /* sans-serif にすればゴシック体 */
color: darkorange; /* 文字色 */
padding: 5px 15px;
}
.mask.txt::after {
animation: mask 2.0s 1; /* 繰り返し回数 infiniteで無限 */
}
@keyframes mask {
0% {
transform: translate(0, 100%)
}
40%, 60% {
transform: translate(0, 0%)
}
100% {
transform: translate(0, -100%)
}
}
</style>
NO.15〜NO.20は画像アニメーションのNO.5〜NO.10を文字に適用したものです
NO.15
NO.15 コード
NO.16
NO.16 コード
NO.17
NO.17 コード
NO.18
NO.18 コード
NO.19
NO.19 コード
NO.20
NO.20 コード
Google Sites
Report abuse