Question

我对CSS动画并不熟悉。我的客户希望在悬停contact按钮时实现the following result：

所以要明确：

广场从左向右移动，反之亦然
当方块移动时，它下面的线会改变颜色

顶部图像是开始状态，中间是效果期间（50％），底部图像是结束阶段。

这只能用CSS实现，还是我需要JS？我该如何处理？

Answer 1

我在这里创建了一个快速而又脏的JSFiddle：https://jsfiddle.net/x0b397pb/

正如您所看到的，只有CSS才有可能。在这个例子中，我使用伪元素（::before和::after）来创建大多数元素。

你提到“我不熟悉CSS动画”。 For this I used transitions.

transition: left 1000ms, right 1000ms, box-shadow 1000ms;

每个逗号分隔元素都是一个将在2个点之间转换的值。这个转换发生在div的更改上，这可以是悬停，但也适用于另一个div（通过JS）。

为了创造逐渐变换颜色的线的效果，我使用了另一个在原始两条线上滑动的元素。新线条最初有0宽度，但在悬停时它们的宽度增加100％。转换transition: width 1000ms;这种情况会逐渐发生。

尽量不要使用我的代码作为最后的例子，因为它有些难看。但我希望它能说明问题。

Answer 2

以下是css过渡的小型演示：

考虑这个HTML：

<div class="container">
  <div class="box"></div>
</div>

使用这个CSS：

.container { 位置：相对; 宽度：400px; 身高：400px; 边框：实心1px黑色; } .box { 位置：绝对; 宽度：40px; 身高：40px; 上：10px; 左：10px; 背景颜色：红色; 过渡：全1; } .container：hover { 边框颜色：蓝色; .box { 上：200px; 左：200px; 宽度：160px; 身高：160px; 背景颜色：蓝色; }
}

或者，在JsFiddle上查看：https://jsfiddle.net/ronency/75ozjq3s/

Answer 3

                            var d = new Date();
                            var dia = "05";
                            var mes = d.getMonth()+1;
                            mes = mes.toString();
                            var anio = d.getFullYear().toString();
                            var minDate = new Date(dia+'-'+mes+'-'+anio);


                            var d2 = new Date();
                            var dia2 = "10";
                            var mes2 = d2.getMonth()+1;
                            mes = mes2.toString();
                            var anio2 = d2.getFullYear().toString();
                            var maxDate = new Date(dia2+'-'+mes2+'-'+anio2);


var inputFechaPago = new sap.m.DatePicker({ 
                placeholder: " ",
                valueFormat: "dd/MM/yyyy",
                displayFormat: "dd/MM/yyyy",
                dateValue: minDate,
                minDate: minDate,
                maxDate: maxDate
                },
});

CSS动画移动和改变颜色

3 个答案: