Question

我的任务即将出现，需要生动的动画屏幕内容，就像下面的示例一样。我很好奇这个例子是如何完成的，css，sprite，gif，video？它显示，滑动屏幕，动画滚动条，分页，移动图标等所有时间作为一个独立的电影。任何关于如何制作以及如何有效运行的想法将不胜感激。

http://urban-walks.com/#slides

Answer 1

CSS使用动画。 HubbBlog is a great source for coding information. https://www.w3schools.com/css/css3_animations.asp W3Schools也有一个很好的教程。 Javascript也被用于最有可能感知用户在页面的位置。

Answer 2

<style>

body
{
    width: 100%;
    height: 100%;
    background-color: lightgreen;
    position: relative;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 4s;
    font-size: 25px;

}

@-webkit-keyframes example {
    0%   {background-color: lightgreen; left:-200px; top:0px;}
    25%  {background-color: lightgreen; left:0px; top:0px;}

}

/* Standard syntax */
@keyframes example {
    0%   {background-color: lightgreen; left:-200px; top:0px;}
    25%  {background-color: lightgreen; left:0px; top:0px;}
</style>

Html动画内容如何

2 个答案: