html5自行车线条描边动画

新建html文档。

书写css代码。.codrops-links { position: relative; display: flex; justify-content: center; margin: 0 1em 0 0; text-align: center; white-space: nowrap; }.codrops-icon { display: inline-block; margin: 0.15em; padding: 0.25em; }.codrops-icon .icon { pointer-events: none; }.date { margin: 0 0 0.25em 0; padding: 0 0 0 3em; position: relative; color: var(--color-link); }.date::before { content: ''; position: absolute; height: 2px; width: 2.25em; left: 0; top: calc(50% - 1px); background: currentColor; }.title-wrap { position: relative; margin: 20vh 40vw 0 0; }.title { font-size: 6vw; margin: 0; font-weight: 800; line-height: 0.9; }.subtitle { margin: 1em 0 0 0; }.route { width: 90%; margin: 1em 0 0 0; }#bike { position: absolute; min-width: 320px; width: 80%; max-height: 80%; opacity: 0; }

书写并添加js代码。

代码整体结构。

查看效果。