Question

我现在已经有一段时间了，到目前为止我还没有走得太远。我有这个代码（CSS），我想在页面加载后大约8秒后强调特定文本（从中间到外面），我只能弄清楚：悬停部分（我希望下划线在页面出现后显示为8s）加载，而不必将鼠标悬停在元素上）：

#sec {
  display: inline-block;
  position: relative;
  padding-bottom: 3px;
}
#sec:after {
  content: '';
  display: block;
  margin: auto;
  height: 3px;
  width: 0px;
  background: transparent;
  transition: width .5s ease, background-color .5s ease;
}
#sec:hover:after {
  width: 100%;
  background: blue;
}

和HTML：

<div id="sec">our clone site is <a href="#" onclick="sitedownER()">currently down</a>. click <a href="update.html">here</a> for updates on the status of each site</div>

我试图在页面加载后让<div id="sec">加下划线8s [econds]。

Answer 1

如何使用动画（关键帧），请检查代码段

PS：运行代码段并等待8秒。

＆＃13;

#sec {
  display: inline-block;
  position: relative;
  padding-bottom: 3px;
}
@-webkit-keyframes border {
     from {width: 0px;}
     to {width:100%}
}

#sec:after {
  content: '';
  display: block;
  margin: auto;
  height: 3px;
  width: 0px;
  background: blue;  
  -webkit-animation-name: border; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
  -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
  animation-name: border;
  animation-duration: 1s;
  animation-delay: 8s;
  animation-fill-mode: forwards;
}

＆＃13;

<div id="sec">our clone site is <a href="#" onclick="sitedownER()">currently down</a>. click <a href="update.html">here</a> for updates on the status of each site</div>

＆＃13;

使用带有延迟的页面加载转换为文本加下划线

1 个答案: