代码情诗

#代码情诗# 我正在参与「JUEJIN FRIENDS 告白计划」

这里给大家分享一首诗，诗的名字叫《致橡树》

div布局

<div id="text">

</div>

css样式

#text{
  line-height: 50px;
  text-align: center;
  padding-top: 30px;
  font-size: 22px;
  width: 40%;
  margin:0 auto;
  background-image: linear-gradient(to right, orange, purple);
  -webkit-background-clip: text;
  color: transparent;
}

js效果

let divTyping = document.getElementById('text')
let i = 0,
timer = 0,
str = '我如果爱你——绝不像攀援的凌霄花，借你的高枝炫耀自己。我如果爱你——绝不学痴情的鸟儿，为绿荫重复单调的歌曲。也不止像泉源，常年送来清凉的慰藉；也不止像险峰，增加你的高度。衬托你的威仪，甚至日光，甚至春雨。不，这些都还不够。我必须是你近旁的一株木棉，作为树的形象和你站在一起。根，紧握在地下；叶，相触在云里。每一阵风过，我们都互相致意。但没有人，听懂我们的言语。你有你的铜枝铁干，像刀，像剑，也像戟；我有我红硕的花朵，像沉重的叹息，又像英勇的火炬。我们分担寒潮、风雷、霹雳；我们共享雾霭流岚虹霓。仿佛永远分离，却又终身相依。这才是伟大的爱情，坚贞就在这里。爱—不仅爱你伟岸的身躯，也爱你坚持的位置，足下的土地。'

function shiing() {
  if (i <= str.length) {
    divTyping.innerHTML = str.slice(0, i++) + '_'
    timer = setTimeout(typing, 200)
  }
  else {
    divTyping.innerHTML = str//结束打字,移除 _ 光标
    clearTimeout(timer)
  }
}
shiing()

码上掘金 (juejin.cn)