单个img标签实现鼠标悬浮图片放大效果代码-html代码-BFW代码库

单个img标签实现鼠标悬浮图片放大效果代码

代码语言：html

代码描述：单个img标签实现鼠标悬浮图片放大效果代码

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


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

<head>

  <meta charset="UTF-8">

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

img {
  --c: 22px; /* size of the border and circles */
  --g: 7px;  /* the gap*/
  --c1: #1693A7;
  --c2: #C8CF02;
  --c3: #E6781E;
  --c4: #CC0C39;
  
  padding: calc(var(--c) + var(--g));
  border-radius: 50%;
  cursor: pointer;
  --_s: /var(--c) var(--c) no-repeat;
  background:
    calc(50%*(1 + cos(var(--a) +   0deg))) calc(50%*(1 + sin(var(--a) +   0deg)))
    var(--_s) radial-gradient(var(--c1) 71%,#0000 72%), 
    calc(50%*(1 + cos(var(--a) +  90deg))) calc(50%*(1 + sin(var(--a) +  90deg))) 
    var(--_s) radial-gradient(var(--c2) 71%,#0000 72%), 
    calc(50%*(1 + cos(var(--a) -  90deg))) calc(50%*(1 + sin(var(--a) -  90deg)))
    var(--_s) radial-gradient(var(--c3) 71%,#0000 72%),
    calc(50%*(1 + cos(var(--a) + 180deg))) calc(50%*(1 +.........完整代码请登录后点击上方下载按钮下载查看