html5线条背景动画

1、新建html文档。

2、书写hmtl代码。<svg id="ckLine

3、书写css代码。

<style>

body, html { margin: 0; padding: 0; width: 100%; max-height: 100vh; position: relative; font-family: sans-serif; font-size: 16px; background: linear-gradient(141deg, #0fb8ad 0%, #76f1ff 51%, #2cb5e8 75%); overflow: hidden; }

#ckLine { width: 100%; height: 100vh; }

.txt { width: 40%; height: 200px; margin: 0 auto; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); z-index: 10; background-color: rgba(57, 92, 105, 0.72); }

.txt h1, .txt p, .txt a { text-align: center; color: #fff; }

.txt h1 { margin: 0; }

.txt p { font-size: 1em; }

.txt a { text-decoration: none; }

.txt a:hover { text-decoration: underline; }

.txt>div { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; }

</style>

4、书写并添加js代码。

<script src="js/jquery-1.11.0.min.js"></script> 

<script src="js/jquery.ckLine.js"></script> 

<script>

$('#ckLine').ckLine({

leftRight: false,

strokeColor: 'rgba(255,255,255,0.4)',

interval: 800,

ani mateTime: 1600,

ani mationTimeRange: [800, 1600]

});

</script>

5、代码整体结构。

6、查看效果。