主页 / 问题

全部问题

Martin Hope
Alexandr_TT
Asked: 2020-02-21 01:05:09 +0000 UTC
  • 25

下面是 EnSO 和 RuSO 图标的图像：

在此处输入图像描述 在此处输入图像描述

EnSO 图标代码

<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 120 120">
<style>.st0{fill:#bcbbbb}.st1{fill:#f48023}
</style>
<path class="st0" d="M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z"/><path class="st1" d="M38.8 68.4l37.8 7.9 1.6-7.6-37.8-7.9-1.6 7.6zm5-18l35 16.3 3.2-7-35-16.4-3.2 7.1zm9.7-17.2l29.7 24.7 4.9-5.9-29.7-24.7-4.9 5.9zm19.2-18.3l-6.2 4.6 23 31 6.2-4.6-23-31zM38 86h38.6v-7.7H38V86z"/>
</svg>

动画脚本：

  1. 篮子外形图
  2. 轮廓颜色填充
  3. 5条彩色条纹依次出现
  4. 条纹以相反的顺序消失。
  5. 循环出现，彩色条纹消失。

如何使用问题标签中指示的技术之一来实现此图标动画脚本？

恭喜 UModel 竞赛获胜者

和塞瓦斯托波尔复选标记的所有者

作为最准确完成竞赛任务所有分数的作品的作者

javascript
Martin Hope
Aleksandr Krais
Asked: 2020-12-21 12:36:48 +0000 UTC
  • 25

告诉我，我怎样才能像这个视频一样重复块外观的效果？

目前我有这样的事情。

外观是通过 clip-path 属性实现的。我想不出复制溶解效果的方法。

当您单击缩略图时，滑块本身会打开部分，而不仅仅是图片。那些。你戳一个缩影，里面有一段内容。

这是使用的图像

这是我的 HTML

 <body>
<div class="men-block">
    <img src="img/slider/men.png" alt="#">
</div>
<div class="wrapper" id="content">
    <div class="wrap" id="slider">
        <div class="images">
            <div class="pict">
                <div class="list" style="background-image: url(img/slider/1.jpg); background-position: top center; background-size: cover;" id="_0"></div>
            </div>
            <div class="pict">
                <div class="list" style="background-image: url(img/slider/2.jpg); background-position: top center; background-size: cover;" id="_1"></div>
            </div>
            <div class="pict">
                <div class="list" style="background-image: url(img/slider/3.jpg); background-position: top center; background-size: cover;" id="_2"></div>
            </div>
            <div class="pict">
                <div class="list" style="background-image: url(img/slider/1.jpg); background-position: top center; background-size: cover;" id="_3"></div>
            </div>
        </div>
    </div>
    <!-- /.wrap -->
</div>
<!-- /.wrapper -->


<div class="sections">
    <section class="item open" id="one" data-bg="url(img/slider/1.jpg)" data-id="_0"></section>
    <!-- /.one -->
    <section class="item close sec" data-bg="url(img/slider/2.jpg)" data-id="_1">

    </section>
    <!-- /.one -->
    <section class="item close sec" data-bg="url(img/slider/3.jpg)" data-id="_2"></section>
    <!-- /.one -->
    <section class="item close sec" data-bg="url(img/slider/1.jpg)" data-id="_3"></section>
    <!-- /.one -->
</div>
<!-- /.sectios -->
</body>

这是我的scss：

    body {
  position: relative;
}

.wrapper {
  z-index: 5;
}

.wrap {
  width: 100%;
}

.item {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-clip-path: circle(13.9% at 50% 50%);
  clip-path: circle(13.9% at 50% 50%);
}

.sec {
  height: 100vh;
  width: 100vw;
  position: absolute;
  top: 0;
}

#one {
  background-image: url(../img/slider/1.jpg);
  height: 100vh;
  -webkit-clip-path: circle(70.9% at 50% 50%);
  clip-path: circle(70.9% at 50% 50%);
}

.close {
  opacity: 0;
  z-index: 1;
}

