网站链接： 我爱捣鼓
当前位置： 首页 > 前端开发 > css

资讯类别

图片新闻

阅读排行

css实现透明字母图片轮播酷炫效果

2022/10/23 12:19:09

网站图片上的轮播效果，大家应该见得很多了，今天我们来实现一个更酷炫的轮播效果，通过css实现透明字母图片轮播的酷炫效果，如下图所示：<html><head> <meta charset="UTF-8"> <link rel="apple-touch-icon" type="ima…

        网站图片上的轮播效果，大家应该见得很多了，今天我们来实现一个更酷炫的轮播效果，通过css实现透明字母图片轮播的酷炫效果，如下图所示：

2.gif

<html>
<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" type="image/png"
    href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png">
  <meta name="apple-mobile-web-app-title" content="CodePen">
  <link rel="shortcut icon" type="image/x-icon"
    href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">
  <link rel="mask-icon" type="image/x-icon"
    href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg"
    color="#111">
  <title>css实现透明字母图片轮播酷炫效果</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,600" rel="stylesheet" type="text/css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .cont {
      position: relative;
      height: 100vh;
      overflow: hidden;
    }
    .slider {
      position: relative;
      height: 100%;
      transform: translate3d(0, 0, 0);
      will-change: transform;
      cursor: all-scroll;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    .slider.animation {
      transition: transform 750ms ease-in-out;
    }
    .slider.animation .slide__darkbg {
      transition: transform 750ms ease-in-out;
    }
    .slider.animation .slide__text {
      transition: transform 750ms ease-in-out;
    }
    .slider.animation .slide__letter {
      transition: transform 750ms ease-in-out;
    }
    .slide {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .slide--1 {
      left: 0%;
    }
    .slide--2 {
      left: 100%;
    }
    .slide--3 {
      left: 200%;
    }
    .slide--4 {
      left: 300%;
    }
    .slide--5 {
      left: 400%;
    }
    .slide__darkbg {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      transform: translate3d(0, 0, 0);
      will-change: transform;
      z-index: 10;
    }
    .slide__text-wrapper {
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      z-index: 15;
    }
    .slide__letter {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform: translate3d(0, 0, 0);
      -webkit-text-fill-color: transparent !important;
      -webkit-background-clip: text !important;
      font-size: 50vw;
      font-weight: 800;
      color: #000;
      z-index: 2;
      will-change: transform;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    .slide__text {
      font-size: 8vw;
      font-weight: 800;
      text-transform: uppercase;
      transform: translate3d(0, 0, 0);
      letter-spacing: 12px;
      color: #fff;
      will-change: transform;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    .slide__text:nth-child(odd) {
      z-index: 2;
    }
    .slide__text:nth-child(even) {
      z-index: 1;
    }
    .slide--1__darkbg {
      left: 0%;
      background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--1-min-min.jpg") center center no-repeat;
      background-size: cover;
      background-position: 0px center, 0px center;
      transform: translate3d(0, 0, 0);
      will-change: transform;
    }
    .slide--1__darkbg:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(11, 15, 39, 0.83);
    }
    .slide--1__letter {
      background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--1-min-min.jpg") center center no-repeat;
      background-position: 0px center, 0px center;
      background-size: cover;
    }
    .slide--2__darkbg {
      left: -50%;
      background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--2-min-min.jpg") center center no-repeat;
      background-size: cover;
      background-position: 0px center, 0px center;
      transform: translate3d(0, 0, 0);
      will-change: transform;
    }
    .slide--2__darkbg:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(11, 15, 39, 0.83);
    }
    .slide--2__letter {
      background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--2-min-min.jpg") center center no-repeat;
      background-position: 0px center, 0px center;
      background-size: cover;
    }
    .slide--3__darkbg {
      left: -100%;
      background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--3-min-min.jpg") center center no-repeat;
      background-size: cover;
      background-position: 0px center, 0px center;
      transform: translate3d(0, 0, 0);
      will-change: transform;
    }
    .slide--3__darkbg:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(11, 15, 39, 0.83);
    }
    .slide--3__letter {
      background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--3-min-min.jpg") center center no-repeat;
      background-position: 0px center, 0px center;
      background-size: cover;
    }
    .slide--4__darkbg {
      left: -150%;
      background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--4-min-min.jpg") center center no-repeat;
      background-size: cover;
      background-position: 0px center, 0px center;
      transform: translate3d(0, 0, 0);
      will-change: transform;
    }
    .slide--4__darkbg:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(11, 15, 39, 0.83);
    }
    .slide--4__letter {
      background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--4-min-min.jpg") center center no-repeat;
      background-position: 0px center, 0px center;
      background-size: cover;
    }
    .slide--5__darkbg {
      left: -200%;
      background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--5-min-min.jpg") center center no-repeat;
      background-size: cover;
      background-position: 0px center, 0px center;
      transform: translate3d(0, 0, 0);
      will-change: transform;
    }
    .slide--5__darkbg:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(11, 15, 39, 0.83);
    }
    .slide--5__letter {
      background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--5-min-min.jpg") center center no-repeat;
      background-position: 0px center, 0px center;
      background-size: cover;
    }
    .nav {
      position: absolute;
      bottom: 25px;
      left: 50%;
      transform: translateX(-50%);
      list-style-type: none;
      z-index: 10;
    }
    .nav__slide {
      position: relative;
      display: inline-block;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 2px solid #fff;
      margin-left: 10px;
      cursor: pointer;
    }
    @media screen and (max-width: 400px) {
      .nav__slide {
        width: 22px;
        height: 22px;
      }
    }
    .nav__slide:hover:after {
      transform: translate(-50%, -50%) scale(1, 1);
      opacity: 1;
    }
    .nav__slide:after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0, 0);
      width: 75%;
      height: 75%;
      border-radius: 50%;
      background-color: #fff;
      opacity: 0;
      transition: 300ms;
    }
    .nav__slide--1 {
      margin-left: 0;
    }
    .nav-active:after {
      transform: translate(-50%, -50%) scale(1, 1);
      opacity: 1;
    }
    .side-nav {
      position: absolute;
      width: 10%;
      height: 100%;
      top: 0;
      z-index: 20;
      cursor: pointer;
      opacity: 0;
      transition: 300ms;
    }
    .side-nav:hover {
      opacity: 0.1;
    }
    .side-nav--right {
      right: 0;
      background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #eed7ff 100%);
    }
    .side-nav--left {
      left: 0;
      background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #eed7ff 100%);
    }
    html {
      box-sizing: border-box;
      font-family: "Open Sans", sans-serif;
    }
    *,
    *:before,
    *:after {
      box-sizing: inherit;
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #000;
      overflow: hidden;
    }
  </style>
  <script>
    window.console = window.console || function (t) { };
  </script>
  <script>
    if (document.location.search.match(/type=embed/gi)) {
      window.parent.postMessage("resize", "*");
    }
  </script>
