实用CSS效果代码有哪些
本篇内容主要讲解“实用CSS效果代码有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“实用CSS效果代码有哪些”吧!
创新互联是专业的白碱滩网站建设公司,白碱滩接单;提供做网站、网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行白碱滩网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
1 更改输入框的光标颜色
MDN:
caret-color
属性用来定义插入光标(caret)的颜色,这里说的插入光标,就是那个在网页的可编辑器区域内,用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠|
的东西。
例如我们将光标设置为蓝色
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; } }
我是用打字机效果
到此,相信大家对“实用CSS效果代码有哪些”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
文章标题:实用CSS效果代码有哪些
文章URL:http://ybzwz.com/article/jihceh.html