简单奇妙!CSS开发者必须知道的8个有趣CSS!

·  阅读 2455
简单奇妙!CSS开发者必须知道的8个有趣CSS!

大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师~关注公众号:搞前端的半夏,了解更多前端知识! 点我探索新世界!

1 更改输入框的光标颜色

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

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

input{

caret-color:blue;
}

复制代码

image.png

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

  user-select: none;

复制代码

3 内容选中的效果

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

.div::selection {
  background-color: green;
  color: #fff;
}
复制代码

image.png

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;
  }
复制代码

image.png

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;

      }
复制代码

image.png

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>
复制代码

image.png

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改