</head>
<body translate="no">
  <div>
    <div class="slider animation" style="transform: translate3d(-400%, 0px, 0px);">
      <div data-target="1" class="slide slide--1">
        <div class="slide__darkbg slide--1__darkbg" style="transform: translate3d(200%, 0px, 0px);"></div>
        <div class="slide__text-wrapper slide--1__text-wrapper">
          <div class="slide__letter slide--1__letter" style="transform: translate3d(0px, 0px, 0px);">
            A
          </div>
          <div class="slide__text slide__text--1" style="transform: translate3d(0px, 0px, 0px);">
            Am
          </div>
          <div class="slide__text slide__text--2" style="transform: translate3d(0px, 0px, 0px);">
            st
          </div>
          <div class="slide__text slide__text--3" style="transform: translate3d(0px, 0px, 0px);">
            er
          </div>
          <div class="slide__text slide__text--4" style="transform: translate3d(0px, 0px, 0px);">
            da
          </div>
          <div class="slide__text slide__text--5" style="transform: translate3d(0px, 0px, 0px);">
            m
          </div>
        </div>
      </div>
      <div data-target="2" class="slide slide--2">
        <div class="slide__darkbg slide--2__darkbg" style="transform: translate3d(200%, 0px, 0px);"></div>
        <div class="slide__text-wrapper slide--2__text-wrapper">
          <div class="slide__letter slide--2__letter" style="transform: translate3d(0px, 0px, 0px);">
            R
          </div>
          <div class="slide__text slide__text--1" style="font-size: 12vw; transform: translate3d(0px, 0px, 0px);">
            R
          </div>
          <div class="slide__text slide__text--2" style="font-size: 12vw; transform: translate3d(0px, 0px, 0px);">
            o
          </div>
          <div class="slide__text slide__text--3" style="font-size: 12vw; transform: translate3d(0px, 0px, 0px);">
            m
          </div>
          <div class="slide__text slide__text--4" style="font-size: 12vw; transform: translate3d(0px, 0px, 0px);">
            e
          </div>
        </div>
      </div>
      <div data-target="3" class="slide slide--3">
        <div class="slide__darkbg slide--3__darkbg" style="transform: translate3d(200%, 0px, 0px);"></div>
        <div class="slide__text-wrapper slide--3__text-wrapper">
          <div class="slide__letter slide--3__letter" style="transform: translate3d(0px, 0px, 0px);">
            N
          </div>
          <div class="slide__text slide__text--1" style="transform: translate3d(0px, 0px, 0px);">
            Ne
          </div>
          <div class="slide__text slide__text--2" style="transform: translate3d(0px, 0px, 0px);">
            w—
          </div>
          <div class="slide__text slide__text--3" style="transform: translate3d(0px, 0px, 0px);">
            Yo
          </div>
          <div class="slide__text slide__text--4" style="transform: translate3d(0px, 0px, 0px);">
            rk
          </div>
        </div>
      </div>
      <div data-target="4" class="slide slide--4">
        <div class="slide__darkbg slide--4__darkbg" style="transform: translate3d(200%, 0px, 0px);"></div>
        <div class="slide__text-wrapper slide--4__text-wrapper">
          <div class="slide__letter slide--4__letter" style="transform: translate3d(0px, 0px, 0px);">
            S
          </div>
          <div class="slide__text slide__text--1" style="transform: translate3d(0px, 0px, 0px);">
            Si
          </div>
          <div class="slide__text slide__text--2" style="transform: translate3d(0px, 0px, 0px);">
            ng
          </div>
          <div class="slide__text slide__text--3" style="transform: translate3d(0px, 0px, 0px);">
            ap
          </div>
          <div class="slide__text slide__text--4" style="transform: translate3d(0px, 0px, 0px);">
            or
          </div>
          <div class="slide__text slide__text--5" style="transform: translate3d(0px, 0px, 0px);">
            e
          </div>
        </div>
      </div>
      <div data-target="5" class="slide slide--5">
        <div class="slide__darkbg slide--5__darkbg" style="transform: translate3d(200%, 0px, 0px);"></div>
        <div class="slide__text-wrapper slide--5__text-wrapper">
          <div class="slide__letter slide--5__letter" style="transform: translate3d(0px, 0px, 0px);">
            P
          </div>
          <div class="slide__text slide__text--1" style="transform: translate3d(0px, 0px, 0px);">
            P
          </div>
          <div class="slide__text slide__text--2" style="transform: translate3d(0px, 0px, 0px);">
            r
          </div>
          <div class="slide__text slide__text--3" style="transform: translate3d(0px, 0px, 0px);">
            a
          </div>
          <div class="slide__text slide__text--4" style="transform: translate3d(0px, 0px, 0px);">
            g
          </div>
          <div class="slide__text slide__text--5" style="transform: translate3d(0px, 0px, 0px);">
            u
          </div>
          <div class="slide__text slide__text--6" style="transform: translate3d(0px, 0px, 0px);">
            e
          </div>
        </div>
      </div>
    </div>
    <ul>
      <!-- <li data-target="1" class="nav__slide nav__slide--1"></li>
