RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / user-405557

Krovorgen's questions

Martin Hope
Krovorgen
Asked: 2022-09-27 16:15:44 +0000 UTC

svg中的齿轮动画

  • 3

我欢迎大家!你能告诉我如何实现齿轮本身的滚动吗?属性变换原点:50% 50%;没有帮助。挂在路上的班级

.generate-test__gear--1 {
    transform-origin: 50% 50%;
    animation: animateClouds 3.5s linear infinite;
}

.generate-test__gear--2 {
    transform-origin: 50% 50%;
    animation: animateClouds 3.5s linear infinite;
}

.generate-test__gear--3 {
    transform-origin: 50% 50%;
    animation: animateCloudsBack 3.5s linear infinite;
}

@keyframes animateClouds {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes animateCloudsBack {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}
<svg
    width="61"
    height="52"
    viewBox="0 0 61 52"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    class='generate-test__gears'
  >
    <path
      class='generate-test__gear--1' d="M19.4298 12.98C19.4698 12.66 19.4998 12.34 19.4998 12C19.4998 11.66 19.4698 11.34 19.4298 11.02L21.5398
      9.37C21.7298 9.22 21.7798 8.95 21.6598 8.73L19.6598 5.27C19.5698 5.11 19.3998 5.02 19.2198 5.02C19.1598
      5.02 19.0998 5.03 19.0498 5.05L16.5598 6.05C16.0398 5.65 15.4798 5.32 14.8698 5.07L14.4898 2.42C14.4598
      2.18 14.2498 2 13.9998 2H9.99984C9.74984 2 9.53984 2.18 9.50984 2.42L9.12984 5.07C8.51984 5.32 7.95984
      5.66 7.43984 6.05L4.94984 5.05C4.88984 5.03 4.82984 5.02 4.76984 5.02C4.59984 5.02 4.42984 5.11 4.33984
      5.27L2.33984 8.73C2.20984 8.95 2.26984 9.22 2.45984 9.37L4.56984 11.02C4.52984 11.34 4.49984 11.67
      4.49984 12C4.49984 12.33 4.52984 12.66 4.56984 12.98L2.45984 14.63C2.26984 14.78 2.21984 15.05 2.33984
      15.27L4.33984 18.73C4.42984 18.89 4.59984 18.98 4.77984 18.98C4.83984 18.98 4.89984 18.97 4.94984
      18.95L7.43984 17.95C7.95984 18.35 8.51984 18.68 9.12984 18.93L9.50984 21.58C9.53984 21.82 9.74984
      22 9.99984 22H13.9998C14.2498 22 14.4598 21.82 14.4898 21.58L14.8698 18.93C15.4798 18.68 16.0398
      18.34 16.5598 17.95L19.0498 18.95C19.1098 18.97 19.1698 18.98 19.2298 18.98C19.3998 18.98 19.5698
      18.89 19.6598 18.73L21.6598 15.27C21.7798 15.05 21.7298 14.78 21.5398 14.63L19.4298 12.98ZM17.4498
      11.27C17.4898 11.58 17.4998 11.79 17.4998 12C17.4998 12.21 17.4798 12.43 17.4498 12.73L17.3098
      13.86L18.1998 14.56L19.2798 15.4L18.5798 16.61L17.3098 16.1L16.2698 15.68L15.3698 16.36C14.9398
      16.68 14.5298 16.92 14.1198 17.09L13.0598 17.52L12.8998 18.65L12.6998 20H11.2998L11.1098 18.65L10.9498
      17.52L9.88984 17.09C9.45984 16.91 9.05984 16.68 8.65984 16.38L7.74984 15.68L6.68984 16.11L5.41984
      16.62L4.71984 15.41L5.79984 14.57L6.68984 13.87L6.54984 12.74C6.51984 12.43 6.49984 12.2 6.49984
      12C6.49984 11.8 6.51984 11.57 6.54984 11.27L6.68984 10.14L5.79984 9.44L4.71984 8.6L5.41984 7.39L6.68984
      7.9L7.72984 8.32L8.62984 7.64C9.05984 7.32 9.46984 7.08 9.87984 6.91L10.9398 6.48L11.0998 5.35L11.2998
      4H12.6898L12.8798 5.35L13.0398 6.48L14.0998 6.91C14.5298 7.09 14.9298 7.32 15.3298 7.62L16.2398
      8.32L17.2998 7.89L18.5698 7.38L19.2698 8.59L18.1998 9.44L17.3098 10.14L17.4498 11.27ZM11.9998 8C9.78984
      8 7.99984 9.79 7.99984 12C7.99984 14.21 9.78984 16 11.9998 16C14.2098 16 15.9998 14.21 15.9998 12C15.9998
      9.79 14.2098 8 11.9998 8ZM11.9998 14C10.8998 14 9.99984 13.1 9.99984 12C9.99984 10.9 10.8998 10 11.9998
      10C13.0998 10 13.9998 10.9 13.9998 12C13.9998 13.1 13.0998 14 11.9998 14Z"
      fill="#ABD18B"
    />
    <path
      class='generate-test__gear--2'
      d="M57.9532 15.6534C57.9799 15.44 57.9999 15.2267 57.9999 15C57.9999 14.7734 57.9799 14.56 57.9532
      14.3467L59.3599 13.2467C59.4866 13.1467 59.5199 12.9667 59.4399 12.82L58.1066 10.5134C58.0466 10.4067
      57.9332 10.3467 57.8132 10.3467C57.7732 10.3467 57.7332 10.3534 57.6999 10.3667L56.0399 11.0334C55.6932
      10.7667 55.3199 10.5467 54.9132 10.38L54.6599 8.61337C54.6399 8.45337 54.4999 8.33337 54.3332
      8.33337H51.6666C51.4999 8.33337 51.3599 8.45337 51.3399 8.61337L51.0866 10.38C50.6799 10.5467 50.3066
      10.7734 49.9599 11.0334L48.2999 10.3667C48.2599 10.3534 48.2199 10.3467 48.1799 10.3467C48.0666 10.3467
      47.9532 10.4067 47.8932 10.5134L46.5599 12.82C46.4732 12.9667 46.5132 13.1467 46.6399 13.2467L48.0466
      14.3467C48.0199 14.56 47.9999 14.78 47.9999 15C47.9999 15.22 48.0199 15.44 48.0466 15.6534L46.6399
      16.7534C46.5132 16.8534 46.4799 17.0334 46.5599 17.18L47.8932 19.4867C47.9532 19.5934 48.0666 19.6534
      48.1866 19.6534C48.2266 19.6534 48.2666 19.6467 48.2999 19.6334L49.9599 18.9667C50.3066 19.2334 50.6799
      19.4534 51.0866 19.62L51.3399 21.3867C51.3599 21.5467 51.4999 21.6667 51.6666 21.6667H54.3332C54.4999
      21.6667 54.6399 21.5467 54.6599 21.3867L54.9132 19.62C55.3199 19.4534 55.6932 19.2267 56.0399
      18.9667L57.6999 19.6334C57.7399 19.6467 57.7799 19.6534 57.8199 19.6534C57.9332 19.6534 58.0466
      19.5934 58.1066 19.4867L59.4399 17.18C59.5199 17.0334 59.4866 16.8534 59.3599 16.7534L57.9532
      15.6534ZM56.6332 14.5134C56.6599 14.72 56.6666 14.86 56.6666 15C56.6666 15.14 56.6532 15.2867 56.6332
      15.4867L56.5399 16.24L57.1332 16.7067L57.8532 17.2667L57.3866 18.0734L56.5399 17.7334L55.8466
      17.4534L55.2466 17.9067C54.9599 18.12 54.6866 18.28 54.4132 18.3934L53.7066 18.68L53.5999
      19.4334L53.4666 20.3334H52.5332L52.4066 19.4334L52.2999 18.68L51.5932 18.3934C51.3066 18.2734
      51.0399 18.12 50.7732 17.92L50.1666 17.4534L49.4599 17.74L48.6132 18.08L48.1466 17.2734L48.8666
      16.7134L49.4599 16.2467L49.3666 15.4934C49.3466 15.2867 49.3332 15.1334 49.3332 15C49.3332 14.8667
      49.3466 14.7134 49.3666 14.5134L49.4599 13.76L48.8666 13.2934L48.1466 12.7334L48.6132 11.9267L49.4599
      12.2667L50.1532 12.5467L50.7532 12.0934C51.0399 11.88 51.3132 11.72 51.5866 11.6067L52.2932
      11.32L52.3999 10.5667L52.5332 9.66671H53.4599L53.5866 10.5667L53.6932 11.32L54.3999 11.6067C54.6866
      11.7267 54.9532 11.88 55.2199 12.08L55.8266 12.5467L56.5332 12.26L57.3799 11.92L57.8466
      12.7267L57.1332 13.2934L56.5399 13.76L56.6332 14.5134ZM52.9999 12.3334C51.5266 12.3334 50.3332
      13.5267 50.3332 15C50.3332 16.4734 51.5266 17.6667 52.9999 17.6667C54.4732 17.6667 55.6666 16.4734
      55.6666 15C55.6666 13.5267 54.4732 12.3334 52.9999 12.3334ZM52.9999 16.3334C52.2666 16.3334 51.6666
      15.7334 51.6666 15C51.6666 14.2667 52.2666 13.6667 52.9999 13.6667C53.7332 13.6667 54.3332 14.2667
      54.3332 15C54.3332 15.7334 53.7332 16.3334 52.9999 16.3334Z"
      fill="#ABD18B"
    />
    <path
      class='generate-test__gear--3'
      d="M43.9065 37.3066C43.9598 36.88 43.9998 36.4533 43.9998 36C43.9998 35.5466 43.9598 35.12 43.9065
      34.6933L46.7198 32.4933C46.9731 32.2933 47.0398 31.9333 46.8798 31.64L44.2131 27.0266C44.0931 26.8133
      43.8665 26.6933 43.6265 26.6933C43.5465 26.6933 43.4665 26.7066 43.3998 26.7333L40.0798 28.0666C39.3865
      27.5333 38.6398 27.0933 37.8265 26.76L37.3198 23.2266C37.2798 22.9066 36.9998 22.6666 36.6665
      22.6666H31.3331C30.9998 22.6666 30.7198 22.9066 30.6798 23.2266L30.1731 26.76C29.3598 27.0933 28.6131
      27.5466 27.9198 28.0666L24.5998 26.7333C24.5198 26.7066 24.4398 26.6933 24.3598 26.6933C24.1331
      26.6933 23.9065 26.8133 23.7865 27.0266L21.1198 31.64C20.9465 31.9333 21.0265 32.2933 21.2798
      32.4933L24.0931 34.6933C24.0398 35.12 23.9998 35.56 23.9998 36C23.9998 36.44 24.0398 36.88 24.0931
      37.3066L21.2798 39.5066C21.0265 39.7066 20.9598 40.0666 21.1198 40.36L23.7865 44.9733C23.9065 45.1866
      24.1331 45.3066 24.3731 45.3066C24.4531 45.3066 24.5331 45.2933 24.5998 45.2666L27.9198
      43.9333C28.6131 44.4666 29.3598 44.9066 30.1731 45.24L30.6798 48.7733C30.7198 49.0933 30.9998
      49.3333 31.3331 49.3333H36.6665C36.9998 49.3333 37.2798 49.0933 37.3198 48.7733L37.8265 45.24C38.6398
      44.9066 39.3865 44.4533 40.0798 43.9333L43.3998 45.2666C43.4798 45.2933 43.5598 45.3066 43.6398
      45.3066C43.8665 45.3066 44.0931 45.1866 44.2131 44.9733L46.8798 40.36C47.0398 40.0666 46.9731 39.7066
      46.7198 39.5066L43.9065 37.3066ZM41.2665 35.0266C41.3198 35.44 41.3331 35.72 41.3331 36C41.3331
      36.28 41.3065 36.5733 41.2665 36.9733L41.0798 38.48L42.2665 39.4133L43.7065 40.5333L42.7731
      42.1466L41.0798 41.4666L39.6931 40.9066L38.4931 41.8133C37.9198 42.24 37.3731 42.56 36.8265
      42.7866L35.4131 43.36L35.1998 44.8666L34.9331 46.6666H33.0665L32.8131 44.8666L32.5998 43.36L31.1865
      42.7866C30.6131 42.5466 30.0798 42.24 29.5465 41.84L28.3331 40.9066L26.9198 41.48L25.2265
      42.16L24.2931 40.5466L25.7331 39.4266L26.9198 38.4933L26.7331 36.9866C26.6931 36.5733 26.6665
      36.2666 26.6665 36C26.6665 35.7333 26.6931 35.4266 26.7331 35.0266L26.9198 33.52L25.7331
      32.5866L24.2931 31.4666L25.2265 29.8533L26.9198 30.5333L28.3065 31.0933L29.5065 30.1866C30.0798
      29.76 30.6265 29.44 31.1731 29.2133L32.5865 28.64L32.7998 27.1333L33.0665 25.3333H34.9198L35.1731
      27.1333L35.3865 28.64L36.7998 29.2133C37.3731 29.4533 37.9065 29.76 38.4398 30.16L39.6531
      31.0933L41.0665 30.52L42.7598 29.84L43.6931 31.4533L42.2665 32.5866L41.0798 33.52L41.2665
      35.0266ZM33.9998 30.6666C31.0531 30.6666 28.6665 33.0533 28.6665 36C28.6665 38.9466 31.0531
      41.3333 33.9998 41.3333C36.9465 41.3333 39.3331 38.9466 39.3331 36C39.3331 33.0533 36.9465
      30.6666 33.9998 30.6666ZM33.9998 38.6666C32.5331 38.6666 31.3331 37.4666 31.3331 36C31.3331
      34.5333 32.5331 33.3333 33.9998 33.3333C35.4665 33.3333 36.6665 34.5333 36.6665 36C36.6665
      37.4666 35.4665 38.6666 33.9998 38.6666Z"
      fill="#57A216"
    />
  </svg>

css
  • 2 个回答
  • 10 Views
Martin Hope
Krovorgen
Asked: 2022-06-28 21:52:36 +0000 UTC

完成无限倒计时的计时器脚本

  • 0

我想知道如何改进脚本,以便计时器一直计数到午夜(例如),然后不会进入负数区域,而是再次开始 24 小时倒计时

const deadlineV1 = '2021-06-29';

setClockV1('.timer', deadlineV1);

function getTimeRemaining(endtime) {
    const t = Date.parse(endtime) - Date.parse(new Date());
    const days = Math.floor(t / (1000 * 60 * 60 * 24));
    const seconds = Math.floor((t / 1000) % 60);
    const minutes = Math.floor((t / 1000 / 60) % 60);
    const hours = Math.floor((t / (1000 * 60 * 60)) % 24);
    return {
        total: t,
        days: days,
        hours: hours,
        minutes: minutes,
        seconds: seconds,
    };
}

function getZero(num) {
    if (num >= 0 && num < 10) {
        return '0' + num;
    }
    return num;
}

function setClockV1(selector, endtime) {
    const timer = document.querySelector(selector);
    const days = timer.querySelector('#days-v1');
    const hours = timer.querySelector('#hours-v1');
    const minutes = timer.querySelector('#minutes-v1');
    const seconds = timer.querySelector('#seconds-v1');
    const timeInterval = setInterval(updateClock, 1000);
    updateClock();

    function updateClock() {
        const t = getTimeRemaining(endtime);

        days.innerHTML = getZero(t.days);
        hours.innerHTML = getZero(t.hours);
        minutes.innerHTML = getZero(t.minutes);
        seconds.innerHTML = getZero(t.seconds);

        if (t.total <= 0) {
            clearInterval(timeInterval);
        }
    }
}
<div class="timer">
      <div class="timer__block">
          <span id="days-v1"></span>
          <p>DAYS</p>
      </div>
      <div class="timer__block">
          <span id="hours-v1"></span>
          <p>HR</p>
      </div>
      <div class="timer__block">
          <span id="minutes-v1"></span>
          <p>MIN</p>
      </div>
      <div class="timer__block">
          <span id="seconds-v1"></span>
          <p>SEC</p>
      </div>
  </div>

javascript
  • 1 个回答
  • 10 Views
Martin Hope
Krovorgen
Asked: 2022-06-22 21:30:07 +0000 UTC

如何为 box-shadow 添加平滑度

  • 1

请告诉我如何使盒子阴影平滑。无法使用过渡

.button {
    padding: 11px 16px;
    border: none;
    border-radius: 5px;
    box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.28);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    color: #fff;
    background-color: #57a216;
    transition: box-shadow 0.5s, background-image 0.5s;
    cursor: pointer;
}
.button:hover {
    box-shadow: 0 3px 6px rgba(70, 131, 17, 0.3), inset 0 -2px 1px rgba(0, 0, 0, 0.28);
    background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)), #57a216;
}
<button class="button">Вперёл</button>

