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

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

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