全屏滚动的两种实现方式

1. 元素布局：类似于轮播（或下面的无缝滚动），多个元素一直排列下去，假设有5个需要全屏的页面，则高度是500%，但只是展示100%（overflow：hidden；）。
   1. 全屏方法一：父容器div设置 absolute 定位；
   2. 全屏方法二：html、body设置 width: 100%; height: 100%;
2. 滚动方式：
   1. 方法一：添加过渡效果，transition：transform 5s ease；
   2. 方法二：使用 transform + animation；

方法一
<style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .wrap{
            width: 100%;
            height: 500%;
            transition-property: transform;
            transition-duration: 5s;
        }
        .wrap:hover{
            transform: translateY(-80%);
        }
        .con{
            width: 100%;
            height: 20%;
        }