js实现可爱变色爱心抖动动画效果代码-html代码-BFW代码库

js实现可爱变色爱心抖动动画效果代码

代码语言：html

所属分类：动画

代码描述：js实现可爱变色爱心抖动动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  
  
  
  
<style>
:root {
    --heart-size: 250px;
    --eye-size: calc(var(--heart-size) * 0.2);
    --pupil-base-size: calc(var(--eye-size) * 0.4);
    --pupil-dilation-factor: 1;
    --current-pupil-size: calc(var(--pupil-base-size) * var(--pupil-dilation-factor));
    
    --mouse-x: 0px;
    --mouse-y: 0px;

    --heart-center-x: 0px;
    --heart-center-y: 0px;

    --mouse-proximity-to-heart: 0;
    
    --heart-base-color: #ff4757;
    --heart-highlight: #ff6b81;
    --heart-shadow: #ff1f35;
    --eye-color: #fff;
    --pupil-color: #2c3e50;
    --glow-color: #ff69b4;
    --bg-color: #f8e9f2;
}

body {
    background: radial-gradient(circle, var(--bg-color), #e8d0e0);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    overflow: hidden;
    font-family: 'Arial', sans-serif;
    transition: background 0.5s ease;
}

.scene {
    position: relative;
    width: 100vw;
    height: 100vh;
    perspective: 800px;
}

.heart-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--heart-size);
    height: var(--heart-size);
    transform-style: preserve-3d;
    transform: translate(-50%, -50%) rotateY(0deg);
    
    --heartbeat-scale-factor: calc(1 + 0.08 * var(--mouse-proximity-to-heart));
    animation: heartbeat 1.5s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
    
    filter: drop-shadow(0 0 calc(20px * var(--mouse-proximity-to-heart)) var(--glow-color));
    transition: filter 0.3s ease-out, transform 0.5s ease;
    will-change: transform;
}

@keyframes heartbeat {
    0%, 100% {
        transform: translate(-50%, -50%) scale(var(--heartbeat-scale-factor));
    }
    10% {
        transform: translate(-50%, -50%) scale(calc(var(--heartbeat-scale-factor) * 0.98));
    }
    13% {
        transform: translate(-50%, -50%) scale(calc(var(--heartbeat-scale-factor) * 0.94));
    }
    16% {
        transform: translate(-50%, -50%) scale(calc(var(--heartbeat-scale-factor) * 0.92));
    }
    25% {
        transform: translate(-50%, -50%) scale(calc(var(--heartbeat-scale-factor) * 1.05));
    }
    30% {
        transform: translate(-50%, -50%) scale(calc(var(--heartbeat-scale-factor) * 1.08));
    }
    35% {
        transform: translate(-50%, -50%) scale(calc(var(--heartbeat-scale-factor) * 1.04));
    }
    45% {
        transform: translate(-50%, -50%) scale(calc(var(--heartbeat-scale-factor) * 0.98));
    }
    60% {
        transform: translate(-50%, -50%) scale(var(--heartbeat-scale-factor));
    }
}

.heart {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--heart-highlight) 0%, var(--heart-base-color) 50%, var(--heart-shadow) 100%);
    transform: rotate(-45deg);
    box-shadow: -10px 10px 30px rgba(0, 0, 0, 0.2),
                inset -5px 5px 25px rgba(255, 255, 255, 0.4),
                inset 5px -5px 25px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    transition: background 0.3s ease;
}

.heart::before,
.heart::after {
    content: '';
    position: ab.........完整代码请登录后点击上方下载按钮下载查看