HTML CSSを用いた煙アニメーション効果

17968 ワード
html css javascript beginners テキストリンク
こんにちは、今日、我々はHTML CSSを使用してテキストに煙アニメーション効果を作る方法を学びます
こんにちは、今日、我々はものすごいテキスト煙 Animation Effectをつくります.このアニメーションは、あなたのウェブサイトのためにクールです、そして、我々はHTML 5とCSS 3だけを使います.あなたは素晴らしいアニメーションを見つける場合は、適切な場所にあります.ここにHTML CSSを使用してテキストに煙アニメーション効果のコードです.
まず、2つのファイルインデックスを作成する必要があります.HTMLとスタイル.CSSでコードを行う必要があります.

煙アニメーションステップ:1
インデックスの内側にコードを追加します.HTML
<!DOCTYPE html>
<html>
<head>
    <title>Smoke</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,900&display=swap" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
   <div class="smoke" >
        <ul>
            <li><img src="logo.png"></li>
            <li>S</li>
            <li>t</li>
            <li>a</li>
            <li>c</li>
            <li>k</li>
            <li>f</li>
            <li>i</li>
            <li>n</li>
            <li>d</li>
            <li>o</li>
            <li>v</li>
            <li>e</li>
            <li>r</li>
        </ul> 
        <div class="thankyousec">
            <div class="colmun-grid">
                <div class="logo-stack">
                    <img src="logo-stack.png">
                </div>
            </div>     
        </div>   
    </div>
</body>
</html>

煙アニメーションステップ:2
次に、スタイル用のコードを追加する必要があります.以下の画面で提供するCSSコード.
* {
    font-family: 'Roboto', sans-serif; 
} 
body {
    margin:0;
    padding:0;
    background: #000;
    height: 100vh;
}
.smoke {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}
.smoke ul {
    margin:0;
    padding:0;
    display:flex;
    align-items: center;  
    text-align: center;  
}

.smoke ul li {
    list-style:none;
    font-weight:bold;
    letter-spacing:10px;
    filter:blur(1px);
    color:#fff;
    font-size:6em;
    display: inline-block; 
}
.smoke ul:hover li {
    animation: smoke 2s linear forwards;
}
@keyframes smoke {
    0% {
        transform: rotate(0deg) translateY(0px);
        opacity: 1;
        filter:blur(1px);
    }
    100% {
      transform: rotate(45deg) translateY(-200px);
        opacity: 0;
        filter:blur(20px);
    }
}
li > img {
    width: 100%;
} 
.smoke ul li:nth-child(1){
    align-items: center;
    display: flex;
    animation-delay:0s;
    width: 1.5em; 
    margin-right: 20px;
}
.smoke ul li:nth-child(2){
    animation-delay:.4s
}
.smoke ul li:nth-child(3){
    animation-delay:.8s
}
.smoke ul li:nth-child(4){
    animation-delay:1.2s
}
.smoke ul li:nth-child(5){
    animation-delay:1.6s
}
.smoke ul li:nth-child(6){
    animation-delay:2s
}
.smoke ul li:nth-child(7){
    animation-delay:2.4s
}
.smoke ul li:nth-child(8){
    animation-delay:2.8s
}
.smoke ul li:nth-child(9){
    animation-delay:3.2s
}
.smoke ul li:nth-child(10){
    animation-delay:3.6s
}
.smoke ul li:nth-child(11){
    animation-delay:4s
}
.smoke ul li:nth-child(12){
    animation-delay:4.4s
}
.smoke ul li:nth-child(13){
    animation-delay:4.8s
}
.smoke ul li:nth-child(14){
    animation-delay:5.2s
}
/******** Extra *************/
.smoke.thankyou {
    width: 100%;
}
.thankyousec {
    height: 0;
    opacity: 0;
    transition: opacity 1s; 
}
.thankyou .thankyousec {
    opacity: 1;
    height: auto;
}
.smoke.thankyou > ul {
    display: none;
}
.thankyousec  h1 {
    color: #fff;
    font-size: 65px;
    margin: 0;
    line-height: 75px;
}
.thankyousec  span {
    color: #fff;
    font-size: 30px;
}
.colmun-grid {
    display: grid;
    grid-template-columns: 150px auto;
    column-gap: 20px;
    align-items: center;
    justify-content: center; 
}
.logo-stack > img {
    width: 100%;
    background: #fff;
    border-radius: 50%;
}
HTML CSS出力を用いたテキストに対する煙アニメーション効果
創世記35-40章
アップルの弾性レイアウトを模倣する