div+css实现鼠标悬浮伸长脖子的卡通可爱长颈鹿效果代码-html代码-BFW代码库

代码语言：html

代码描述：div+css实现鼠标悬浮伸长脖子的卡通可爱长颈鹿效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
<style>
:root {
        --skin: #feb81a;
        --horns: #ed9d22;
        --crest: #c67c1b;
        --dots: #6b4634;
        --ears: #c86c61;
        --ear: #ed9d22;
        --eyes: #493619;
}
body {
        margin: 0;
        padding: 0;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        background: 
                linear-gradient(180deg, #fff0 55%, #8bc34a 55%, #4caf50, #38893b 100%),
                linear-gradient(190deg, #3f51b5 10%, #03a9f4);
}

body:after {
        content: "";
        width: 100%;
        height: 3vh;
        background: 
                radial-gradient(circle at 50% 50%, #8bc34a 0.125vmin, #fff0 0 100%),
                radial-gradient(ellipse at 50% 50%, #8bc34a 1vmin, #fff0 0 100%),
                conic-gradient(from 90deg at 50% 50%, #c1c24a 0 25%, #fff0 0 100%), 
                conic-gradient(from 90deg at 40% 30%, #8bc34a 0 25%, #fff0 0 100%), 
                conic-gradient(from 90deg at 50% 9%, #4caf50 0 25%, #fff0 0 100%);
        position: absolute;
        bottom: 45vh;
        z-index: -1;
        background-size: 0.65vmin 0.75vmin, 2vmin 2vmin, 0.4vmin 100% , 0.5vmin 100%, 0.5vmin 100%;
        background-repeat: repeat-x;
        background-position: 0 1.125vmin, 0 2.5vmin, 0 0;
        filter: blur(0.25px);
}

.content {
        width: 30vmin;
        height: 80vmin;
        position: relative;
        clip-path: polygon(10% 0, 82% 0, 82% 100%, 10% 100%);
}

.cam {
        height: 5%;
        width: 100%;
        box-sizing: border-box;
        z-index: 5;
        position: relative;
}

.cam:nth-child(1) {
        height: 20%;
}

.cam:nth-child(12) {
        height: 30%;
}

.cam:hover ~ .giraffe .neck {
        transition: all 0.25s ease 0s;
}

.cam:nth-child(1):hover ~ .giraffe .neck {
        --h: 50vmin;
}

.cam:nth-child(2):hover ~ .giraffe .neck {
        --h: 46vmin;
}

.cam:nth-child(3):hover ~ .giraffe .neck {
        --h: 42vmin;
}

.cam:nth-child(4):hover ~ .giraffe .neck {
        --h: 38vmin;
}

.cam:nth-child(5):hover ~ .giraffe .neck {
        --h: 34vmin;
}

.cam:nth-child(6):hover ~ .giraffe .neck {
        --h: 30vmin;
}
.cam:nth-child(7):hover ~ .giraffe .neck {
        --h: 26vmin;
}
.cam:nth-child(8):hover ~ .giraffe .neck {
        --h: 22vmin;
}
.cam:nth-child(9):hover ~ .giraffe .neck {
        --h: 18vmin;
}
.cam:nth-child(10):hover ~ .giraffe .neck {
        --h: 14vmin;
}
.cam:nth-child(11):hover ~ .giraffe .neck {
        --h: 10vmin;
}
.cam:nth-child(12):hover ~ .giraffe .neck {
        --h: 8vmin;
}




.cam:hover ~ .giraffe:after {
        opacity: 0.5;
}

.cam:nth-child(1):hover ~ .giraffe:after {
        top: 11vmin;
        content: "3.00m";
}
.cam:nth-child(2):hover ~ .giraffe:after {
        top: 15vmin;
        content: "2.75m";
}
.cam:nth-child(3):hover ~ .giraffe:after {
        top: 19vmin;
        content: "2.50m";
}
.cam:nth-child(4):hover ~ .giraffe:after {
        top: 23vmin;
        content: "2.25m";
}
.cam:nth-child(5):hover ~ .giraffe:after {
        top: 27vmin;
        content: "2.00m";
}
.cam:nth-child(6):hover ~ .giraffe:after {
        top: 31vmin;
        content: "1.75m";
}
.cam:nth-child(7):hover ~ .giraffe:after {
        top: 35vmin;
        content: "1.50m";
}
.cam:nth-child(8):hover ~ .giraffe:after {
        top: 39vmin;
        content: "1.25m";
}
.cam:nth-child(9):hover ~ .giraffe:after {
        top: 43vmin;
        content: "1.00m";
}
.cam:nth-child(10):hover ~ .giraffe:after {
        top: 47vmin;
        content: "0.75m";
}
.cam:nth-child(11):hover ~ .giraffe:after {
        top: 51vmin;
        content: "0.50m";
}
.cam:nth-child(12):hover ~ .giraffe:after {
        top: 55vmin;
        content: "0.25m";
}



.giraffe {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
}

.giraffe * {
        position: absolute;
}

.giraffe:before {
        content: "3.00m \A 2.75m \A 2.50m \A 2.25m \A 2.00m \A 1.75m \A 1.50m \A 1.25m \A 1.00m \A 0.75m \A 0.50m \A 0.25m";
        white-space: pre-wrap;
        line-height: 4vmin;
        position: absolute;
        top: 10.5vmin;
        margin-left: -13.5vmin;
        font-size: 1.65vmin;
        font-family: Arial, Helvetica, serif;
        color: #0002;
}


.giraffe:after {
        content: "";
        position: absolute;
        top: 27vmin;
        margin-left: -13.75vmin;
        background: var(--skin);
        width: 5vmin;
        height: 2.5vmin;
        z-index: -1;
        border-bottom: 0.5vmin solid var(--crest);
        font-size: 1.65vmin;
        font-family: Arial, Helvetica, serif;
        content: "2.00m";
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        padding-top: 0.25vmin;
        padding-right: 0.2vmin;
        border-radius: 0.25vmin;
        transition: all 0.25s ease 0s;
        opacity: 0.1;
}

.head {
        background: var(--skin);
        width: 11.5vmin;
        height: 9.5vmin;
        border-radius: 100%;
        top: -5vmin;
        left: 0.25vmin;
        transform: rotate(10deg);
        z-index: 1;
        overflow: hidden;
}

.horns {
        background: #3f51b500;
        width: 5vmin;
        height: 6vmin;
        transform: rotate(-14deg);
        left: 1vmin;
        top: -9.5vmin;
        z-index: 1;
}

.horns span {
        backg.........完整代码请登录后点击上方下载按钮下载查看