简单惊艳的CSS样式

最新推荐文章于 2025-03-21 08:45:22 发布

轻舟在过

最新推荐文章于 2025-03-21 08:45:22 发布

阅读量565

点赞数

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/m0_46378049/article/details/114599194

版权

简单惊艳的CSS样式

前言

虽然我不怎么做前端，但是偶尔也喜欢弄个网站啥的，为了收集一些简单使用高13格的样式，于是诞生了这篇文章，酷，而且这篇文章我会不断更新的。

隐藏鼠标

*{
    cursor: none!important;
}

除了隐藏鼠标之外，还有很多鼠标风格：

文字模糊效果

*{ 
    /*transparent：透明*/
    color: transparent;
    text-shadow: #111 0 0 5px;
}

多重边框

div {
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2),
     0 0 0 12px rgba(0, 0, 0, 0.2),
     0 0 0 18px rgba(0, 0, 0, 0.2),
     0 0 0 24px rgba(0, 0, 0, 0.2);
    height: 200px;
    margin: 50px auto;
    width: 400px
}

实时编辑CSS

    <style style="display:block" contentEditable>
        body { color: blue }
    </style>

禁止鼠标事件

PC端禁止鼠标点击事件，移动端禁止触摸事件还有长按事件

* {
    pointer-events: none
  }

文字渐变

div {
    background-image: -webkit-gradient(linear, 
                        0 0, 0 bottom, 
                        from(rgb(63, 52, 219)), 
                        to(rgb(233, 86, 86)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

看不懂原理，只能说牛逼

按钮点击效果

input:active {
    opacity: .7;
    background-color: #8f8f8f;
  }

夜间模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css测试</title>
    <link rel="stylesheet" href="css/test.css">
</head>
<body bgcolor="#F5F5F5">
    <input class='switch-component' type='checkbox' >
    <div class="theme-container">
        <h1>这是一个测试区域</h1>
        <br />
        <input type="text" />
    </div>
</body>
</html>

body,
html {
  margin: 0;
  padding: 0;
  height: 100%
}

/* 省略switch-component的样式 */

.theme-container {
  --theme_color: #F5F5F5;  /*主题色*/
  width: 100%;
  height: 100%;
  background-color: var(--theme_color);
  transition: background-color .2s ease
}

.switch-component:checked + .theme-container {
  --theme_color: #313131 /* 重置变量 */
}

输入框选中时浮起


input {
    appearance: none;
    outline: none;
    border: none;
    padding: 1rem;
    border-bottom: 1px solid #ebebeb;
    transition: all .2s ease-in-out;
   }
  
input:focus {
    box-shadow: 0 3px 10px 1px rgba(0, 0, 0, .1);
    transform: translateY(-.5rem)
}