：[reply][/reply] 就是我手动输入时间，可以获取到input值。用时间选择器就获取不到。这是为什么？
1.首先我在html中建立一个div标签，加上一个class的类，给它的类命名为“home”，再到这个标签里面建立一个相同的div标签，它的类命名为“happy”，里面再建立一个小的div标签，表示一个大的盒子包裹着一个小的盒子，小的盒子里面又嵌套了一个元素。
2.然后再设置它的样式，给大的盒子的宽度设置为100%，表示占满整个父级元素的宽度，高度设置为100个像素，然后给小的div标签设置宽高，背景颜色，再给它设置一个动画函数“animation”这样它就具备了动画效果，把happy绑定到div元素内，动画时长为1s, 如果忽略时长，则不会产生动画效果，再给它增加一个“infinite” 循环播放，使它的动画效果无限循环，否则动画效果默认只执行一次。
3.再用关键帧“@keyframes”来控制和实现它的动画效果，把它命名为happy，然后用百分比来规定动画的时间，0%动画开始，会改变背景颜色，然后到100%时动画颜色再次发生改变。
4.在截图中可以看出：第一张图是刚开始执行的动画效果，改变了它的背景颜色，第二张图是执行结束时改变的背景颜色，执行完了然后再回到刚开始执行的时候，两种背景颜色就这样循环变化着。
5.以下图片上的代码和上面1、2条原理一样，因为我在一个html中创建的，所以给这次的小标签设置的是span标签，如果我这次同样是设置div标签，那么会和下面的样式起冲突，从而得不到你想要的运行效果。不过像“span”“a”这样的行内元素，则没有自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。所以要给它加个定位，我在这里给它设置了一个绝对定位“position：absolute” ,否则就看不到给它设置的样式。
6. translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动， translate我们分为三种情况：
在这里我使用了第二种情况，用百分比只在X轴上设置它的平移效果，当它为0%时，元素没有发生改变，当它的值为100%时，元素向右平移100个像素。
7.以下两张截图就是代码实现的动画效果，因为设置在同一个html中，所以两种动画效果在同一个浏览器中打开，两张图片的上面两个是颜色变化的动画效果，下面两个是平移的动画效果。
？朋友是在docker中文网站上看到的，附上链接，一看确实很漂亮。 那他们是如何实现的呢，其实没有用什么高端的技术，只是使用了
，网上也有很多例子。animation的属性大概分为这几个，animation: colorswitch 20s infinite;我们来看这......
