BinaryDevelop
  1. ホーム
  2. Web プログラミング
  3. CSS/HTML

CSSによるリアルな水滴の効果

2022-01-17 15:31:05

CSSは本当に楽しいです、ははは、とにかく大好きです、自由に書いて遊んでいます。私は絵を描くのが得意ではない、次の動的な効果の水滴の模倣を完了するためにCSS3アニメーションは、主に影の効果だけでなく、@keyframesキーフレームといくつかのセレクタ技術を設定するには、CSSを使用します、それを学ぶために来てください！私はそれを学ぶことができます。
/
{{br

効果：とてもいい感じです
また、以下のURLからアクセスすることもできます。 水滴がクリックで


インスピレーション。私は芸術のバーに属している、この絵の影のハイライトを見た、ハハ、私は小さな新人です。

GitHubの素晴らしいオープンソースの強力なアンコールを紹介します。 ファンシーボーダーラジアスジェネレータ これを使えば、この効果を2倍簡単に実現できるので、コーディングを始めることができます

1.html

簡単、1ボックスでOK 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>waterdrop</title>
</head>
<body>
    <div class="shui"></div>
</body>
</html>

2.CSSについて

コメントはすでにコードに書かれているので、ここでは擬似要素セレクタの使い方、影を設定するbox-shadowプロパティ、キーフレーム@keyframesとキーフレーム・アニメーションの使い方、border-radiusについて学びます。30% 70% 70% 30% / 30% 35% 65% 70%; プロパティ 

		/*clear the effect of body *        *{
            margin: 0;
            padding: 0;
        }
        /* Set the background color *        body{
            background-color: rgba(40, 134, 241, 0.925);
        }
        /* initialize water, size, bend, shadow *        .shui{
            width: 400px;
            height: 400px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            /* border for testing *            /* border: 1px solid; *            box-sizing: border-box;
            /* set bend *            border-radius: 30% 70% 70% 30% / 30% 35% 65% 70%;
            /* set box-shadow :horizontal-shadow vertical-shadow blur-distance shadow-size shadow-color inner/outer-shadow (inset/outset(default)) 
            Box-shadow can have multiple values, separated by commas
            Horizontal and vertical shadows must be written, the other 4 are optional*            box-shadow: inset 10px 20px 30px rgba(0, 0, 0, 0, 0.5), 10px 10px 20px rgba(0, 0, 0, 0, 0.3), 15px 15px 30px rgba(0, 0, 0, 0, 0.05), 
            inset -10px -10px 15px rgba(255, 255, 254, 0.83);
            /* use keyframe watermove 9s to play evenly infinite loop*            animation: watermove 9s linear infinite;
        }
        /* Pseudo element selector: insert after ^ *        .shui::after{
            content: "";
            position: absolute;
            width: 35px;
            height: 35px;
            background: rgba(255, 255, 255, 0.82);
            border-radius: 50%;
            left: 60px;
            top: 80px;
            /* use keyframe watermove 4s play evenly infinite loop*            animation: watermove 4s linear infinite;
        }
        /* Pseudo-element selector: insert something at the top of the current box *        .shui::before{
            content: "";
            position: absolute;
            width: 20px;
            height: 20px;
            background: rgba(255, 255, 255, 0.82);
            border-radius: 50%;
            left: 120px;
            top: 55px;
            /* use keyframe watermove 4s play evenly infinite loop*            animation: watermove 4s linear infinite;
        }
        /* keyframes *        @keyframes watermove{  
            20%{
                border-radius: 30% 70% 53% 47% / 28% 44% 56% 72%;
            }
           
            40%{
                border-radius: 30% 70% 39% 61% / 34% 39% 61% 66%;
            }
           
            60%{
                border-radius: 25% 75% 45% 55% / 40% 55% 45% 60%;
            }
           
            80%{
                border-radius: 28% 72% 31% 69% / 32% 39% 61% 68%;
            }
        }

3. フルコード 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>waterdrop</title>
    <style>
        /*clear the effect of body*        *{
            margin: 0;
            padding: 0;
        }
        /* Set the background color *        body{
            background-color: rgba(40, 134, 241, 0.925);
        }
        /* initialize water, size, bend, shadow *        .shui{
            width: 400px;
            height: 400px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            /* border for testing *            /* border: 1px solid; *            box-sizing: border-box;
            /* set bend *            border-radius: 30% 70% 70% 30% / 30% 35% 65% 70%;
            /* set box-shadow :horizontal-shadow vertical-shadow blur-distance shadow-size shadow-color inner/outer-shadow (inset/outset(default)) 
            Box-shadow can have multiple values, separated by commas
            Horizontal and vertical shadows must be written, the other 4 are optional*            box-shadow: inset 10px 20px 30px rgba(0, 0, 0, 0, 0.5), 10px 10px 20px rgba(0, 0, 0, 0, 0.3), 15px 15px 30px rgba(0, 0, 0, 0, 0.05), 
            inset -10px -10px 15px rgba(255, 255, 254, 0.83);
            /* use keyframe watermove 9s to play evenly infinite loop*            animation: watermove 9s linear infinite;
        }
        /* Pseudo element selector: insert after ^ *        .shui::after{
            content: "";
            position: absolute;
            width: 35px;
            height: 35px;
            background: rgba(255, 255, 255, 0.82);
            border-radius: 50%;
            left: 60px;
            top: 80px;
            /* use keyframe watermove 4s play evenly infinite loop

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します