专栏首页卡少编程之旅css黑魔法简略版

css黑魔法简略版

利用css伪类的content属性来输入文本

  • 思路来源 鼠标浮动显示文字
<div data-msg="Open this file in Github Desktop">hover</div>
div{
    width:100px;
    border:1px solid red;  
    position:relative;
}
div:hover:after{
    content:attr(data-msg);
    position:absolute;
    font-size: 12px;
    width:200%;
    line-height:30px;
    text-align:center;
    left:0;
    top:25px;
    border:1px solid green;
}

利用伪类实现表单校验的反馈样式

  • :required伪类指定具有必填项属性的表单
  • :valid伪类指定一个通过匹配要求的表单元素(结合type使用)
  • :invalid伪类指定某一未通过匹配要求的元素
<form>
    <div class="form-group">
        <label>name</label>
        <input type="text" required placeholder="请输入名称">
    </div>
    <div class="form-group">
        <label>email</label>
        <input type="email" required placeholder="请输入邮箱">
    </div>
    <div class="form-group">
        <label>homepage</label>
        <input type="url" placeholder="请输入博客url">
    </div>
</form>
.valid {
  border-color: #429032;
  box-shadow: inset 5px 0 0 #429032;
}

.invalid {
  border-color: #D61D1D;
  box-shadow: inset 5px 0 0 #D61D1D;
}

.form-group {
  width: 32rem;
  padding: 1rem;
  border: 1px solid transparent;
  &:hover {
    border-color: #eee;
    transition: border .2s;
  }
  label {
    display: block;
    font-weight: normal;
  }
  input{
    display: block;
    width: 100%;
    line-height: 2rem;
    padding: .5rem .5rem .5rem 1rem;
    border: 1px solid #ccc;
    outline: none;
    &:valid {
      @extend .valid;
    }
    &:invalid {
      @extend .invalid;
    } 
  }
}

nth-of-type选择器

tr: nth-of-type(2n) {
    background-color: red;
}
tr: nth-of-type(2n+1) {
    background-color: green;
}
tr:nth-child(n+5):nth-child(-n+10) {
    /* 选择5-10子元素? */
}

实现鼠标悬浮内容自动撑开的过渡动画

通过max-height来实现transition所需的具体高度来hack实现

<ul>
  <li>
    <div class="hd"> 列表1 </div>
    <div class="bd">列表内容<br>内容列表内容<br>内容列表内容<br>内容</div>
  </li>
  <li>
    <div class="hd"> 列表1 </div>
    <div class="bd">列表内容<br>内容列表内容<br>内容列表内容<br>内容</div>
  </li>
  <li>
    <div class="hd"> 列表1 </div>
    <div class="bd">列表内容<br>内容列表内容<br>内容列表内容<br>内容</div>
  </li>
</ul>
.bd {
  max-height:0;
  overflow:hidden;
  transition: all 1s ease-out;
}
li:hover .bd {
  max-height: 600px;
  transition-timing-function: ease-in;
}

rem布局不在使用JavaScript设置

有时候,移动端用rem布局时候,根据不同的屏幕宽度要设置不同的font-size来做到适配,要写一坨JS来设置,能不能不用JS呢?(以750px设计稿为基准,font-size设置为100px 只考虑DRP=2)

  • 原有的js实现代码: (
- 一行代码的`css`实现: (`html{font-size: calc(100vw / 7.5)}`)

## 利用`transparent`属性实现各种三角形/提示框

> [推荐链接](https://www.cnblogs.com/lhb25/p/css-and-css3-triangle.html)

```css
#triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
}

如果项目中遇到,建议做成通用的宏,方便在项目各处调用

实现文字的波浪线效果

需求如下图所示: 波浪线

基本思路:截取’X’的上半部分得到一个’V’,再结合repeat生成波浪线,下面是scss的mixin(注意linear-gradient的兼容性)

@mixin waveline($color,$h) {
    position: relative;
    &::after {
        content: '';
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: $h;
        background: linear-gradient(135deg, transparent, transparent 45%, $color, transparent 55%, transparent 100%),
                    linear-gradient(45deg, transparent, transparent 45%, $color, transparent 55%, transparent 100%);
        background-size: $h * 2 $h * 2;
    }
}

使用效果: 波浪线效果

一些非常简单的css技术

  1. CSS实现文字两段对齐(text-align-last: justify)
  2. ios支持弹性滚动(body{-webkit-overflow-scrolling: touch;})
  3. 改变input光标颜色:
    • 对所有input元素添加样式caret-color: auto;
    • 特定的input元素添加样式caret-color: red;
  4. 图片黑白效果(filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);)
  5. css奇技淫巧 github地址 blog地址
  6. CSS radio/checkbox单复选框元素显隐技术张鑫旭大神博客

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 样式代码编写习惯约定——高逼格

    卡少
  • Javascript一些优雅实现

    卡少
  • REACT框架学习心得

    卡少
  • 你还在用图片做引导蒙层?

    首先认识一下引导蒙层,如下图页面是一个蒙层,会在某个局部位置高亮我们需要重点突出的内容:

    WecTeam
  • css3(animate)

    天天_哥
  • css笔记 - 张鑫旭css课程笔记之 border 篇

    double可以利用来配合border-style:solid制作三条杠小icon

    xing.org1^
  • CSS打造的动感loading效果

    Youngxj
  • CSS常见兼容性问题总结

    浏览器的兼容性问题,通常是因为不同的浏览器对同一段代码有不同的解析,造成页面显示不统一的情况。

    书童小二
  • 前端|如何制作音乐播放器

    在框架下方插入音乐播放器audio,其中,src表示音频的地址,音频后面则显示当浏览器不支持audio时显示的内容。

    算法与编程之美
  • 22.jQuery(实例)

    1.开关灯效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...

    zhang_derek

扫码关注云+社区

领取腾讯云代金券