程序员 Kevin Powell 每天在 Twitter 的 #CSSTipOfTheDay 话题下,发布一篇 CSS 技巧,这里做整理收藏。
1. 渐变色文字
https://codepen.io/kevinpowell/pen/MWYYxPe
<h2 class="gradient-text">Gradient text</h2>
<style>
.gradient-text {
background-image: linear-gradient(90deg, red, blue);
background-clip: text;
color: transparent;
}
</style>
2. 下划线动画效果
https://codepen.io/kevinpowell/pen/MWYwgOz
<p>Lorem ipsum dolor <a class="fancy-link" href="#">sit amet ... beatae</a>, quo iure ... consequatur.</p>
<style>
.fancy-link {
text-decoration: none;
background-image: linear-gradient(red, red);
background-repeat: no-repeat;
background-position: bottom left;
background-size: 0 3px;
transition: background-size 500ms ease-in-out;
}
.fancy-link:hover {
background-size: 100% 3px;
}
</style>
3. 顺滑混动
https://codepen.io/kevinpowell/pen/rNaVBYb
默认的锚点滚动是没有动画的,使用 scroll-behavior
可以设置顺滑的动画效果
html {
scroll-behavior: smooth;
}
4. text-shadow 多阴影设置
https://codepen.io/kevinpowell/pen/eYmNmNW
<h2 class="so-many-shadows">This is fun</h2>
<style>
.so-many-shadows {
text-shadow:
3px 3px 0 yellow,
6px 6px 0 blue,
9px 9px red,
12px 12px 0 black;
}
</style>
5. 背景混合
https://codepen.io/kevinpowell/pen/dyPMrEX
<div class="content">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<style>
.one, .two, .three {
background-color: orange;
background-image: url(https://picsum.photos/id/1005/600/600);
}
.one { background-blend-mode: screen; }
.two { background-blend-mode: multiply; }
.three { background-blend-mode: overlay; }
</style>
6. 相关链接
https://codepen.io/collection/nJzQBY
https://twitter.com/hashtag/CSSTipOfTheDay?src=hashtag_click&f=live
最新评论
大佬
Nignx主要是后台做负载用,没想到你也这么用心
这个评论虽然不能一针见血,但是喜欢这个文章,一直喜欢这个时间管理法。很好
优秀
你对加密的定义很严谨,在平时及网络各种文章中,通常将 base64 称之为“加密”,上面及文章中提到的“加密”同样是这个意思,并非严格意义的加密。严格讲 base64 是一种编码方式。感谢你的回复。
严格意义上来说 base64 不算是加密(Encryption),而是一种编码形式(Encoding)。对于 UTF-8 这种也可以叫它为 Encoding。 加密(Encryption)是指像 R
Base64: 可逆性。 可以将图片等二进制文件转换为文本文件。 可以把非ASCII字符的数据转换成ASCII字符,避免不可见字符。 MD5: 不可逆性。 任意长度的明文字符串,加密后得到的密文字符
第一个问题BASE64的加密方式和MD5的加密方式在这里 哪种 好用?