js+css实现图片漂浮旋转模糊悬浮清晰动画效果代码-html代码-BFW代码库

js+css实现图片漂浮旋转模糊悬浮清晰动画效果代码

代码语言：html

代码描述：js+css实现图片漂浮旋转模糊悬浮清晰动画效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        body {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      background: #111111;
      height: 10000px;
    }
    .outputImage {
      position: absolute;
      width: 600px;
      border-radius: 6px;
      top: 50%;
      transform: scale(2) translateY(-50%);
      filter: blur(100px);
      transition: 3s filter, 2s transform;
      border-radius: 4px;
      overflow: hidden;
    }
    .isInitialized .outputImage {
      filter: none;
      border-radius: 4px;
      transform: scale(1) translateY(-50%);
    }
    .outputImage img {
      width: 100%;
      height: auto;
    }
    .inputImageList {
      position: absolute;
      top: 0;
      display: flex;
      flex-wrap: nowrap;
      width: 100vw;
      height: 300px;
      gap: 80px;
    }
    
    .inputImage {
      position: absolute;
      left: 0;
      top: 0;
      width: 0;
      height: 0;
      flex-shrink: 0;
      box-shadow: 0px 3px 20px #00000033;
      transform: translate(calc(50vw - 50%), calc(50vw - 50%));
      transform-origin: 50% 50%;
      cursor: pointer;
      transition: opacity 1000ms;
      opacity: 0;
    }
    
    .inputImage:hover {
      filter: none !important;
      z-index: 2;
      transition: 500ms filter;  
    }
    
    .inputImage img {
      position: absolute;
      width: 200px;
      height: auto;
      background: #ffcccc;
      border-radius: 4px;
      left: 0;
      top: 0;
      transform: translate(-50%, -50%);
    }
    </style>

</head>

<body>
    <!-- partial:index.partial.html -->
    <div class="outputImage">
        <img src="//repo.bfw.wiki/bfwrepo/image/5e62eef0d452a.png" alt="">
    </div>
    <div class="inputImageList">
        <div class="inputImage">
            <img src="//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png"></div>
        <div class="inputImage">
            <img src="//repo.bfw.wiki/bfwrepo/image/5e62ef41353c3.png"></div>
        <div class="inputImage">
            <img src="//repo.bfw.wiki/bfwrepo/image/5e62ef60656fd.png"></div>
        <div class="inputImage">
            <img src="//repo.bfw.wiki/bfwrepo/image/5e62ef82c83ea.png"></div>
        <div class="inputImage">
            <img src="//repo.bfw.wiki/bfwrepo/image/5fb34aff14a0f.png"></div>
        <div class="inputImage">
            <img src="//repo.bfw.wiki/bfwrepo/image/5fb34aff14a0f.png"></div>
        <div class="inputImage">
            <img src="//repo.bfw.wiki/bfwrepo/image/5fb34aff14a0f.png"></div>
        <div class="inputImage">
            <img src="//repo.bfw.wiki/bfwrepo/image/5fb34aff14a0f.png"></div>
        <div class="inputImage">
            <img src="//repo.bfw.wiki/bfwrepo/image/5fb34aff14a0f.png"></div>
        <div class="inputImage">
            <img src="//repo.bfw.wiki/bfwrepo/image/5fb34aff14a0f.png"></div>
        <div class="inputImage">
            <img src="//repo.bfw.wiki/bfwrepo/image/5fb34aff14a0f.png"></div>
        <div class="inputImage">
            <img src="//repo.bfw.wiki/bfwrepo/image/5fb34aff14a0f.png"></div>
        <div class="inputImage">
            <img src="//repo.bfw.wiki/bfwrepo/image/5fb34aff14.........完整代码请登录后点击上方下载按钮下载查看