<li data-target="2" class="nav__slide nav__slide--2"></li>
<li data-target="3" class="nav__slide nav__slide--3"></li>
<li data-target="4" class="nav__slide nav__slide--4"></li>
<li data-target="5" class="nav__slide nav__slide--5 nav-active"></li> -->
    </ul>
  </div>
  <div data-target="right" class="side-nav side-nav--right"></div>
  <div data-target="left" class="side-nav side-nav--left"></div>
  <script
    src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script id="rendered-js">
    $(document).ready(function () {
      const $cont = $('.cont');
      const $slider = $('.slider');
      const $nav = $('.nav');
      const winW = $(window).width();
      const animSpd = 750; // Change also in CSS
      const distOfLetGo = winW * 0.2;
      let curSlide = 1;
      let animation = false;
      let autoScrollVar = true;
      let diff = 0;
      // Generating slides
      let arrCities = ['Amsterdam', 'Rome', 'New—York', 'Singapore', 'Prague']; // Change number of slides in CSS also
      let numOfCities = arrCities.length;
      let arrCitiesDivided = [];
      arrCities.map(city => {
        let length = city.length;
        let letters = Math.floor(length / 4);
        let exp = new RegExp(".{1," + letters + "}", "g");
        arrCitiesDivided.push(city.match(exp));
      });
      let generateSlide = function (city) {
        let frag1 = $(document.createDocumentFragment());
        let frag2 = $(document.createDocumentFragment());
        const numSlide = arrCities.indexOf(arrCities[city]) + 1;
        const firstLetter = arrCitiesDivided[city][0].charAt(0);
        const $slide =
          $(`<div data-target="${numSlide}" class="slide slide--${numSlide}">
<div class="slide__darkbg slide--${numSlide}__darkbg"></div>
<div class="slide__text-wrapper slide--${numSlide}__text-wrapper"></div>
</div>`);
        const letter =
          $(`<div class="slide__letter slide--${numSlide}__letter">
${firstLetter}
</div>`);
        for (let i = 0, length = arrCitiesDivided[city].length; i < length; i++) {
          if (window.CP.shouldStopExecution(0)) break;
          const text =
            $(`<div class="slide__text slide__text--${i + 1}">
${arrCitiesDivided[city][i]}
</div>`);
          frag1.append(text);
        } window.CP.exitedLoop(0);
        const navSlide = $(`<li data-target="${numSlide}" class="nav__slide nav__slide--${numSlide}"></li>`);
        frag2.append(navSlide);
        $nav.append(frag2);
        $slide.find(`.slide--${numSlide}__text-wrapper`).append(letter).append(frag1);
        $slider.append($slide);
        if (arrCities[city].length <= 4) {
          $('.slide--' + numSlide).find('.slide__text').css("font-size", "12vw");
        }
      };
      for (let i = 0, length = numOfCities; i < length; i++) {
        if (window.CP.shouldStopExecution(1)) break;
        generateSlide(i);
      } window.CP.exitedLoop(1);
      $('.nav__slide--1').addClass('nav-active');
      // Navigation
      function bullets(dir) {
        $('.nav__slide--' + curSlide).removeClass('nav-active');
        $('.nav__slide--' + dir).addClass('nav-active');
      }
      function timeout() {
        animation = false;
      }
      function pagination(direction) {
        animation = true;
        diff = 0;
        $slider.addClass('animation');
        $slider.css({
          'transform': 'translate3d(-' + (curSlide - direction) * 100 + '%, 0, 0)'
        });
        $slider.find('.slide__darkbg').css({
          'transform': 'translate3d(' + (curSlide - direction) * 50 + '%, 0, 0)'
        });
        $slider.find('.slide__letter').css({
          'transform': 'translate3d(0, 0, 0)'
        });
        $slider.find('.slide__text').css({
          'transform': 'translate3d(0, 0, 0)'
        });
      }
      function navigateRight() {
        if (!autoScrollVar) return;
        if (curSlide >= numOfCities) return;
        pagination(0);
        setTimeout(timeout, animSpd);
        bullets(curSlide + 1);
        curSlide++;
      }
      function navigateLeft() {
        if (curSlide <= 1) return;
        pagination(2);
        setTimeout(timeout, animSpd);
        bullets(curSlide - 1);
        curSlide--;
      }
      function toDefault() {
        pagination(1);
        setTimeout(timeout, animSpd);
      }
      // Events
      $(document).on('mousedown touchstart', '.slide', function (e) {
        if (animation) return;
        let target = +$(this).attr('data-target');
        let startX = e.pageX || e.originalEvent.touches[0].pageX;
        $slider.removeClass('animation');
        $(document).on('mousemove touchmove', function (e) {
          let x = e.pageX || e.originalEvent.touches[0].pageX;
          diff = startX - x;
          if (target === 1 && diff < 0 || target === numOfCities && diff > 0) return;
          $slider.css({
            'transform': 'translate3d(-' + ((curSlide - 1) * 100 + diff / 30) + '%, 0, 0)'
          });
          $slider.find('.slide__darkbg').css({
            'transform': 'translate3d(' + ((curSlide - 1) * 50 + diff / 60) + '%, 0, 0)'
          });
          $slider.find('.slide__letter').css({
            'transform': 'translate3d(' + diff / 60 + 'vw, 0, 0)'
          });
          $slider.find('.slide__text').css({
            'transform': 'translate3d(' + diff / 15 + 'px, 0, 0)'
          });
        });
      });
      $(document).on('mouseup touchend', function (e) {
        $(document).off('mousemove touchmove');
        if (animation) return;
        if (diff >= distOfLetGo) {
          navigateRight();
        } else if (diff <= -distOfLetGo) {
          navigateLeft();
        } else {
          toDefault();
        }
      });
      $(document).on('click', '.nav__slide:not(.nav-active)', function () {
        let target = +$(this).attr('data-target');
        bullets(target);
        curSlide = target;
        pagination(1);
      });
      $(document).on('click', '.side-nav', function () {
        let target = $(this).attr('data-target');
        if (target === 'right') navigateRight();
        if (target === 'left') navigateLeft();
      });
      $(document).on('keydown', function (e) {
        if (e.which === 39) navigateRight();
        if (e.which === 37) navigateLeft();
      });
      $(document).on('mousewheel DOMMouseScroll', function (e) {
        if (animation) return;
        let delta = e.originalEvent.wheelDelta;
        if (delta > 0 || e.originalEvent.detail < 0) navigateLeft();
        if (delta < 0 || e.originalEvent.detail > 0) navigateRight();
      });
    });
