di+css实现多个图片布局相册鼠标悬浮放大效果代码-html代码-BFW代码库

di+css实现多个图片布局相册鼠标悬浮放大效果代码

代码语言：html

代码描述：di+css实现多个图片布局相册鼠标悬浮放大效果代码

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

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

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

  
  
<style>
@import url(https://fonts.bunny.net/css?family=jura:300,500);
@layer base, demo;

@layer demo {
    body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(
        transparent,
        transparent 1px,
        light-dark(rgba(54 65 83 / .15),rgba(214 211 209 / .1)) 0 3px
      );
  
    background-size: auto 100%;
    pointer-events: none;
    z-index: -1;
  }
	/* bevel */
  :has(#shape-bevel:checked){
    .wrapper{
      --corner-type: bevel;
      --corner-type-center: bevel;
      --scale-center: .97; 
    }
  }
	/* round */
  :has(#shape-round:checked){
    .wrapper{
      --corner-type: scoop;
      --corner-type-center: round;
      --scale-center: .97; 
    }
  }
	/* notch */
  :has(#shape-notch:checked){
 .........完整代码请登录后点击上方下载按钮下载查看