> 웹 프론트엔드 > CSS 튜토리얼 > 수집할 가치가 있는 실용적인 CSS 효과 코드 8개(공유)

수집할 가치가 있는 실용적인 CSS 효과 코드 8개(공유)

青灯夜游
풀어 주다: 2021-12-20 09:04:17
앞으로
3302명이 탐색했습니다.

이 글에서는 CSS 개발자가 반드시 알아야 할 8가지 흥미로운 CSS 효과 코드를 공유합니다.

수집할 가치가 있는 실용적인 CSS 효과 코드 8개(공유)

1 입력 상자의 커서 색상 변경

MDN:caret-colorcaret-color 属性用来定义插入光标(caret)的颜色,这里说的插入光标,就是那个在网页的可编辑器区域内,用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠 | 的东西。(学习视频分享:css视频教程

例如我们将光标设置为蓝色

input{

caret-color:blue;
}
로그인 후 복사

수집할 가치가 있는 실용적인 CSS 효과 코드 8개(공유)

2 一行代码禁止用户选择文本

  user-select: none;
로그인 후 복사

3 内容选中的效果

这里设置文本选中的颜色是绿色

.div::selection {
  background-color: green;
  color: #fff;
}
로그인 후 복사

수집할 가치가 있는 실용적인 CSS 효과 코드 8개(공유)

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;
  }
로그인 후 복사

수집할 가치가 있는 실용적인 CSS 효과 코드 8개(공유)

5 平滑滚动

scroll-behavior: smooth;
로그인 후 복사

6 用户可调整元素的大小

 resize: both;
로그인 후 복사

注意:resize除非将overflow属性设置为 以外的其他visible 속성은

삽입 커서

(캐럿)의 색상을 정의하는 데 사용됩니다. ), 여기서 언급한 바와 같이 삽입 커서는 웹 페이지의 편집 가능한 영역에서 사용자의 입력이 삽입될 위치를 나타내는 데 사용되는 깜박이는 수직 막대 |입니다. (학습 동영상 공유: css 동영상 튜토리얼수집할 가치가 있는 실용적인 CSS 효과 코드 8개(공유))

예를 들어 다음과 같이 설정합니다. 커서는 파란색이에요

수집할 가치가 있는 실용적인 CSS 효과 코드 8개(공유)

2 한 줄의 코드로 인해 사용자가 텍스트를 선택할 수 없습니다

cursor: url(), auto;
로그인 후 복사

3 콘텐츠 선택 효과수집할 가치가 있는 실용적인 CSS 효과 코드 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 효과 코드 8개(공유)🎜🎜🎜🎜4 가장 유용한 세 가지 중앙에 있는 코드 라인🎜🎜🎜
<div class="container">
      <div class="typing">我是用打字机效果</div>
</div>
로그인 후 복사
🎜예: 🎜rrreee🎜수집할 가치가 있는 실용적인 CSS 효과 코드 8개(공유)🎜🎜🎜🎜5 부드러운 스크롤🎜🎜🎜rrreee🎜🎜🎜6 사용자 크기 조정 가능한 요소🎜🎜🎜rrreee🎜참고: 크기 조정 Overflow 속성은 visible 이외의 값으로 설정됩니다. 그렇지 않으면 아무 작업도 수행되지 않으며 visible이 대부분 요소의 기본값입니다. 🎜🎜🎜🎜🎜🎜Rrreee 作为7 그림을 커서로 사용 🎜🎜🎜 RRREEEE🎜🎜🎜8 플레이어 효과 🎜🎜🎜 Rreeerrreee 🎜🎜🎜🎜 더 많은 프로그래밍 관련 지식을 보려면 다음을 방문하세요. 🎜 프로그래밍 비디오 🎜! ! 🎜

위 내용은 수집할 가치가 있는 실용적인 CSS 효과 코드 8개(공유)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
css
원천:juejin.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