Frontender's questions

有以下带动画的块（轮）：

@keyframes new-wheel-shake-1 {
    0% {
        transform: rotate(-1040deg)
    }
    50% {
        transform: rotate(-1048deg)
    }
    100% {
        transform: rotate(-1040deg)
    }
}

.shake1 {
    animation: new-wheel-shake-1 2s ease-in-out infinite;
}

在这里，当页面加载时，滚轮立即向左/向右旋转而不停止。

当我单击按钮时，我需要删除该类.shake1并添加该类，.rotate1以便轮子开始旋转：

@keyframes rotate {
    100% {
        transform: rotate(2160deg);
    }
}

.rotate1 {
    animation: rotate 4s ease-in-out forwards;
}

但是当你添加一个类时，会发生跳跃，因为轮子旋转角度不同。

是否可以.rotate1在完成循环后以某种方式添加一个类.shake1，这样就不会跳转？

有一个文本块，其中包含一个长词。

如何使用 CSS 将这个单词一个字母一个字母地移动到一个新行，这样单词就不会超出块？

有一个网站，其数据库重 2 TB。如果由于 SSD 的大小而无法将此类数据库下载到计算机上，我如何将站点转移到另一个主机？

页面上有单独的标签code，标签code内也有标签pre。如何设置标签的样式code，使其仅适用于不在标签内的单个标签pre？

样式必须仅适用于<code>code text</code>

我这样做，但我不确定它是否正确：

*:not(pre)>code {
  white-space: nowrap;
  padding: 2px 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background: #e9eaec;
  font-size: 14px;
  white-space: pre-wrap;
  word-break: break-all;
}

<pre>
    <code>
      Object object = getMyList();
      List&lt;Integer&gt; list = (List&lt;Integer&gt;) object;
    </code>
</pre>
<code>code text</code>

有必要在块内做这样一个循环滚动的图像，它比图像的高度要小。

https://recordit.co/C00z9EAHW0

我执行以下操作，我的图片向上滚动，然后向下滚动并停止。做错了什么？看起来 setInterval 在 2-- 迭代后停止工作。

function scrollImage(block, image) {
  var blockHeight = $(block).height();
  var imageHeight = $(image).height();
  var different = imageHeight - blockHeight;
  setInterval(function() {
    if ($(image).css("top") == "0px") {
      $(image).animate({
        top: -different
      }, 6000);
    } else {
      $(image).animate({
        top: "0px"
      }, 6000);
    }
  }, 1);
}

scrollImage(".js-block1", ".js-image1");

.block1 .image_block {
  height: 300px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  position: relative;
}

