1 更改输入框的 光标 颜色
MDN: caret-color 属性用来定义 插入光标 (caret)的颜色,这里说的插入光标,就是那个在网页的可编辑器区域内,用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠 | 的东西。(学习视频分享:css视频教程)
例如我们将光标设置为蓝色
input{ caret-color:blue; }
2 一行代码禁止用户选择文本
user-select : none;
3 内容选中的效果
这里设置文本选中的颜色是绿色
.div :: selection { background-color: green; color: # fff; }
4 居中最好用的三行代码
dis play : flex; align -i tems: center ; justify-content: center;
示例:
.father{ width: 200px; h ei ght: 200px; border: solid #000 2px; display: flex; align- IT ems: center; justify-content: center; } .child{ width: 50px; height: 50px; border: solid red 2px; }
5 平滑 滚动
scroll-behavior: smooth;
6 用户可 调整 元素的大小
re Size: 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 打字机效果
.cont ai ner { 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 -s pace: nowra p; overflow: hidden; border-right: 3px solid; font-f ami ly: monospace; font-size: 2em; } @keyfr am es typing { From { width: 0; } } @keyframes blink { 50% { border-color: transparent; } }
<div class="container"> <div class="typing">我是用打字机效果</div> </div>
更多编程相关知识,请访问:编程视频!!
以上就是值得收藏的8个实用CSS效果代码(分享)的详细内容,更多请关注其它相关文章!
总结
以上是 为你收集整理的 值得收藏的8个实用CSS效果代码(分享) 全部内容,希望文章能够帮你解决 值得收藏的8个实用CSS效果代码(分享) 所遇到的问题。
如果觉得 网站内容还不错, 推荐好友。
查看更多关于值得收藏的8个实用CSS效果代码(分享)的详细内容...
声明:本文来自网络,不代表【好得很程序员自学网】立场,转载请注明出处:http://www.haodehen.cn/did200211