html
  • 1 个回答
  • 10 Views
Martin Hope
Krovorgen
Asked: 2022-04-29 03:51:12 +0000 UTC

使用网格从图片平铺

  • 0

ul,
ol {
    padding: 0;
}

ul {
    list-style: none;
}


img {
    display: block;
    max-width: 100%;
}

.gallery__examples {
    display: grid;
    grid-template: 280px / 580px 290px 250px;
    gap: 40px;
}
<ul class='gallery__examples'>
      <li class='gallery__item'>
          <img src='https://dummyimage.com/580x280/000/fff' alt='Фоточка'>
      </li>
      <li class='gallery__item'>
          <img src='https://dummyimage.com/290x280/000/fff' alt='Фоточка'>
      </li>
      <li class='gallery__item'>
          <img src='https://dummyimage.com/250x280/000/fff' alt='Фоточка'>
      </li>
      <li class='gallery__item'>
          <img src='https://dummyimage.com/250x280/000/fff' alt='Фоточка'>
      </li>
      <li class='gallery__item'>
          <img src='https://dummyimage.com/290x280/000/fff' alt='Фоточка'>
      </li>
      <li class='gallery__item'>
          <img src='https://dummyimage.com/580x280/000/fff' alt='Фоточка'>
      </li>
  </ul>

