html5线条背景动画

来源：互联网 2023-03-16 19:10:39 265

html5线条背景动画

工具/原料

adobe dreamweaver

方法/步骤

新建html文档。

html5线条背景动画

书写hmtl代码。svg id="ckLine" width="1000" height="1000">/svg>

html5线条背景动画

书写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>

html5线条背景动画