HTML5流浪线条网页背景动画

新建html文档。

书写hmtl代码。

书写css代码。body { margin: 0 }.headline-bg.index-headline-bg { height: 680px; overflow: hidden; background: -webkit-linear-gradient(top, #0076d1, #5db8ff); background: -moz-linear-gradient(top, #0076d1, #5db8ff); background: -o-linear-gradient(top, #0076d1, #5db8ff); background: -ms-linear-gradient(top, #0076d1, #5db8ff) }.index-headline-img { width: 610px; display: block; margin: auto }.feature-index { width: 100%; margin-top: 0; padding-top: 100px; padding-bottom: 0; overflow: hidden; }.feature-index h2.title { font-size: 42px; color: #fff; font-weight: 400; text-align: left; line-height: 1.3 }.feature-index h2.title span { display: block; font-size: 26px; margin-bottom: 10px }.feature-index .p-btn .btn-sign { background-color: #fff; color: #006ec3 }.feature-index .p-btn .btn-sign:hover { opacity: .8 }.feature-index .p-btn .btn-large { font-size: 14px; padding: 6px 16px; font-weight: 400; border: 1px solid #fff }.feature-index .p-btn a:first-child { margin-right: 20px }.feature-index p.more { text-align: left; font-size: 14px; padding-top: 5px; padding-left: 30px }.feature-index p.more a { color: rgba(0,0,0,.3); font-weight: 700; text-transform: uppercase; font-size: 14px; text-decoration: none; cursor: pointer; margin-right: 15px }.feature-index p.more a:hover { color: #fff }.steps { padding-top: 150px; padding-bottom: 150px }.steps .title { font-size: 48px; margin: 0 0 20px }.steps .text { width: 80%; max-width: 300px; margin-left: auto; margin-right: auto; font-size: 24px;  margin-top:p:0}

书写并添加js代码。

代码整体结构。

查看效果。