概述
本篇文章分享8个CSS开发者必须知道的有趣CSS效果代码，值得收藏，大家一起来看看吧！
1 更改输入框的光标颜色
例如我们将光标设置为蓝色
input{
caret-color:blue;
}登录后复制
2 一行代码禁止用户选择文本
user-select: none;
登录后复制3 内容选中的效果
这里设置文本选中的颜色是绿色
.div::selection {
background-color: green;
color: #fff;
}登录后复制
4 居中最好用的三行代码
display: flex;
align-items: center;
justify-content: center;登录后复制示例：
.father{
width: 200px;
height: 200px;
border: solid #000 2px;
display: flex;
align-items: center;
justify-content: center;
}
.child{
width: 50px;
height: 50px;
border: solid red 2px;
}登录后复制
5 平滑滚动
scroll-behavior: smooth;
登录后复制6 用户可调整元素的大小
resize: both;
登录后复制注意：resize除非将overflow属性设置为 以外的其他visible值，否则什么都不做，visible是大多数元素的默认值。
.father{
width: 200px;
height: 200px;
border: solid #000 2px;
display: flex;
align-items: center;
justify-content: center;
resize: both;
overflow: auto;
}登录后复制
7 图片作为光标
cursor: url(), auto;
登录后复制8 打字机效果
.container {
height: 500px;
display: flex;
align-items: center;
justify-content: center;
}
.typing {
width: 220px;
animation: typing 2s steps(8), blink 0.5s step-end infinite alternate;
white-space: nowrap;
overflow: hidden;
border-right: 3px solid;
font-family: monospace;
font-size: 2em;
}
@keyframes typing {
from {
width: 0;
}
}
@keyframes blink {
50% {
border-color: transparent;
}
}登录后复制<div class="container">
<div class="typing">我是用打字机效果</div>
</div>登录后复制
最后
以上就是简单早晨为你收集整理的值得收藏的8个实用CSS效果代码（分享）的全部内容，希望文章能够帮你解决值得收藏的8个实用CSS效果代码（分享）所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复