.shadow{
  box-shadow: 0 0 16px 16px white inset;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

.sections {
  min-height: 100vh;
  background-size: cover;
  background-position: center;
}

.slider {
  z-index: 10;
  overflow: auto;
  white-space: nowrap;

}

.list {
  display: inline-block;
  margin-left: 8rem;
  margin-right: 8rem;
  width: 30rem;
  height: 35rem;
  border-radius: 1rem;
  opacity: 0.9;

  &:hover {
    cursor: pointer;
  }
}
.men-block {
  position: absolute;
  bottom: -50px;
  left: 30%;
  z-index: 10;
  width: 150px;
  img{
    width: 100%;
  }
}
.cut-wrap{
  position: relative;
  height: 500px;
  margin-top: 200px;
}
#content {
  position: absolute;
  right: -5%;
  top: 22.5%;
  height: 500px;
  width: 1000px;
}

#slider{
  width: 100%;
  height: 100%;
  position: relative;
  overflow:hidden;
  -webkit-transition: transform 1.5s;
  -moz-transition: transform 1.5s;
  -ms-transition: transform 1.5s;
  -o-transition: transform 1.5s;
  transition: transform 1.5s;
}

#slider .left,.right{
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  position: absolute;
  top:40%;
  cursor: pointer;
  border: 1px solid #4d4d4d;
}

#slider .left{
  left: 0;
}

#slider .right{
  right: 0;
}
#slider .left img{
  width: 50px;
  height: 50px;
}
#slider .right img{
  width: 50px;
  height: 50px;
  transform: rotate(180deg);
}
#slider .images .pict{
  float: left;

}
.item{
  &-header{
    display: flex;
    justify-content: space-around;
    align-items: center;
    &__item{
      width: 50px;
      height: 50px;
      background-color: darkviolet;
    }
  }
  &-content{
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 0 auto;
    &__item{
      width: 100px;
      height: 100px;
      margin-left: 20px;
      margin-right: 20px;
      background-color: rosybrown;
    }
  }
  &-footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 0 0 auto;
    &__item{
      width: 20px;
      height: 60px;
      background-color: yellowgreen;
    }
  }
}

这是我的js：

   function list() {
      const open = $('.list'); /* переменная открывает блок */

      open.on('click', function () {
         /* блок, на который мы тыкнули прячем в конец слайдера */
      $(this).parent().appendTo('.images').fadeOut;

         const parent = $(this); 
         let prevOpen = $('section.open'),
           sectionItem = $('section.item'),
           slider = $('#slider'),
           nextSection = $('[data-id='+parent.attr('id')+']');

         /* Отодвигаем секцию сослайдами через 500мс на 75% по Х при клике на блок open */
         setTimeout(function () {
            slider.css({"transform": "translateX(75%)"});
         }, 600);
         /*Возвращаем секцию в начальное положение*/
         open.mouseenter(function () {
            slider.css({"transform": "translateX(0)"});
         });

         /* делаем я-index меньше, чем у активного, что бы не было проблем с появлением изображений */
         prevOpen.css({
            "z-index": "1"
         });

            /* Ставим ищем нужную секцию по дата атрибуту */
         if ( parent.attr('id') === nextSection.attr('data-id') ) {
            nextSection.removeClass('close').addClass('open ').css({   
               "background-image": nextSection.attr("data-bg")
            });

            /* увеличиваем область видимости для эффекта появления секции */
            nextSection.css({"clip-path": "circle(70.9% at 50% 50%)", "transition" : "clip-path 1.5s"});

            /* прячем слайдер и отодвигаем его вправо */
            let wrapper = $('.wrapper');
            wrapper.css({"opacity" : "0", "transition" : "opacity 0.5s"});
            setTimeout(function () {
               wrapper.css({"opacity" : "1", "transition" : "opacity 1.5s"});
            }, 1500);
         }

         /* добавляем бэкграунд текущего блока обертке, что бы при смене активног элемента у нас не было белого фона */
         $('.sections').css({
            'background-image': prevOpen.attr("data-bg")
         });

         /* Всем секциям, не являющимся открытой мы меняем классы на нужные   */
         sectionItem.not(nextSection).removeClass('open ').addClass('close').css({"clip-path": "circle(7.9% at 50% 50%)", "transition" : "clip-path 3s"});


      });
   }
   list();

   /* Бесконечный слайдер с возможностью прокрутки колесом мыши (на счет тач устройств пока не известно) */
   function cut() {
    const speed = 500;
    let pictW,imgW,n,pict,img,currentM,end=true;
    pict = $('#slider .pict');
    img = $('#slider .images');
    pictW = parseInt(pict.width());
    n = pict.length;
    imgW=(n+1)*pictW;
    img.width(imgW);
    currentM = -pictW;

    /* Меняем слайды колесиком мыши */
    $('#slider').bind({
        mouseenter: function() {
            $(this).on('wheel', (function(e) {
                e.preventDefault();
                if (e.originalEvent.deltaY < 0) {
                    if(end) {
                        end=false;
                        currentM = currentM + pictW;
                        img.animate({
                            marginLeft: currentM
                        }, speed,  function () {
                            end = true;
                            $('.pict').last().prependTo('.images');
                            currentM = currentM - pictW;
                            img.css('marginLeft',currentM);
                        });
                    }
                } else {
                    if(end) {
                        end=false;
                        currentM = currentM - pictW;
                        img.animate({
                            marginLeft: currentM
                        }, speed,  function () {
                            end = true;
                            $('.pict').first().appendTo('.images');
                            currentM = currentM + pictW;
                            img.css('marginLeft',currentM);
                        });
                    }
                }
            }));
        }
    });
}
   cut ();
