div+css实现卡通乌龟在水中游动动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：div+css实现卡通乌龟在水中游动动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    :root {
        --green1: #bbab31;
        --green2: #978928;
        --green3: #695415;
        --brown1: #58331a;
        --brown2: #542c12;
        --brown3: #2b160f;
}

body {
        margin: 0;
        padding: 0;
        background: linear-gradient(
                to top,
                rgba(0, 25, 45, 1) 0%,
                rgba(14, 71, 117, 1) 35%,
                rgba(26, 126, 174, 1) 70%,
                rgba(62, 168, 220, 1) 100%
        );
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
}

body *,
*:before,
*:after {
        box-sizing: border-box;
        position: absolute;
        margin: 0;
        padding: 0;
        box-sizing: inherit;
        transition: opacity 0.5s ease 0s;
}

.water {
        background: linear-gradient(
                to top,
                rgba(0, 25, 45, 1) 0%,
                rgba(14, 71, 117, 1) 35%,
                rgba(26, 126, 174, 1) 70%,
                rgba(62, 168, 220, 1) 100%
        );
        height: 100vh;
        width: 100vw;
        overflow: hidden;
        position: relative;
}

.water:before,
body:after {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        background: repeating-linear-gradient(
                250deg,
                #03a9f415 45%,
                #03a9f420 47%,
                #2196f330 50%,
                #03a9f420 53%,
                #03a9f415 55%
        );
        background-size: 1vmin;
        animation: ocean 15s linear 0s infinite;
        transition: opacity 0.5s ease 0s;
        filter: blur(1px);
}

.water:before,
body:hover:after {
        opacity: 0;
        transition: opacity 0.5s ease 0s;
}

body:hover .water:before {
        opacity: 1;
        transition: opacity 0.5s ease 0s;
}

body:hover .bubbles {
        z-index: 0;
}

@keyframes ocean {
        100% {
                background-position: 0 100vmin;
        }
}

.turtle {
        width: 70vmin;
        height: 60vmin;
        animation: swim 5s ease-in-out 0s infinite;
}

@keyframes swim {
        0% {
                transform: translateY(0);
        }
        30% {
                transform: translateY(-3vmin);
        }
        100% {
                transform: translateY(0);
        }
}

.turtle > div {
        position: absolute;
}

.body {
        width: 40vmin;
        height: 33vmin;
        border-radius: 50vmin;
        top: 17vmin;
        left: 15vmin;
        border: 1.75vmin solid var(--brown3);
        box-sizing: border-box;
        clip-path: ellipse(50% 50% at 50% 50%);
        transform: rotate(90deg);
        background: 
                conic-gradient(
                        at 0.5vmin 6.9324vmin,
                        transparent 270deg,
                        var(--brown3) 0deg
                ),
                conic-gradient(
                        at calc(100% - 0.5vmin) 6.9324vmin,
                        var(--brown3) 90deg,
                        transparent 0deg
                ),
                conic-gradient(
                        from -60deg at 50% 10.3944vmin,
                        var(--brown2) 120deg,
                        transparent 120deg
                ),
                conic-gradient(
                        from -60deg at 50% 11.3944vmin,
                        var(--brown3) 120deg,
                        transparent 120deg
                ),
                conic-gradient(
                        from 120deg at 50% 18.822vmin,
                        var(--brown2) 120deg,
                        transparent 120deg
                ),
                conic-gradient(
                        from 120deg at 50% 17.822vmin,
                        var(--brown3) 120deg,
                        transparent 120deg
                ),
                linear-gradient(
                        90deg,
                        var(--brown1) calc(50% - 0.5vmin),
                        var(--brown3) 0 calc(50% + 0.5vmin),
                        var(--brown1) 0
                );
        background-size: 13vmin;
}

.body:before,
.body:after {
        content: "";
        width: 12vmin;
        height: 2vmin;
        background: var(--brown2);
        border-radius: 100% 150% 0 0;
        top: -0.75vmin;
        left: 13.35vmin;
        transform: rotate(1deg);
}
.body:after {
        top: 28.05vmin;
        left: 13.35vmin;
        transform: rotate(-2deg);
        border-radius: 0 0 150% 100%;
}

.body span {
        background: 
                radial-gradient(
                        ellipse 105vmin 56vmin at 50% -40%,
                        transparent 18%,
                        #30180c80 18.5%
                ),
                linear-gradient(
                        90deg,
                        transparent 12.35vmin,
                        #301a11 12.5vmin,
                        #30180c 13.25vmin,
                        transparent 13.25vmin
                ),
                linear-gradient(
                        90deg,
                        transparent 25.35vmin,
                        #30180c 25.5vmin,
                        #2b160f 26.25vmin,
                        transparent 26.25vmin
                );
        width: 100%;
        height: 45%;
        z-index: 1;
        left: 0vmin;
        top: 22vmin;
}

.body-tail {
        background: var(--brown1);
        width: 7vmin;
        height: 7vmin;
        bottom: 6vmin;
        transform: rotate(45deg);
        left: calc(50% - 3.25vmin);
        border-radius: 500% 50% 0 50%;
}

.body-tail:before,
.body-tail:after {
        content: "";
        width: 1vmin;
        height: 6vmin;
        background: var(--brown3);
        position: absolute;
        top: 1vmin;
        left: 6.75vmin;
        transform: rotate(12deg);
        border-radius: 1vmin;
}

.body-tail:after {
        top: 4.25vmin;
        left: 3.65vmin;
        transform: rotate(-102deg);
}

.head {
        background: 
                radial-gradient(circle at 53% 44%, var(--green3) 15%,   transparent 16%),
                radial-gradient(circle at 25% 50%, var(--green3) 9%, transparent 10%),
                radial-gradient(circle at 32% 26%, var(--green3) 8%, transparent 9%),
                radial-gradient(circle at 50% 20%, var(--green3) 5%, transparent 6%),
                radial-gradient(circle at 38% 61%, var(--green3) 5%, transparent 6%),
                radial-gradient(circle at 16% 35%, var(--green3) 4%.........完整代码请登录后点击上方下载按钮下载查看