再会!请告诉我如何按照屏幕截图所示排列带有图片的瓷砖。有一个附加类和属性的想法 grid-column: 1/3 grid-row: 1/2; 但是仍然可以添加瓷砖,这是必须预见的。580px 290px 250px 1 line 250px 290px 580px 2 line 这个顺序会交替。我会很高兴得到任何帮助! 在此处输入图像描述

html
  • 1 个回答
  • 10 Views
Martin Hope
Krovorgen
Asked: 2022-03-30 02:48:34 +0000 UTC

反应。通过样式访问图像

  • 0

我欢迎大家。我很不擅长解释,但这个问题很有趣。请告诉我,我在 react 文件系统中的样式中看到了示例,即在 src 文件夹中(样式在组件旁边),例如,编写了以下路径:

$img-dir-path: '/img/';
background-image: url('#{$img-dir-path}event.png');

但其实这个img文件夹是公开的。它应该看起来像这样:

background-image: url('../../../public/img/event.png');

如果您以这种方式编写 jsx 标记:

<img src="img/main-bg.jpg" alt="" className={styles["main-page__img"]}/>

同样,该组件可以访问与公用文件夹相关的图片。请告诉我如何配置 react 以便搜索的路径不是相对于它所在的样式文件,而是相对于公共文件夹(使用组件如何执行此操作的示例)。