javascript
Martin Hope
Pantera
Asked: 2020-11-15 17:50:56 +0000 UTC
  • 25

如何在此示例中制作水https://jsfiddle.net/wsygj8q4/2/ 环绕瓶子而不是重叠？

.body {
  width: 149px;
  height: 706px;
  background-image: url("http://s010.radikal.ru/i311/1711/9c/d679c55a8026.png");
  background-repeat: no-repeat;
  background-size: 122px 298px;
  background-position: center;
  position: relative;
  display: inline-block;
  margin: 10px;
}

.body .tank {
  width: 94px;
  height: 182px;
  background-image: url("http://s04.radikal.ru/i177/1711/a6/141640ec7964.png");
  background-size: 103px 180px;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  display: inline-block;
  margin: 23px;
}

#water {
  background-image: url("https://media.giphy.com/media/xTiTnrfZfRPJ520yly/giphy.gif");
  background-position: center;
  position: absolute;
  bottom: 0px;
  opacity:0.3;
  width: 95px;
  -webkit-transition: all 3s ease-out;
  -moz-transition: all 3s ease-out;
  -o-transition: all 3s ease-out;
  transition: all 3s ease-out;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

#tank:hover #water {
  height: 350px;
  background-position: top left;
  -webkit-transition: all 3s ease-out;
  -moz-transition: all 3s ease-out;
  -o-transition: all 3s ease-out;
  transition: all 3s ease-out;
}
<div style="text-align:left">
  <div class="body">
    <div class="tank">
      <div id="water" style="height:50%"></div>
    </div>
  </div>
</div>

javascript
Martin Hope
Молодой еще
Asked: 2020-05-05 21:35:42 +0000 UTC
  • 25

我会详细说明这个问题。
Python 书籍说 Python 中的一切都是对象。

我们采用传统方法学习/教授编程语言。Pascal、C、C++这些语言，它们都有“变量名”（标识符）的概念。值关联/分配给变量名称。该值存储在内存中。变量名是一种（在程序的源代码中）引用内存位置以获取存储在那里的值的方式。

我不知道这个说法是否正确（对于编译语言）：对于变量，例如整数类型，在计算机上执行程序时，处理器已经使用值所在的存储单元的地址的变量被存储。那些。并不是在某个地址的某个地方存储了变量的名称，并且它与存储值的单元格的地址相关联。

现在让我们继续学习 Python。在这种语言中，一切都是对象，即使是函数的定义也是如此。
变量对象、值对象等 在不同的时间，同一对象可能与不同的其他对象相关联。

a = 1
print(a)
a = "Hello"
print(a)

但是如何理解函数的作用id()呢？按照标准的定义，它返回“识别”指定的对象。此外，“返回一个保证唯一的整数”，并且在对象存在期间保持不变。

所以为什么

a = 1
b = 1
print(id(a) == id(b) == id(1))  # True
print("Why?")

a, b, 1 是不同的对象，不是吗？
我认为问题是...

使用 Python 3.6

我听说过从 -5 到 256 的值。有地方去

a = 1000000
b = 1000000
print(id(a) == id(b))  # True
print("Why?")

因为“知道名字等”就足够了。对我来说还不够，这就是为什么我问受人尊敬的专业人士。在 Python 中，一切都是对象。没有变量名。因此我的问题。

python
上一页
下一页