Html 展开圆形上的背景

Html 展开圆形上的背景,html,css,Html,Css,我试着做一个圆,从中心展开,改变颜色,我希望它以边界半径展开:50%,如果你看我做的例子,你就会明白我在说什么 感谢您的帮助您可以在插入框阴影上运行过渡,如下所示 div{ 宽度:300px; 高度:300px; 显示器:flex; 颜色:FFF; 证明内容:中心; 对齐项目:居中; 边界半径:50%; 背景:03BF60; 光标:指针; 过渡:长方体阴影.75s 0s,颜色.5s 0s; 框阴影:插入0 DCEDC8; } divp{ 颜色:继承; 文本对齐:居中; } div:悬停{ 颜色

我试着做一个圆,从中心展开,改变颜色,我希望它以边界半径展开:50%,如果你看我做的例子,你就会明白我在说什么

感谢您的帮助您可以在插入框阴影上运行过渡,如下所示

div{ 宽度:300px; 高度:300px; 显示器:flex; 颜色:FFF; 证明内容:中心; 对齐项目:居中; 边界半径:50%; 背景:03BF60; 光标:指针; 过渡:长方体阴影.75s 0s,颜色.5s 0s; 框阴影:插入0 DCEDC8; } divp{ 颜色:继承; 文本对齐:居中; } div:悬停{ 颜色:444; 盒影:插入0 150px DCEDC8; } 响应性设计。我是通过银行拿到这张证书的 学习HTML,CSS,网页设计,媒体查询等 使用关键帧、声明变量的动画 关于css和许多css组件。


你可以使用关键帧

<div class="shape">
  <div class="to-animate animate"></div>
</div>

.shape {
  border-radius: 50%;
  width: 200px;
  height: 200px;
  background: red;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.to-animate {
  width: 0;
  height: 0;
  background: blue;
}

.animate {
  animation: my-animation 1s forwards;
}

@keyframes my-animation {
  to {
    width:200px;
    height: 200px;
  }
}
关键帧是一种功能强大的工具,其文档如下:


在背景图像中使用圆形图像代替渐变非常容易实现您所需的动画。。。。我希望它对你有用欢迎来到Stack Overflow!寻求调试帮助的问题必须包含在问题本身中重现该问题所需的最短代码。注意-请不要滥用报价栏来规避此要求。