css
  • 1 个回答
  • 10 Views
Martin Hope
Krovorgen
Asked: 2022-03-15 15:36:01 +0000 UTC

单击块时如何延迟调用函数

  • 0

setAutoCopyFeatures()
    function setAutoCopyFeatures() {
        onclick_copySelf();

        function onclick_copySelf() {
            let copy = document.querySelectorAll('.test__promo');
            for( let i = 0; i < copy.length; i++ ) {
                copy[i].addEventListener('click', function() {
                    copyToClipboard( this.textContent );
                    ui_copyDone( this );
                });
            }
        }

        function copyToClipboard(str) {
            let area = document.createElement('textarea');
            document.body.appendChild(area);
            area.value = str;
            area.select();
            document.execCommand("copy");
            document.body.removeChild(area);
        }

        function ui_copyDone(btn) {
            let contentSaved = btn.innerHTML;
            btn.innerHTML = 'Скопировано';
            btn.classList.add('test__promo--copied');

            setTimeout(function() {
                btn.innerHTML = contentSaved;
                btn.classList.remove('test__promo--copied');
            }, 3000);
        }
    }
<span class="test__promo">157321</span>

有一个功能,点击时会将span的内容复制到剪贴板并显示“已复制”消息3秒,但如果单击超过1次,则“已复制”消息已被复制。告诉我如何进行延迟,以使“已复制”消息显示 3 秒,当它处于活动状态时,随后单击跨度不会复制其内部。提前致谢

