svg+css实现小熊献爱心爱情表白卖萌动画效果代码-html代码-BFW代码库

svg+css实现小熊献爱心爱情表白卖萌动画效果代码

代码语言：html

所属分类：表白

代码描述：svg+css实现小熊献爱心爱情表白卖萌动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        body {
            padding: 0;
            margin: 0;
            background-color: #90ffff;
        }
        .container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }
        .drawing {
            display: none;
            width: calc(100% - 32px);
            max-width: 300px;
            height: auto;
            transform: scale(0.9);
        }
        #head {
            transform: rotate(10deg);
            transform-origin: center 38%;
            animation-name: beary;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }
        
        .impl {
            width: calc(100% - 32px);
            height: auto;
            max-width: 300px;
        }
        
        @keyframes beary {
            0% {
                transform: rotate(0deg);
            }
            46% {
                transform: rotate(0deg);
            }
            50% {
                transform: rotate(14deg);
            }
            96% {
                transform: rotate(14deg);
            }
            100% {
                transform: rotate(0deg);
            }
        }
        @media (max-height: 480px) {
            .drawing, .impl {
                width: auto;
                height: calc(100vh - 8px);
            }
        }
        .shakey {
            animation-name: watery-eyes;
            animation-duration: 200ms;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in-out;
            transform-origin: center center;
        }
        @keyframes watery-eyes {
            0% {
                transform: none;
            }
            100% {
                transform: rotateZ(1deg);
            }
        }
        .heart {
            animation-name: hearty;
            animation-duration: 500ms;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in-out;
            transform-origin: center 60%;
        }
        @keyframes hearty {
            0% { transform: scale(0.95); }
            5% { transform: scale(0.975); }
            10% { transform: scale(0.95); }
            15% { transform: scale(1); }
            50% { transform: scale(0.95); }
            100% { transform: scale(0.95); }
        }
    </style>


</head>

<body>
    <div class="container">
        <!-- start of svg -->
        <svg class="impl" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 142 240" style="enable-background:new 0 0 142 240;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#E29500;stroke:#000000;stroke-width:3;}
	.st1{fill:#FF4545;stroke:#FF0042;stroke-width:3;}
	.st2{fill:none;stroke:#000000;stroke-width:2;}
	.st3{fill:#FFD392;stroke:#000000;stroke-width:2;}
	.st4{fill:none;stroke:#000000;stroke-width:3;}
	.st5{fill:#FFFFFF;}
	.st6{fill:none;stroke:#F9284E;}
</style>
<g id="body-v2">
	<path class="st0" d="M73.7,120.6l10.3,4.1c5.4,2.1,8.9-1.2,9.3,4.5l1.8,29.7c0,0,17.7,52.7-30.5,52.6s-34.8-49.1-30.9-54.2
		L26.8,130l4.1-9.5l26.5-0.7"/>
</g>
<g id="Layer_8">
	<path class="st1 heart" d="M61.9,177c0,0,36.4-17.5,19.7-30.2c-8.6-4.2-12.9,1.9-12.9,1.9s-3.3-8.7-10.5-7.5S40.8,148.1,61.9,177z"/>
</g>
<g id="right-arm-v2">
	<path class="st0" d=&qu.........完整代码请登录后点击上方下载按钮下载查看