svg+css情人节玫瑰花绽放开花表白动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：表白

代码描述：svg+css情人节玫瑰花绽放开花表白动画效果代码

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <style>
        div{ margin: 0 auto;}
        body {    background-color: black;}
        #svg{  background-color: darkseagreen;  background: radial-gradient(darkseagreen 0%, black 70%);  width: 500px;}
    </style>
</head>

<body>
    <center>
        <div>
            <?xml version="1.0" encoding="utf-8" ?><svg id='svg' width='400px' viewBox="0 0 188 264" xmlns="http://www.w3.org/2000/svg"><defs><radialGradient id="gradient-0" gradientUnits="userSpaceOnUse" cx="-107.308" cy="104.329" r="59.181" gradientTransform="matrix(0.261752, 0.411262, -0.686293, 0.596934, 160.094667, 49.38985)"><stop offset="0" style="stop-color: rgb(255, 0, 0);" /><stop offset="1" style="stop-color: rgb(141, 41, 41);" /></radialGradient><radialGradient id="gradient-1" gradientUnits="userSpaceOnUse" cx="113.342" cy="62.644" r="53.882" gradientTransform="matrix(-0.169507, 1.182475, -0.714039, -0.308382, 160.212434, -46.522622)"><stop offset="0" style="stop-color: rgb(255, 0, 0);" /><stop offset="1" style="stop-color: rgb(141, 41, 41);" /></radialGradient><radialGradient id="gradient-4" gradientUnits="userSpaceOnUse" cx="127.727" cy="116.674" r="45.581" gradientTransform="matrix(-0.468422, -1.651974, 0.962071, -0.272798, 74.446964, 391.898588)"><stop offset="0" style="stop-color: rgb(255, 0, 0);" /><stop offset="1" style="stop-color: rgb(141, 41, 41);" /></radialGradient><radialGradient id="gradient-6" gradientUnits="userSpaceOnUse" cx="43.926" cy="85.895" r="44.319" gradientTransform="matrix(1.145876, -0.154456, 0.133585, 0.991037, 18.521778, 10.448842)"><stop offset="0" style="stop-color: rgb(56, 16, 16);" /><stop offset="1" style="stop-color: rgb(255, 0, 0);" /></radialGradient><radialGradient id="gradient-7" gradientUnits="userSpaceOnUse" cx="70.257" cy="63.907" r="38.537" gradientTransform="matrix(-0.480251, 0.463812, -0.694689, -0.719311, 216.251059, 74.926092)"><stop offset="0" style="stop-color: rgb(255, 0, 0);" /><stop offset="1" style="stop-color: rgb(141, 41, 41);" /></radialGradient><radialGradient id="gradient-8" gradientUnits="userSpaceOnUse" cx="99.231" cy="116.778" r="19.209" gradientTransform="matrix(0.18829, -1.009689, 0.983052, 0.183324, -48.104751, 172.536193)"><stop offset="0" style="stop-color: rgb(51, 13, 13);" /><stop offset="1" style="stop-color: rgb(255, 0, 0);" /></radialGradient><radialGradient id="gradient-9" gradientUnits="userSpaceOnUse" cx="77.314" cy="119.309" r="20.726" gradientTransform="matrix(-1.623871, -1.229366, 0.603596, -0.79729, 122.245012, 298.564429)"><stop offset="0" style="stop-color: rgb(115, 42, 42);" /><stop offset="1" style="stop-color: rgb(255, 0, 0);" /></radialGradient><radialGradient id="gradient-10" gradientUnits="userSpaceOnUse" cx="91.275" cy="115.836" r="34.163"><stop offset="0" style="stop-color: rgb(255, 0, 0);" /><stop offset="1" style="stop-color: rgb(141, 41, 41);" /></radialGradient><radialGradient id="gradient-11" gradientUnits="userSpaceOnUse" cx="87.793" cy="121.847" r="7.864" gradientTransform="matrix(-0.305698, -2.998266, 0.994843, -0.101432, -6.587452, 397.432981)"><stop offset="0" style="stop-color: rgb(255, 0, 0);" /><stop offset="1" style="stop-color: rgb(95, 30, 30);" /></radialGradient><radialGradient id="gradient-12" gradientUnits="userSpaceOnUse" cx="77.806" cy="136.077" r="46.618" gradientTransform="matrix(1.007103, 0, 0, 1.028773, 3.509742, -3.183751)"><stop offset="0" style="stop-color: rgb(255, 0, 0);" /><stop offset="1" style="stop-color: rgb(141, 41, 41);" /></radialGradient><radialGradient id="gradient-13" gradientUnits="userSpaceOnUse" cx="34.864" cy="119.976" r="36.699" gradientTransform="matrix(-0.483999, -0.503131, 0.29077, -1.102951, 30.968876, 262.661348)"><stop offset="0" style="stop-color: rgb(67, 88, 0);" /><stop offset="1" style="stop-color: rgb(173, 183, 141);" /></radialGradient><radialGradient id="gradient-14" gradientUnits="userSpaceOnUse" cx="41.572" cy="155.958" r="37.322" gradientTransform="matrix(0.598359, 0, -0.729427, 1.012048, 147.786285, -2.069081)"><stop offset="0" style="stop-color: rgb(64, 78, 18);" /><stop offset="1" style="stop-color: #758d29" /></radialGradient><radialGradient id="gradient-15" gradientUnits="userSpaceOnUse" cx="107.613" cy="177.189" r="41.15" gradientTransform="matrix(0.722745, 0, 0, 0.553521, 18.427466, 66.94198)"><stop offset="0" style="stop-color: rgb(99, 121, 28);" /><stop offset="1" style="stop-color: rgb(62, 76, 14);" /></radialGradient><linearGradient id="gradient-16" gradientUnits="userSpaceOnUse" x1="79.232" y1="148.661" x2="79.232" y2="267.785" gradientTransform="matrix(0.025831, -0.999666, 0.153237, 0.00396, 43.953685, 274.434674)"><stop offset="0" style="stop-color: #bada55" /><stop offset="1" style="stop-color: rgb(59, 72, 14);" /></linearGradient><radialGradient id="gradient-2" gradientUnits="userSpaceOnUse" cx="33.089" cy="83.922" r="27.475" gradientTransform="matrix(0.758528, 1.916342, -0.693287, 0.585241, 83.304087, -39.360742)"><stop offset="0" style="stop-color: rgb(255, 0, 0);" /><stop offset="1" style="stop-color: rgb(141, 41, 41);" /></radialGradient></defs><path d="M 73.281 159.571 C 72.647 190.375 75.055 224.982 80.506 263.392 C 81.129 267.785 93.817 263.392 93.817 263.392 C 92.284 264.35 81.135 187.678 88.112 161.093 C 90.388 152.419 77.266 148.661 73.281 159.571 Z" style="stroke: rgba(0, 0, 0, 0); fill: url(#gradient-16);"><animate repeats='1' id='animate0' begin='indefinite' fill='freeze' calcMode='spline' keySplines='0 .06 0 .97' keyTimes='0;1' attributeName='d' dur='12000ms' to="M 69.281 159.571 C 68.647 190.375 71.055 224.982 76.506 263.392 C 77.129 267.785 89.817 263.392 89.817 263.392 C 88.284 264.35 77.135 187.678 84.112 161.093 C 86.388 152.419 73.266 148.661 69.281 159.571 Z" /></path><path d="M 46.953 119.95 C 45.235 117.533 42.584 112.794 41.114 110.103 C 40.46 108.906 40.478 108.549 40.039 108.114 C 35.996 104.1 26.687 103.38 26.687 103.38 C 26.687 103.38 34.854 97.115 39.086 97.698 C 44.858 98.492 50.547 103.452 55.298 110.008 C 62.512 119.962 72.703 149.303 72.703 149.303 C 72.703 149.303 55.029 131.31 46.953 119.95 Z".........完整代码请登录后点击上方下载按钮下载查看