H5列表左滑效果

效果如图
在这里插入图片描述

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      background: #B7CBE8;
      font-size: 14px;
      margin: 0;
      line-height: 1.5;
      color: #333;
      font-family: Arial, sans-serif;
    }

    a {
      color: #34538b;
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }

    a img {
      border: 0;
    }

    input,
    select,
    textarea {
      font-size: 100%;
    }

    #header {
      height: 60px;
      padding: 0 0 0 40px;
      background-color: #a0b3d6;
    }

    #header .logo {
      margin-top: 12px;
      overflow: hidden;
      float: left;
    }

    .logo:empty {
      width: 167px;
      height: 43px;
      background: url(//cdn.zhangxinxu.com/php/image/zxx_home_logo.png) no-repeat;
    }

    #main {
      width: 100%;
      background: #beceeb;
      overflow: hidden;
    }

    #main h1 {
      line-height: 40px;
      margin: 0;
      text-align: center;
      font-size: 18px;
      background: #c1d5eb;
      font-family: 'kaiti', 'microsoft yahei';
      text-shadow: 0px 1px 0px #f2f2f2;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    #body {
      padding: 0;
      overflow: hidden;
    }

    #body .part {
      width: 50%;
      min-height: 400px;
      _height: 400px;
      background: white;
    }

    #code {
      float: left;
      margin-left: -1px;
      margin-bottom: -999em;
      padding-bottom: 999em;
    }

    #effect {
      float: right;
      margin-right: -1px;
      margin-bottom: -999em;
      padding-bottom: 999em;
    }

    #body h3 {
      line-height: 30px;
      margin: 0;
      font-size: 15px;
      background: #f0f3f9;
      padding-left: 10px;
      border-bottom: 1px solid #ededed;
      color: #4e4e4e;
      text-shadow: 0px 1px 0px white;
      font-family: 'microsoft yahei';
    }

    #footer {
      background: #B7CBE8;
      border-top: 3px solid #A7BFE8;
      line-height: 1.5;
      color: #333;
      font-size: 12px;
      padding: 15px 0;
      font-family: 'Lucida Grande', Verdana, Sans-Serif;
      text-align: center;
      text-shadow: 0 1px hsla(0, 0%, 100%, .3);
    }

    #footer img {
      margin-bottom: -3px;
    }

    .show {
      padding-bottom: 20px;
    }

    .show h5 {
      font-size: 13px;
      line-height: 20px;
      padding: 10px 0 2px 2px;
      margin: 0 0 0 8px;
    }

    .demo {
      padding: 10px;
      *zoom: 1;
    }

    .demo:after {
      display: table;
      content: "";
      clear: both;
    }

    .demo .remind {
      color: gray;
      font-size: 12px
    }

    pre {
      font: 14px/1.3 Consolas, Monaco, monospace;
      padding: 5px 10px;
      margin: 0;
      white-space: pre-wrap;
      word-wrap: break-word
    }

    #ad,
    .bota {
      display: block !important;
      text-align: center;
    }

    .ad,
    .topa {
      height: 60px;
      position: absolute;
      top: 0;
      right: 0;
      left: 250px;
      text-align: right;
      overflow: hidden;
    }

    @media screen and (max-width: 700px) {

      .ad,
      .topa {
        display: none;
      }
    }

    .light {
      background: #f0f3f9;
    }

    .description {
      font-size: 12px;
      color: gray;
    }

    #content {
      min-height: 500px;
      _height: 500px;
      background: white;
      border: solid #cad5eb;
      border-width: 0 2px;
      font-family: 'Lucida Grande', Verdana;
    }

    .article {
      font-family: Arial;
      padding: 10px 0;
      font-size: 12px;
      clear: both;
    }

    .article_new {
      margin: -31px 10px 0 0;
      line-height: 20px;
      font-family: Arial;
      padding: 5px 0;
      font-size: 12px;
      clear: both;
      text-align: right;
    }

    .article_new a {
      display: inline-block;
    }

    .table {
      display: table;
      width: 100%;
      table-layout: fixed;
    }

    .td {
      display: table-cell;
    }

    #back {
      line-height: 40px;
      margin-top: -40px;
      position: absolute;
      right: 20px;
      padding: 0 10px 0 13px;
      background-color: #fff;
      animation: tada 1s 1s;
      color: #cd0000;
      font-size: 12px;
    }

    @keyframes tada {
      from {
        transform: scale3d(1, 1, 1)
      }

      10%,
      20% {
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
      }

      30%,
      50%,
      70%,
      90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
      }

      40%,
      60%,
      80% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
      }

      to {
        transform: scale3d(1, 1, 1)
      }
    }

    @media screen and (max-width: 640px) {
      .M #body .part {
        width: auto;
        float: none;
        min-height: 200px;
        margin: auto;
        padding: 0
      }

      .M #back {
        right: 0;
        top: 10px;
        margin-top: 0;
      }

      .M #header {
        padding-left: 0;
      }

      .td {
        display: table;
      }

      video[width^="4"],
      video[width^="5"],
      video[width^="6"],
      video[width^="7"],
      video[width^="8"],
      video[width^="9"] {
        max-width: 100%;
        height: auto;
      }

      img:not([width]),
      video:not([width]) {
        max-width: 100%;
        height: auto;
      }
    }

    .m-bota {
      height: 100px;
      text-align: center;
    }

    @media print {

      .ad,
      .topa,
      #back,
      #ad,
      .bota {
        display: none !important;
      }

      #effect {
        margin-bottom: 0;
        padding-bottom: 0;
      }
    }

    body.preview #header,
    body.preview #main h1,
    body.preview #main>a,
    body.preview #code,
    body.preview #footer,
    body.preview #effect>h3 {
      display: none;
    }

    body.preview #effect {
      width: auto;
      float: none;
    }

    body.preview {
      background: none;
    }

    /* Generics */
    .DlHighlight .keyword {
      color: #00f;
    }

    .DlHighlight .builtin {
      color: #22c;
    }

    .DlHighlight .string {
      color: #282;
    }

    .DlHighlight .string .before,
    .DlHighlight .string .after {
      color: #040;
    }

    .DlHighlight .regexp {
      color: #b2c;
    }

    .DlHighlight .regexp .before,
    .DlHighlight .regexp .after {
      color: #509;
    }

    .DlHighlight .comment {
      color: #c22;
    }

    .DlHighlight .comment-line {
      color: #999;
    }

    .css .comment-line {
      color: #22c;
    }

    .DlHighlight .comment .before,
    .DlHighlight .comment .after {
      color: #baa;
    }

    .DlHighlight .comment-multiline {
      color: #999;
    }

    .DlHighlight .comment-multiline .before,
    .DlHighlight .comment-multiline .after {
      color: #999;
    }



    .DlHighlight .hashkey {
      color: #a51;
    }

    .DlHighlight .hasharrow {
      color: #f00;
    }

    .DlHighlight .paren {
      color: #000099;
    }

    .DlHighlight .operator {
      color: #077;
    }

    .DlHighlight .error {
      background-color: #c00;
      color: #fff;
    }

    .DlHighlight .defun {}

    .DlHighlight .line-numbers {
      float: left;
      margin-left: -4.5em;
      width: 3em;
      text-align: right;
      color: #999;
      font: 0.9em tahoma, verdana, sans-serif;
      padding-top: 0.05em;
    }

    .DlHighlight .line-numbers:after {
      content: "."
    }

    /* XML */

    .DlHighlight .xml-tag-close .before {
      color: #52a;
    }

    .DlHighlight .xml-entity {
      color: #b2a;
    }

    .DlHighlight .xml-entity .before,
    .DlHighlight .xml-entity .after {
      color: #607;
    }

    .DlHighlight .xml-tag {
      font-weight: normal;
    }

    /* CSS */
    .DlHighlight .css-block-open,
    .DlHighlight .css-block-close {
      color: #f0f;
    }

    .DlHighlight .css-class {
      color: #f0f;
    }

    .DlHighlight .css-pseudo-class {
      color: #f0f;
    }

    .DlHighlight .css-id {
      color: #ff00ff;
    }

    .DlHighlight .css-color-spec {
      color: #0000ff;
    }

    .DlHighlight .css-length {
      color: #0000ff;
    }

    .DlHighlight .css-length .after {}

    .DlHighlight .css-declaration-kw {
      color: #000099;
    }

    .DlHighlight .css-comma {
      color: red;
    }

    .list::-webkit-scrollbar {
      display: none;
    }

    .list {
      display: flex;
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;
      overflow-y: hidden;
    }

    .content {
      padding: .5rem 1rem;
      line-height: 1.5;
      flex: 0 0 calc(100vw - 2rem);
      font-size: 1rem;
      color: inherit;
      background-color: #fff;
      box-shadow: 0 1px #fff, 0 -1px #fff;
      position: relative;
    }

    .space {
      flex: 0 0 4rem;
    }

    .button {
      border: 0;
      padding: 0;
      font-size: 1rem;
      color: #fff;
      width: 4rem;
      height: 2.5rem;
      position: absolute;
      right: 0;
      outline: 0;
    }

    [data-type="danger"] {
      background-color: #eb4646;
    }

    [data-type="warning"] {
      background-color: #f59b00;
    }

    /* 自动右边缘定位 */
    .scroll-snap {
      scroll-snap-type: x mandatory;
    }

    .scroll-snap .space {
      scroll-snap-align: end;
    }

    .scroll-snap .content {
      scroll-snap-align: start;
    }

    /* 多个按钮定位 */
    .button:nth-of-type(2) {
      right: 4rem;
    }

    .button:nth-of-type(3) {
      right: 8rem;
    }

    .space:nth-child(4) {
      flex: 0 0 8rem;
    }

    .space:nth-child(5) {
      flex: 0 0 12rem;
    }

    /* 视差滚动 */
    .perspective {
      perspective: 1px;
      transform-style: preserve-3d;
      perspective-origin: 100% 50%;
    }

    .perspective .button:last-of-type {
      transform: translate3D(2rem, 0, -1px) scale(2);
    }

    .perspective .button:first-of-type {
      transform: translate3D(2rem, 0, -3px) scale(4);
    }
  </style>
