div+css实现圆圈悬浮图片插入动画效果代码-html代码-BFW代码库

div+css实现圆圈悬浮图片插入动画效果代码

代码语言：html

所属分类：悬停

代码描述：div+css实现圆圈悬浮图片插入动画效果代码

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

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

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


  
  
  
<style>
@property --a {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: true;
}

img {
  --w: 200px; /* image width*/
  --b: 10px; /* border thickness */
  --g: 5px; /* the gap */
  --c: #5E8C6A;
  
  width: var(--w);
  padding: calc(1.5*var(--w));
  margin: calc(var(--b) + var(--g) - 1.5*var(--w));
  border-radius: 50%;
  --_p:calc(var(--w)/2 + var(--g) + var(--b)) 
    at calc(50% + 25%*cos(var(--a))) calc(75% - 25%*sin(var(--a)));
  background: radial-gradient(var(--_p),
      #0000    calc(100% - var(--b) - 1px),
      var(--c) calc(100%  - var(--b)));
  transform-origin: 50% 75%;
  rotate: calc(var(--a) - 90deg);
  clip-path: circle(var(--_p));
  cursor: pointer;
  --a: 0deg;
  transition: --a .5s;
}
img.alt {
  --_p:calc(var(--w)/2 + var(--g) + var(--b).........完整代码请登录后点击上方下载按钮下载查看