javascript
  • 3 个回答
  • 10 Views
Martin Hope
Krovorgen
Asked: 2022-03-13 21:52:27 +0000 UTC

使用 stylelint 在 WebStorm 中自定义样式格式

  • 0

有趣的是,该项目在 .stylelintrc 文件中有一个规则列表,webstorm 会对它们做出反应并提示错误的地方,但是当使用 ctrl+alt+L 热键进行格式化时,linting 根据 webstorm 本身的规则发生. 有没有办法配置这个默认的 linting,以便它采用 .stylelintrc 中的规则?

webstorm
  • 2 个回答
  • 10 Views
Martin Hope
Krovorgen
Asked: 2022-03-10 00:55:33 +0000 UTC

li 标签高度问题

  • 0
    <nav className={styles['menu']}>
        <ul className={styles["menu__list"]}>
            <li className={styles["menu__list-item"]}>
                <a href="#" className={styles['menu__list-link']}>Profile</a
                ></li>
            <li className={styles["menu__list-item"]}>
                <a href="#" className={styles['menu__list-link']}>Messages</a>
            </li>
            <li className={styles["menu__list-item"]}>
                <a href="#" className={styles['menu__list-link']}>News</a>
            </li>
            <li className={styles["menu__list-item"]}>
                <a href="#" className={styles['menu__list-link']}>Music</a>
            </li>
            <li className={styles["menu__list-item"]}>
                <a href="#" className={styles['menu__list-link']}>Settings</a>
            </li>
        </ul>
    </nav>