</head>

<body>
  <div>
    <h4>1. 纯滚动</h4>
    <div class="list">
      <button class="button" data-type="danger">删除</button>
      <a href="javascript:" class="content">我是列表,试试左滑我</a>
      <s class="space"></s>
    </div>

    <h4>2. 带定位滚动</h4>
    <div class="list scroll-snap">
      <button class="button" data-type="danger">删除</button>
      <a href="javascript:" class="content">我是列表,试试左滑我</a>
      <s class="space"></s>
    </div>

    <h4>3. 多个按钮定位滚动</h4>
    <div class="list scroll-snap">
      <button class="button" data-type="danger">删除</button>
      <button class="button" data-type="warning">不显示</button>
      <a href="javascript:" class="content">我是列表,试试左滑我</a>
      <s class="space"></s>
    </div>

    <h4>4. 多个按钮定位视差滚动</h4>
    <div class="list scroll-snap perspective">
      <button class="button" data-type="danger">删除</button>
      <button class="button" data-type="warning">不显示</button>
      <a href="javascript:" class="content">我是列表,试试左滑我</a>
      <s class="space"></s>
    </div>
  </div>
</body>

</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
H5翻书效果源码是一段用于实现网页翻书效果的代码。H5是指HTML5,是一种用于构建和展示网页的技术标准。翻书效果是指在网页中实现书本翻页的动画效果。 以下是一个简单的H5翻书效果源码示例: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> /* 设置书籍容器的样式 */ .book { width: 400px; height: 300px; perspective: 1000px; margin: 100px auto; } /* 设置书页的样式 */ .page { width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; transition: transform 1s; } /* 设置左右两页的样式 */ .page-left { transform-origin: right center; } .page-right { transform-origin: left center; } /* 设置翻书动画的样式 */ .book:hover .page-left { transform: rotateY(-180deg); } .book:hover .page-right { transform: rotateY(180deg); } </style> </head> <body> <div class="book"> <div class="page page-left"> <!-- 左边页的内容 --> <h1>左页</h1> </div> <div class="page page-right"> <!-- 右边页的内容 --> <h1>右页</h1> </div> </div> </body> </html> ``` 以上代码使用HTML和CSS来实现翻书效果。通过设置书籍容器的样式和两个页的样式,利用CSS的`transform`属性和`transition`属性来实现页面的旋转动画效果。用户在鼠标悬停在书籍容器上时,左页和右页会分别翻转,实现翻书效果。 需要注意的是,以上只是一个简单的示例代码,实际使用时还需根据具体需求进行适当的修改和调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值