css实现图片圆形波浪状边框悬浮旋转动画效果代码-html代码-BFW代码库

css实现图片圆形波浪状边框悬浮旋转动画效果代码

代码语言：html

所属分类：悬停

代码描述：css实现图片圆形波浪状边框悬浮旋转动画效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
@property --a {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: true;
}
@property --o {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: true;
}
/* the number of circles/petals */
img {
  --s: 350px;
  /* image size */
  --a: 28deg;
  /* this will control the curvature */
  --r: calc(var(--s)/(2 + 2/sin(90deg/8)));
  width: var(--s);
  padding: calc(2.2*var(--r));
  background: linear-gradient(60deg, #ffc50f, #D95B43);
  /* coloration */
  border-radius: 50%;
  clip-path: circle(49%);
  aspect-ratio: 1;
  box-sizing: border-box;
  --R: calc(var(--r)*cos(90deg/8)*(1/cos(90deg/8 - var(--a)) + 1/cos(90deg/8 + var(--a))));
  --g:/var(--R) var(--R) radial-gradient(50% 50%,#000 calc.........完整代码请登录后点击上方下载按钮下载查看