时间戳

首页 > 解决方案 > Replicate Hackernoon url effect css

html - Replicate Hackernoon url effect css

问题描述

New to html/css and would like to reproduce the effect here on urls. See the first url in the article "W3 Schools" which has an offset pale green bar and then goes solid on hover.

https://hackernoon.com/most-useful-sql-resources-f8q3254

An explanation of which properties do what would be appreciated. Thank you.

标签： htmlcss

解决方案

您可以使用过渡和背景位置来做到这一点

strong:hover {
    background-image: linear-gradient(transparent 0%, transparent calc(50% - 9px), rgb(0, 255, 0) calc(50% - 9px), rgb(0, 255, 0) 100%);
    background-position: 0px 100%;
}

strong {
  background-image: linear-gradient(transparent 0%, transparent calc(50% - 9px), rgba(0, 255, 0, 0.35) calc(50% - 9px),
  rgba(0, 255, 0, 0.35) 100%);
  transition: background-position 120ms ease-in-out 0s, padding 120ms ease-in-out 0s;
  background-size: 100% 200%;
}
<strong>W3 Schools<strong>

推荐阅读