//# sourceURL=pen.js
  </script>
  <div id="xl_chrome_ext_{4DB361DE-01F7-4376-B494-639E489D19ED}" style="display: none;">
    <div></div>
    <a id="xl_chrome_ext_download" href="javascript:;">下载视频</a>
    <a id="xl_chrome_ext_close" href="javascript:;"></a>
  </div>
</body>
</html>

        查看在线实例

        通过以上内容我们知道了css如何实现透明字母图片轮播酷炫效果？感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容，希望对大家有所帮助！引用本文内容时，请注明出处！谢谢合作！

上一篇：css3实现点击按钮向下展示内容的效果

下一篇：css制作酷炫的魔术牌效果

相关资讯

  • css实现多种促销banner样式

    电商节双十一、双十二经常需要搞促销，今天我们就来介绍几款通过css实现的促销banner样式，如下图所示：<html><head> <meta charset="UTF-8"> <link rel="apple-touch-icon" type="image/png" href="https…

    2022/11/24 12:06:35

  • css实现漂亮的苹果风格组件效果

    苹果IOS系统的界面很漂亮，今天我们就用css实现漂亮的类似苹果风格的组件效果。如下图所示：<html><head> <meta charset="UTF-8"><style data-styles="">ion-icon{visibility:hidden}.hydrated{visibility:inherit}</st…

    2022/11/24 10:36:42

  • css实现图片和背景同时滑动的酷炫效果

    我们曾经介绍过很多种图片滑动的效果，今天我们使用css实现一个图片和背景同时滑动的酷炫效果，如下图所示：<html><head> <meta charset="UTF-8"> <link rel="apple-touch-icon" type="image/png" href…

    2022/11/22 21:57:11

  • css实现酷炫Flash文字跳动动画效果

    Flash虽然已被淘汰了，但它所实现的一些效果还是非常棒的，今天我们就用css实现一个酷炫的Flash文字跳动的经典动画效果，如下图所示：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <link rel="apple-touch-icon…

    2022/11/22 21:39:50

  • 设置英文首字母大写的css属性是什么?

    设置CSS text-transform 的属性为capitalize就可以实现英文首字母大写。 定义和用法　　text-transform 属性控制文本的大小写。 属性值 值 描 述 none 默认。定义带有小写字…

    2021/7/14 20:35:17

  • 只让页面显示横滚动条，不显示竖滚动条如何实现?

    只让页面显示横滚动条，不显示竖滚动条的方法其实很简单，主要用到body的两个css属性 overflow和 overflow-y，如下所示：body { overflow:scroll; overflow-y:hidden;}

    2021/2/28 21:45:25

  • 网页的滚动条样式可以修改吗?如何修改?

    网页的滚动条样式可以修改的，主要是使用css来控制那如何修改呢？如下代码：<div class="inner"> <div class="innerbox"> <p style="height:200px;">这是内容111</p> <p style="hei…

    2021/2/28 21:15:24

  • css如何实现6张图片均匀排列在一行?

    css部分如下:img{width:120px; height:80px;float:left;margin-right:16px;}.img3{margin-right:0;}html部分如下：<img src="images/001.jpg" /><img src="images/002.jpg" /><img src="images/003.jpg" /><img src=…

    2021/2/28 21:10:01
首页 | 前端开发 | web开发 | 数据库 | 移动开发 | 服务器 | 资源下载 | 在线留言 | 友情链接

版权所有 我爱捣鼓 陕ICP备18011381号-3

联系我们：2496194785@qq.com

Copyright © 2020-2021 woaidaogu.com Corporation,All Rights Reserved.

周一至周日 9:00-17:30

在线客服