Heim > Artikel > Web-Frontend > 8 praktische CSS-Effektcodes, die es wert sind, gesammelt zu werden (Teilen)
In diesem Artikel werden 8 interessante CSS-Effektcodes vorgestellt, die es wert sind, gesammelt zu werden. ?? ), wie hier erwähnt. Der Einfügecursor ist der blinkende vertikale Balken |
, der verwendet wird, um anzuzeigen, wo die Eingabe des Benutzers in den bearbeitbaren Bereich der Webseite eingefügt wird. (Teilen von Lernvideos: CSS-Video-Tutorial
Zum Beispiel haben wir festgelegt Der Cursor ist blau. / >
2 Eine Codezeile verhindert, dass Benutzer Text auswählen können "https://img. php.cn/upload/image/316/344/562/1635764391933249.png" title="1635764391933249.png" alt="8 praktische CSS-Effektcodes, die es wert sind, gesammelt zu werden (Teilen)"/>
4 Die nützlichsten drei Codezeilen in der Mitte. png" alt="8 praktische CSS-Effektcodes, die es wert sind, gesammelt zu werden (Teilen)" />
caret-color
属性用来定义插入光标(caret)的颜色,这里说的插入光标,就是那个在网页的可编辑器区域内,用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠|
的东西。(学习视频分享:css视频教程)
例如我们将光标设置为蓝色
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
.father{ width: 200px; height: 200px; border: solid #000 2px; display: flex; align-items: center; justify-content: center; resize: both; overflow: auto; }
6 Vom Benutzer veränderbare Elemente
cursor: url(), auto;
Hinweis: resize
, es sei denn, der Das Attribut „overflow
“ ist ein anderer festgelegter Wert als visible
. Andernfalls wird nichts unternommen. „Visible“ ist der Standardwert für die meisten Elemente.
.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; } }作为7 Bild als Cursor
<div class="container"> <div class="typing">我是用打字机效果</div> </div>E8 Player-Effekte 🎜🎜🎜 Rreeerrreee 🎜🎜🎜🎜 Weitere Programmierkenntnisse finden Sie unter: 🎜 Programmiervideo 🎜! ! 🎜
Das obige ist der detaillierte Inhalt von8 praktische CSS-Effektcodes, die es wert sind, gesammelt zu werden (Teilen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!