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(100% - 1px),#0000) no-repeat;
  mask: calc(50% + (50% - var(--r)*sin(var(--a))/cos(var(--a) - 90deg/8))*cos(360deg*0.125 + var(--o))) calc(50% + (50% - var(--r)*sin(var(--a))/cos(var(--a) - 90deg/8))*sin(360deg*0.125 + var(--o))) var(--g), calc(50% + (50% - var(--r)*sin(var(--a))/cos(var(--a) - 90deg/8))*cos(360deg*0.25 + var(--o))) calc(50% + (50% - var(--r)*sin(var(--a))/cos(var(--a) - 90deg/8))*sin(360deg*0.25 + var(--o))) var(--g), calc(50% + (50% - var(--r)*sin(var(--a))/cos(var(--a) - 90deg/8))*cos(360deg*0.375 + var(--o))) calc(50% + (50% - var(--r)*sin(var(--a))/cos(var(--a) - 90deg/8))*sin(360deg*0.375 + var(--o))) var(--g), calc(50% + (50% - var(--r)*sin(var(--a))/cos(var(--a) - 90deg/8))*cos(360deg*0.5 + var(--o))) calc(50% + (50% - var(--r)*sin(var(--a))/cos(var(--a) - 90deg/8))*sin(360deg*0.5 + var(--o))) var(--g), calc(50% + (50% - var(--r)*sin(var(--a))/cos(var(--a) - 90deg/8))*cos(360deg*0.625 + var(--o))) calc(50% + (50% - var(--r)*sin(var(--a))/cos(var(--a) - 90deg/8))*sin(360deg*0.625 + var(--o))) var(--g), calc(50% + (50% - var(--r)*sin(var(--a))/cos(var(--a) - 90deg/8))*cos(360deg*0.75 + var(--o))) calc(50% + (50% - var(--r)*sin(var(--a))/cos(var(--a) - 90deg/8))*sin(360deg*0.75 + var(--o))) var(--g), calc(50% + (50% - var(--r)*sin(var(--a))/cos(var(--a) - 90deg/8))*cos(360deg*0.875 + var(--o))) calc(50% + (50% - var(--r)*sin(var(--a))/cos(var(--a) - 90deg/8))*sin(360deg*0.875 + var(--o))) var(--g), calc(50% + (50% - var(--r)*sin(var(--a))/cos(var(--a) - 90deg/8))*cos(360deg*1 + var(--o))) calc(50% + (50% - var(--r)*sin(var(--a))/cos(var(--a) - 90deg/8))*sin(360deg*1 + var(--o))) var(--g), radial-gradient(100% 100%, #000 calc(var(--r)/tan(90deg/8)), #0000 calc(var(--r)/tan(90deg/8) + 1px)) intersect, radial-gradient(#000 0 0) exclude, calc(50% + (50% + var(--r)*sin(v.........完整代码请登录后点击上方下载按钮下载查看