有这样一个菜单,但是li标签的高度太大了,怎么做就要看里面的内容了,即 这样高度就像里面的a标签?否则,中间的定位看起来很歪。

.menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  grid-area: n;
  border-radius: 18px;
  height: 330px;
  text-align: center;
  background-color: #7da3a1;
}

.menu__list-link {
  font-size: 18px;
  line-height: 120%;
  text-decoration: none;
  color: #fff;
  transition: 0.5s all;
}

.menu__list-link:hover {
  color: #324851;
  transition: 0.5s all;
}

在此处输入图像描述

html
  • 1 个回答
  • 10 Views
Martin Hope
Krovorgen
Asked: 2022-02-17 15:41:08 +0000 UTC

在页面边框外放置块

  • 0

我想移动图片如下图所示在此处输入图像描述

但是出现了底部滚动,告诉我如何修复它,为图片和父级注册了以下样式:

.top__image {
    width: 523px;
    height: auto;
    transform: translateX(141%);
    position: absolute;
}
.top__image-img {
    position: absolute;
}
html
  • 1 个回答
  • 10 Views
Martin Hope
Krovorgen
Asked: 2022-02-11 20:25:20 +0000 UTC

翻转页面上的块

  • 2

在此处输入图像描述

页面上有这样一个倒置的块,告诉我如何实现它才能将它切成两半。

