用html写一个玫瑰花绽开的动画

可以使用CSS3的动画效果来实现一个玫瑰花绽开的动画，以下是一个示例代码：

HTML部分：

<div class="rose"></div>

CSS部分：

.rose {
  width: 80px;
  height: 80px;
  background-image: radial-gradient(circle at center, #FF99CC 0%, #FF6699 50%, #FF3366 100%);
  border-radius: 50%;
  position: relative;
  animation: bloom 2s ease-out forwards;
}

.rose:before,
.rose:after {
  content: "";
  display: block;
  position: absolute;
  background-color: #fff;
}

.rose:before {
  width: 50%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 50% 0 0 50%;
  transform-origin: right;
  transform: rotate(-45deg);
  animation: petal-left 2s ease-out forwards;
}

.rose:after {
  width: 50%;
  height: 100%;
  top: 0;
  right: 0;
  border-radius: 0 50% 50% 0;
  transform-origin: left;
  transform: rotate(45deg);
  animation: petal-right 2s ease-out forwards;
}

@keyframes bloom {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes petal-left {
  0% {
    transform: rotate(-45deg) scale(0);
  }
  50% {
    transform: rotate(-45deg) scale(1.2);
  }
  100% {
    transform: rotate(-45deg) scale(1);
  }
}

@keyframes petal-right {
  0% {
    transform: rotate(45deg) scale(0);
  }
  50% {
    transform: rotate(45deg) scale(1.2);
  }
  100% {
    transform: rotate(45deg) scale(1);
  }
}

上述代码中，首先定义了一个带有class为“rose”的div元素，作为玫瑰花的主体。在CSS样式中，使用了CSS3的radial-gradient属性来设置渐变色的背景，同时设置了border-radius属性来让元素呈现圆形。

接着，在div元素的:before和:after伪元素中，分别定义了两个半圆形的元素，作为花瓣。这里使用了绝对定位、旋转和缩放等CSS3属性来实现花瓣的效果。

最后，在CSS样式中定义了三个关键帧动画，分别用于让玫瑰花绽开、左花瓣展开和右花瓣展开。通过将这三个动画应用到div元素和两个花瓣上，就可以实现一个玫瑰花绽开的动画效果了。