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

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

代码语言：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 ~.........完整代码请登录后点击上方下载按钮下载查看