css+div实现鼠标滚动图片上下滚动动画效果代码-html代码-BFW代码库

css+div实现鼠标滚动图片上下滚动动画效果代码

代码语言：html

代码描述：css+div实现鼠标滚动图片上下滚动动画效果代码

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

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

<head>


    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="x-apple-disable-message-reformatting">
    <meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no">
    <meta name="color-scheme" content="light">
    <meta name="supported-color-schemes" content="light">
  
    <style>
      :root {
      color-scheme: light;
      supported-color-schemes: light;
      }
      html,
      body {
      margin: 0 auto !important;
      padding: 0 !important;
      height: 100% !important;
      width: 100% !important;
      }
      /* center email on Android 4.4 - margin reset */
      div[style*="margin: 16px 0"] {
      margin: 0 !important;
      }
      table,
      td {
      mso-table-lspace: 0pt !important;
      mso-table-rspace: 0pt !important;
      }
      table {
      border-spacing: 0 !important;
      border-collapse: collapse !important;
      table-layout: fixed !important;
      margin: 0 auto !important;
      mso-table-lspace: 0;
      mso-table-rspace: 0;
      }
      /* La poste hack*/
      h2,
      h3 {
      padding: 0;
      margin: 0;
      border: 0;
      background: none;
      }
    </style>
    <style>
      /*
      When I target the direct parent of the scrollable content, the rendering is not great, because the images jump and appear unstable when scrolling. For this reason, here I target the main container of the email :
      .scroll-container{
      height:600px;
      overflow-y:scroll;
      scroll-timeline: --page-scroll block;
      }*/
      #proton-root .content-container,
      #ReadMailMainWrapper .content-container{
      display:block !important;
      }
      #proton-root .img,
      #ReadMailMainWrapper .img{
      display:none !important;
      }
      @supports (animation-timeline: view()) {
      .columns {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      width: 100%;
      max-width: 680px;
      margin: 0 auto;
      position: relative;
      overflow-y: hidden;
      }
      .column {
      --column-of.........完整代码请登录后点击上方下载按钮下载查看