* {
  box-sizing: border-box;
}
.top {
    padding-top: 175px;
    min-height: 800px;
    background: linear-gradient(90deg, #8159c6 0%, #6c7cff 100%);
    
}
.block {
    position: absolute;
    left: 0;
    top: 660px;
    width: 100%;
    height: 153px;
    background: linear-gradient(90deg, #ff9d66 0%, #ff7256 100%);
}
<section class="top">
  <div class="block"></div>
</section>

html
  • 2 个回答
  • 10 Views
Martin Hope
Krovorgen
Asked: 2022-02-04 16:40:30 +0000 UTC

按钮悬停时的透明文本

  • 2

有一个按钮

在此处输入图像描述

.header {
    background-image: url(https://wallbox.ru/resize/640x480/wallpapers/main2/201717/art-ogni-kosmos-zvezdy-uzory-tumannost-rossyp-mercanie.jpg);
    height: 100vh;
}
.header__btn {
    border: 1px solid #fff;
    border-radius: 3px;
    padding: 6px 28px;
    text-transform: uppercase;
    color: #fff;
    background-color: transparent;
    transition: 0.5s all;
}

.header__btn:hover {
    color: transparent;
    background-color: #fff;
    transition: 0.5s all;
}
<header class="header">
<button class="header__btn">купить</button>
</header>

如何在悬停时使文本透明?

html
  • 2 个回答
  • 10 Views
Martin Hope
Krovorgen
Asked: 2022-01-31 18:23:43 +0000 UTC

html中更漂亮的设置

  • 0

谁能想到如何设置它

<div class="header__top" style='background-image: url("img/main-bg.jpg");'>

所以对于这个女主角,里面的路径用双引号写,其余的用单引号写,这样就不会发生冲突。更漂亮的设置:

module.exports = {
    trailingComma: 'es5',
    tabWidth: 4,
    semi: false,
    singleQuote: true,
}
html
  • 1 个回答
  • 10 Views
Martin Hope
Krovorgen
Asked: 2022-01-21 14:42:49 +0000 UTC

样式不会覆盖

  • 0

模态窗口之前

模态窗口后

请告诉我,我向按钮添加了一个事件处理程序:

    const modalTrigger = document.querySelector('[data-modal]');
    const modal = document.querySelector('.modal');
    const modalCloseBtn = document.querySelector('[data-close]');
    
    modalTrigger.addEventListener('click',  () => {
        modal.classList.add('show');
        modal.classList.remove('hide');
    });

    modalCloseBtn.addEventListener('click',  () => {
        modal.classList.add('hide');
        modal.classList.remove('show');
    });

有这些样式:

.show {
    display: block;
}
.hide {
    display: none;
}

如何使添加的类覆盖之前收到的样式?

javascript
  • 1 个回答
  • 10 Views
Martin Hope
Krovorgen
Asked: 2022-01-08 05:06:01 +0000 UTC

页面适配(图片问题)

  • 0

在此处输入图像描述

有这样一张图片,经过所有的调整大小操作,它的焦点已经完全移到了中心,这个焦点可以以某种方式向上移动吗?例如调整大小时的前 0,有类似的东西吗?或者你是怎么处理的?

html
  • 1 个回答
  • 10 Views
Martin Hope
Krovorgen
Asked: 2021-12-29 01:54:58 +0000 UTC

如何将表情符号添加到输入字段

  • 0

        <a href="">&#128512;</a>
        <a href="">&#128517;</a>
        <a href="">&#128554;</a>
        <a href="">&#129397;</a>
        <form name="form1" method="post" action="">
            <input type="text" name="textfield">
        </form>

如何实现工作,以便当我单击链接(微笑)时,将其添加到输入字段(输入)。如果有更好的方法来实现它,我很高兴听到你的想法!

html
  • 1 个回答
  • 10 Views
Martin Hope
Krovorgen
Asked: 2021-12-04 00:35:27 +0000 UTC

不使用 JS 在 HTML 页面中删除 <p>

  • 2

const shadowButton = () => {
    const button = document.querySelector('.button');
    const input = document.querySelector('.input');
    button.hidden = true;
    input.addEventListener("input", function () {
        button.hidden = !this.value.length;
    });
};
shadowButton();
const addParagraph = () => {
    const input = document.querySelector('.input');
    const paragraph = document.createElement('p');
    paragraph.innerText = input.value;
    const div = document.querySelector('.divshadow');
    div.append(paragraph);
    if (div.childNodes.length > 7) {
        div.childNodes[2].remove();
    }
};
<div class="divshadow">
    <input class="input" type="text">
    <button onclick="addParagraph()" class="button">Click</button>
</div>

如果 p 变为 > 5,则无法从 div 中删除 p。可能是子节点的错误实现。

javascript
  • 2 个回答
  • 10 Views
Martin Hope
Krovorgen
Asked: 2021-10-24 15:01:03 +0000 UTC

帮助优化生产代码。Python

  • 0

找出列表中两个数字的最大乘积。数字也可以是负数。代码正在运行,但测试程序发出 Time Limit Exceeded。如何优化?是否可以将现有的 2 for 转换为列表理解是很有趣的,因为我没能在 3 小时内做到这一点。

def composition():
    s = [int(i) for i in input().split()]
    lists = []
    total = 0
    for i in range(len(s)):
        for j in range(len(s)):
            if s[i] * s[j] > total and i != j:
                total = s[i] * s[j]
                lists.append(s[i])
                lists.append(s[j])
    a = lists[-1]
    b = lists[-2]
    if a < b:
        return a, b
    return b, a
print(*composition())
python
  • 3 个回答
  • 10 Views
Martin Hope
Krovorgen
Asked: 2020-10-03 22:05:03 +0000 UTC

一个数的除数之和

  • 1
n = int(input())
total = 0
total1 = 0
for i in range(1, n + 1):
    print(i, end='')
    for j in range(1, i + 1):
        if i % j == 0:
            total += 1
        print('+' * total1, end='')
    print()

程序的输入是一个自然数 nn。编写一个程序,以图形表示数字从 1 到 n(包括 1 到 n)的可分性。在每一行中,您需要打印下一个数字和与该数字的除数一样多的“+”字符。

输入数据格式 程序接收一个自然数作为输入。

输出数据格式 程序应显示从 11 到 nn 的数字的图形表示,每个数字在单独的行上。告诉我需要修复什么。

python
  • 4 个回答
  • 10 Views
Martin Hope
Krovorgen
Asked: 2020-09-26 02:58:14 +0000 UTC

数是否对称

  • 2

给定一个四位数的数字。确定其十进制表示法是否对称。如果数字是对称的,则打印 1,否则打印任何其他整数。该数字可以少于四位,那么您需要考虑其十进制表示法在左侧用零填充。

a = str(a)
if len(a) == 4:
    if a[1] == a[2] and a[0] == a[-1]:
        print('1')
    else:
        print('6')
if len(a) == 3:
    a = '0' + a
    if a[1] == a[2] and a[0] == a[-1]:
        print('1')
    else:
        print('6')

代码在其中一项测试中失败。我已经挠了 4 个小时了

python
  • 2 个回答
  • 10 Views

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    我看不懂措辞

    • 1 个回答
  • Marko Smith

    请求的模块“del”不提供名为“default”的导出

    • 3 个回答
  • Marko Smith

    "!+tab" 在 HTML 的 vs 代码中不起作用

    • 5 个回答
  • Marko Smith

    我正在尝试解决“猜词”的问题。Python

    • 2 个回答
  • Marko Smith

    可以使用哪些命令将当前指针移动到指定的提交而不更改工作目录中的文件?

    • 1 个回答
  • Marko Smith

    Python解析野莓

    • 1 个回答
  • Marko Smith

    问题:“警告:检查最新版本的 pip 时出错。”

    • 2 个回答
  • Marko Smith

    帮助编写一个用值填充变量的循环。解决这个问题

    • 2 个回答
  • Marko Smith

    尽管依赖数组为空,但在渲染上调用了 2 次 useEffect

    • 2 个回答
  • Marko Smith

    数据不通过 Telegram.WebApp.sendData 发送

    • 1 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5