.block1 .image {
  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="image_block js-block1">
  <img class="image js-image1" src="//via.placeholder.com/150x600" alt="image">
</div>

有这个代码：

.exit_popup .close_button {
    position: absolute;
    right: 30px;
    top: 10px;
    display: inline-block;
    cursor: pointer;
    color: #fa5258;
    opacity: 1;
    text-decoration: none;
    z-index: 20;
    font-size: 44px;
    line-height: 1
}

.exit_popup .close_button:after {
    content: '\f00d';
    font-family: FontAwesome;
    font-weight: 400;
    font-style: normal
}

在 IE11 中，:after 的样式被划掉：

有没有视频：

<video id="video" controls="controls" controlslist="nodownload" autoplay>
    <source src="files/index-en.mp4" type="video/mp4">
</video>

自动播放功能不适用于除 IE 以外的所有浏览器。这是错误还是浏览器限制？

我通过 Yandex.Translate API 翻译文本，如下所示：

$api_key = "key";
$lang = "en-ru";
$text = "juice";

$result = file_get_contents("https://translate.yandex.net/api/v1.5/tr.json/translate?" . 
    "key=" . $api_key . "&" . 
    "text=" . $text . "&" . 
    "lang=" . $lang);

$result = json_decode($result, true);
$ru_test = $result['text'][0];
echo $ru_test;

如果我们在 $text 变量中有一个单词，那么一切都会翻译，但是如果有 2 个单词，那么就没有 ( $text = "apple juice")。如何正确拼写多行文字？

Gives error " Warning: file_get_contents( https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20200112T161657Z.ec6b45005112fff7.a163d5db42f342b0fe053523d19ee583d858f54b&text=enjuiced858f54b&text=enjuiced858f54b&text=enjuiced858f54b&text=enjuiced858f54b&text=enjuiced858f54b&text =enjuiced858f54b&text=enjuiced858f54b “打开流：HTTP 请求失败！HTTP/1.1 400 错误请求在 W:\domains\lessons.loc\index.php 第 25 行”

该网站有一个二级菜单（蓝色），在移动设备上可以左右翻转手指。如何制作这样的菜单？

CSS 文件有以下几行：

background: url(../../path/image1.png);
background: url(../../../path/image2.png);
background: url(../../../path/image3.png);

如何将所有路径变为一种形式：

background: url(../path/image1.png);
background: url(../path/image2.png);
background: url(../path/image3.png);

有一个页面：http://project/dev/works/site/。

该文件夹dev包含一个文件夹styles。

在页面上，样式的路径是相对写的：../../../styles/styles.css，并打开在http://project/styles/styles.css。

是否可以通过 PHP 获取该文件的绝对路径以便读取它？

有一个密码生成器站点。在那里，当你按下按钮时，会有一个平滑的滚动。如何做同样的事情？

有一个字符串img/egor/фывыв/ 我正在尝试使用正则表达式查找子字符串 img/ (.*\/)，但它会找到所有出现的地方。如何限制到第一？和一个单独的注册。最后一次出现的表达式。

有2行：

http://site.com/dir/
../img/image.jpg

我正在寻找带有正则表达式的 img 子字符串。如何做出改变。让它发生

http://site.com/img/dir/

对于给定的字符串，../img/egor/slider-photo.png我正在尝试../img/ 使用正则表达式查找子字符串/\.\./.*?//，但它拒绝工作。

fields 有一个方法select()，你可以这样复制：

$(document).on("click", ".js-copy_button", function() {
        let copiedPassword = $(this).parent().find(".js-field");
        copiedPassword.select();
        document.execCommand("copy");
    });

是否也可以使用div'om 曲柄？

有一长串：

w(N$&_MUX#eJ=H2]IKi0:*d!1a)Dr`,6;Wzk^C/EPbcOv4G{Q5LAZ7R?mYV8

当块宽度减小时，如何逐个字符换行？

在英语 stackowerflow 中，我读到最好的解决方案是Password Strength Checker。但显然，奇怪的是从检查 leklie 密码显示复杂。是否有现成的功能可以传递密码，并且在输出处有条件地返回简单、正常、复杂的？

有一个清单：

<ul>
    <li class="n">Текст</li>
    <li class="lc">текст</li>
    <li class="ac">текст</li>
    <li class="s">текст</li>
</ul>

我这样迭代：

let m = document.querySelector('ul');
let li = document.querySelectorAll('li');
[].forEach.call(m, function(li) {
    if(this.classList.contains('active')) {
        if(this.classList.contains('ac')) {
            // действие
        }
    }
});

但没有任何效果。

如何将类添加到单击的元素？

如果你这样做：

let li = document.querySelector('.li');
li.addEventListener("click", function() {
  li.classList.add("active");
});

.active {
  color: red;
}

<ul>
  <li class="li">
    <div class="checkbox"></div>
    <div class="text">Цифры</div>
  </li>
  <li class="li">
    <div class="checkbox"></div>
    <div class="text">Заглавные буквы</div>
  </li>
  <li class="li">
    <div class="checkbox"></div>
    <div class="text">Строчные буквы</div>
  </li>
  <li class="li">
    <div class="checkbox"></div>
    <div class="text">Спец. символы: ! @ # $ % ^ & * ( ) - _ + = ; : , . / ? \ | ` ~ [ ] { }</div>
  </li>
</ul>

它只处理对第一个元素的点击。是否有来自 jquery 的 $(this) 的类似物？