search

WangShuXian6 / blog

FE-BLOG
https://wangshuxian6.github.io/blog/
MIT License
43 stars 10 forks source link

CSS3 #40

Open WangShuXian6 opened 5 years ago

WangShuXian6 commented 5 years ago

CSS3

CSS3是层叠样式表（Cascading Style Sheets）语言的最新版本，旨在扩展CSS2.1。

它带来了许多期待已久的新特性， 例如圆角、阴影、gradients(渐变) 、transitions(过渡) 与 animations(动画) 。以及新的布局方式，如 multi-columns 、 flexible box 与 grid layouts。实验性特性以浏览器引擎为前缀（vendor-prefixed），应避免在生产环境中使用，或极其谨慎地使用，因为将来它们的语法和语义都有可能被更改。

W3C 会定期的发布这些 snapshots，如 2007, 2010, 2015 或 2017

CSS 模块状态

稳定模块（Stable modules）

有些 CSS 模块已经十分稳定，其状态为 CSSWG 规定的三个推荐品级之一：Candidate Recommendation（候选推荐）， Proposed Recommendation（建议推荐）或 Recommendation（推荐）。表明这些模块已经十分稳定，使用时也不必添加前缀， 但有些特性仍有可能在 Candidate Recommendation 阶段被放弃。

CSS Color Module Level 3 Recommendation 自 2011 年 6 月 7 日
  • 增加 opacity 属性，还有 hsl()， hsla()， rgba() 和 rgb() 函数来创建  值。 它还将 currentColor 关键字定义为合法的颜色值。transparent 颜色目前是真彩色 (多亏了支持 alpha 通道) 并且是 rgba(0,0,0,0.0) 的别名。它废弃了 system-color keywords(系统颜色关键字)， 它们已经不能在生产环境中使用。
Selectors Level 3 Recommendation 自 2011 年 9 月 29 日

增加：

  • 子串匹配的属性选择器， E[attribute^="value"]， E[attribute$="value"]， E[attribute*="value"]。

  • 新的伪类：:target， :enabled 和 :disabled， :checked， :indeterminate， :root， :nth-child 和 :nth-last-child， :nth-of-type 和 :nth-last-of-type， :last-child， :first-of-type 和 :last-of-type， :only-child 和 :only-of-type， :empty， 和 :not。

  • 伪元素使用两个冒号而不是一个来表示：:after 变为 ::after， :before 变为 ::before， :first-letter 变为 ::first-letter， 还有 :first-line 变为 ::first-line。

  • 新的 general sibling combinator(普通兄弟选择器)  ( h1~pre )。

在设备宽为 375px 中 1rem=100px 100vw/375px*100

html {
font-size: 26.666667vw;
box-sizing: border-box;
}
WangShuXian6 commented 5 years ago

\<input>：输入（表单输入）元素

switch 开关标签

预览 https://codepen.io/WangShuXian6/pen/qyRVPQ switch

关联label标签与input标签

使label标签的for属性值与input 标签的id值相同 此时点击label将改变绑定的input的checked属性值 true或false 可将input 完全隐藏,label作为input的代理外观

switch.html

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./switch2.css">
</head>
<body>
<div class="switch">
<input type="checkbox" id="toggle">
<label for="toggle"><i></i></label>
</div>
</body>
</html>

switch.less


@pink: #ff4777;
@white: #fff;

.switch { position: relative; display: flex; width: 64px; height: 34px; border-radius: 34px; & > input { position: absolute; top: 0; left: 0; z-index: -10; opacity: 0; }

& > input:checked ~ label { background-color: @white; border: 1px solid rgba(255, 71, 119, 0.21); }

& > input:checked ~ label i { right: 30px; }

& > label { position: relative; display: flex; width: 64px; height: 34px; border-radius: 34px; background-color: @pink; transition: all 0.5s linear; border: 1px solid @pink; & > i { display: flex; position: absolute; top: 1px; right: 0; width: 32px; height: 32px; border-radius: 50%; background-color: @white; box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.3); } } }


***
#### [:checked][2]
>:checked CSS 伪类选择器表示任何处于选中状态的radio(<input type="radio">), checkbox (<input type="checkbox">) 或("select") 元素中的option HTML元素("option")) 。用户通过点击元素或选择其他的值，可以改变该元素的 :checked 状态，并:checked属性赋给一个新的对象(例如其他的option值)。

[2]:https://developer.mozilla.org/zh-CN/docs/Web/CSS/:checked

>选择器示例

>input[type="radio"]:checked
>>表示页面上的所有选中的radio按钮

>input[type="checkbox"]:checked
>>表示页面上的所有选中的checkbox按钮

>option:checked
>>表示页面上的所有选中的select的选项
```css
/* any "checkable" element */
:checked {
  width: 50px;
  height: 50px;
}

/* only radio elements */
input[type="radio"]:checked {
  margin-left: 25px;
}

/* only checkbox elements */
input[type="checkbox"]:checked {
  display: none;  
}

/* only option elements */
option:checked {
  color: red;
}

使用隐藏的checkboxes来存储一些CSS布尔值

  • :checked伪类用于隐藏checkboxes。以下示例说明了如何显示/隐藏一些可扩展的元素，只需一个单击按钮 
    
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Expandable elements</title>
<style>
#expand-btn {
margin: 0 3px;
display: inline-block;
font: 12px / 13px "Lucida Grande", sans-serif;
text-shadow: rgba(255, 255, 255, 0.4) 0 1px;
padding: 3px 6px;
border: 1px solid rgba(0, 0, 0, 0.6);
background-color: #969696;
cursor: default;
border-radius: 3px;
box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px white;
}

isexpanded:checked ~ #expand-btn, #isexpanded:checked ~ * #expand-btn {

background: #B5B5B5;
box-shadow: inset rgba(0, 0, 0, 0.4) 0 -5px 12px, inset rgba(0, 0, 0, 1) 0 1px 3px, rgba(255, 255, 255, 0.4) 0 1px;

}

isexpanded, .expandable {

display: none;

}

isexpanded:checked ~ * tr.expandable {

display: table-row;
background: #cccccc;

}

isexpanded:checked ~ p.expandable, #isexpanded:checked ~ * p.expandable {

display: block;
background: #cccccc;

}

Expandable elements

Column #1Column #2Column #3
[cell text][cell text][cell text]
[cell text][cell text][cell text]

[some sample text]

[some sample text]


>使用隐藏的radioboxes来存储一些CSS布尔值

>可以使用隐藏的radioboxes中的:checked伪类来构建一个只有在鼠标单击“预览”时，图片才会以全尺寸展示的图片相册

>[演示](https://developer.mozilla.org/@api/deki/files/6268/=css-checked-gallery.zip)

***
>Checkbox Trickery
![checkbox](https://user-images.githubusercontent.com/30850497/43034942-6991a822-8d18-11e8-8496-73831b19ff3a.jpg)

>html
```html
<!--
  Checkbox Trickery with CSS:
  http://codersblock.com/blog/checkbox-trickery-with-css/ 
-->

<div class="container">
  <input id="toggle1" type="checkbox" checked>
  <label for="toggle1">Toggle me!</label>

  <input id="toggle2" type="checkbox">
  <label for="toggle2">Hey, me too!</label>

  <input id="toggle3" type="checkbox">
  <label for="toggle3">Toggle party!</label>
</div>

css


@import url(https://fonts.googleapis.com/css?family=Noto+Sans);

, ::before, *::after { box-sizing: border-box; }

html { min-height: 100%; }

body { color: #435757; background: radial-gradient(#fff, #dac4cd); font: 1.4em/1 'Noto Sans', sans-serif; }

.container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}

input { position: absolute; left: -9999px; }

label { display: block; position: relative; margin: 20px; padding: 15px 30px 15px 62px; border: 3px solid #fff; border-radius: 100px; color: #fff; background-color: #6a8494; box-shadow: 0 0 20px rgba(0, 0, 0, .2); white-space: nowrap; cursor: pointer; user-select: none; transition: background-color .2s, box-shadow .2s; }

label::before { content: ''; display: block; position: absolute; top: 10px; bottom: 10px; left: 10px; width: 32px; border: 3px solid #fff; border-radius: 100px; transition: background-color .2s; }

label:first-of-type { transform: translateX(-40px); }

label:last-of-type { transform: translateX(40px); }

label:hover, input:focus + label { box-shadow: 0 0 20px rgba(0, 0, 0, .6); }

input:checked + label { background-color: #ab576c; }

input:checked + label::before { background-color: #fff; }


***

>Custom checkboxes / radio buttons
![checkbox2](https://user-images.githubusercontent.com/30850497/43034969-29bb0d78-8d19-11e8-9569-4638296e7e27.jpg)

```html
<header class="header">
  <p class="number">#1</p>
  <h1>Custom<br> Checkboxes / radio buttons</h1>
</header>

<section class="content">
  <ul class="list">
    <li class="list__item">
      <label class="label--checkbox">
        <input type="checkbox" class="checkbox" checked>
          Item 1
      </label>
    </li>
    <li class="list__item">
      <label class="label--checkbox">
        <input type="checkbox" class="checkbox">
          Item 2
      </label>
    </li>
    <li class="list__item">
      <label class="label--checkbox">
        <input type="checkbox" class="checkbox">
          Item 3
      </label>
    </li>
    <li class="list__item">
      <label class="label--checkbox">
        <input type="checkbox" class="checkbox">
          Item 4
      </label>
    </li>
  </ul>

  <ul class="list">
    <li class="list__item">
      <label class="label--radio">
        <input type="radio" class="radio" checked  name="foo">
          Item 1
      </label>
    </li>
    <li class="list__item">
      <label class="label--radio">
        <input type="radio" class="radio" name="foo">
          Item 2
      </label>
    </li>
    <li class="list__item">
      <label class="label--radio">
        <input type="radio" class="radio" name="foo">
          Item 3
      </label>
    </li>
    <li class="list__item">
      <label class="label--radio">
        <input type="radio" class="radio" name="foo">
          Item 4
      </label>
    </li>
  </ul>
</section>

<footer class="footer">
    <a href="https://www.twitter.com/sambego" target="_blank" class="btn btn--twitter">
    <i class="fa fa-twitter"></i>
  </a>

  <a href="https://codepen.io/collection/kgtrv/" target="_blank" class="btn">
    <i class="fa fa-check"></i>
    More examples
  </a>
</footer>
@import "bourbon";

$baseFontSize: 16;

$primaryColor: #16a085;
$secondaryColor: #f2f2f2;
$twitter: #2980b9;

@function rem($val) {
  @return #{$val / $baseFontSize}rem;
}

body {
  font-size: #{$baseFontSize}px;
}

.header,
.content {
  width: 20rem;
  padding: 1rem;
  margin: 0 auto;
}

.header {
  position: relative;
 }

h1 {
  padding: .5rem 1rem;
  margin: .5rem .5rem 0 .5rem;  

  border-left: rem(3) solid $primaryColor;

  font-family: Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  line-height: 130%;
}

.number {
  position: absolute;
  top: rem(35);
  left: rem(-20);

    color: $primaryColor;
  font-size: 2rem;
  font-family: Helvetiva, Arial, sans-serif;
}

.list {
  padding: .5rem 1rem;
  margin: .5rem .5rem 2rem .5rem;  

  border-left: rem(3) solid $primaryColor;
}

.list__item {
  margin: 0 0 .5rem 0;
  padding: 0;
}

.label--checkbox,
.label--radio {
  position: relative;

  margin: .5rem;

  font-family: Arial, sans-serif;
  line-height: 135%;

  cursor: pointer;
}

.checkbox {
  position: relative;
  top: rem(-6);

  margin: 0 1rem 0 0 ;

  cursor: pointer;

  &:before {
    @include transition(transform .4s cubic-bezier(.45,1.8,.5,.75));
     @include transform(rotate(-45deg) scale(0, 0));

        content: "";

        position: absolute;
        left: rem(3);
     top: rem(2);
        z-index: 1;

        width: rem(12);
        height: rem(6);

        border: 2px solid $primaryColor; 
     border-top-style: none;
     border-right-style: none;
  }

  &:checked {
    &:before {
       @include transform(rotate(-45deg) scale(1, 1));
      } 
  }

  &:after {
    content: "";

    position: absolute;
    top: rem(-2);
    left: 0;

    width: 1rem;
    height: 1rem;

    background: #fff;

    border: 2px solid $secondaryColor;

    cursor: pointer;
  }
}

.radio {
  position: relative;

  margin: 0 1rem 0 0 ;

  cursor: pointer;

  &:before {
    @include transition(transform .4s cubic-bezier(.45,1.8,.5,.75));
    @include transform(scale(0,0));

    content: "";

    position: absolute;
    top: 0;
    left: rem(2);
    z-index: 1;

    width: rem(12);
    height: rem(12);

    background: $primaryColor;

    border-radius: 50%;
  }

  &:checked {
    &:before {
     @include transform(scale(1,1)); 
    }
  }

  &:after {
    content: "";

    position: absolute;
    top: rem(-4);
    left: rem(-2);

    width: 1rem;
    height: 1rem;

    background: #fff;

    border: 2px solid $secondaryColor;
    border-radius: 50%;
  }
}

.footer {
  position: relative;
}

.btn {
  @include transition(background .3s ease-in-out);

  position: absolute;
  top: 0;
  right: 4.5rem;

  padding: .5rem;

  background: $primaryColor;

  color: #fff;
  font-family: Helvetica, Arial, sans-serif;
  text-decoration: none;

  &:hover {
    background: darken($primaryColor, 5%);
  }
}

.btn--twitter {
  right: 2rem;

  background: $twitter;

  &:hover {
    background: darken($twitter, 5%);
  }
}

Checkbox Trickery: To-Do List

checkbox3

<div class="container">
  <h1>Will's Summer To-Do List</h1>
  <div class="items">
    <input id="item1" type="checkbox" checked>
    <label for="item1">Create a to-do list</label>

    <input id="item2" type="checkbox">
    <label for="item2">Take down Christmas tree</label>

    <input id="item3" type="checkbox">
    <label for="item3">Learn Ember.js</label>

    <input id="item4" type="checkbox">
    <label for="item4">Binge watch every episode of MacGyver</label>

    <input id="item5" type="checkbox">
    <label for="item5">Alphabetize everything in the fridge</label>

    <input id="item6" type="checkbox">
    <label for="item6">Do 10 pull-ups without dropping</label>

    <h2 class="done" aria-hidden="true">Done</h2>
    <h2 class="undone" aria-hidden="true">Not Done</h2>
  </div>
</div>
@import url(https://fonts.googleapis.com/css?family=Roboto:500,700);

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  margin: 20px;
  color: #435757;
  background: linear-gradient(-20deg, #d0b782 20%, #a0cecf 80%);
  font: 500 1.2em/1.2 'Roboto', sans-serif;
}

.container {
  max-width: 450px;
  margin: 0 auto;
  border-top: 5px solid #435757;
  background-color: rgba(255, 255, 255, .2);
  box-shadow: 0 0 20px rgba(0, 0, 0, .1);
  user-select: none;
}

h1 {
  margin: 0;
  padding: 20px;
  background-color: rgba(255, 255, 255, .4);
  font-size: 1.8em;
  text-align: center;
}

.items {
  display: flex;
  flex-direction: column;
  padding: 20px;
  counter-reset: done-items undone-items;
}

h2 {
  position: relative;
  margin: 0;
  padding: 10px 0;
  font-size: 1.2em;
}

h2::before {
  content: '';
  display: block;
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: -20px;
  width: 5px;
  background-color: #435757;
}

h2::after {
  display: block;
  float: right;
  font-weight: normal;
}

.done {
  order: 1;
}

.done::after {
  content: ' (' counter(done-items) ')';
}

.undone {
  order: 3;
}

.undone::after {
  content: ' (' counter(undone-items) ')';
}

/* hide inputs offscreen, but at the same vertical positions as the correpsonding labels, so that tabbing scrolls the viewport as expected */
input {
  display: block;
  height: 53px;
  margin: 0 0 -53px -9999px;
  order: 4;
  outline: none;
  counter-increment: undone-items;
}

input:checked {
  order: 2;
  counter-increment: done-items;  
}

label {
  display: block;
  position: relative;
  padding: 15px 0 15px 45px;
  border-top: 1px dashed #fff;
  order: 4;
  cursor: pointer;
  animation: undone .5s;
}

label::before {
  content: '\f10c'; /* circle outline */
  display: block;
  position: absolute;
  top: 11px;
  left: 10px;
  font: 1.5em 'FontAwesome';
}

label:hover, input:focus + label {
  background-color: rgba(255, 255, 255, .2);
}

input:checked + label {
  order: 2;
  animation: done .5s;
}

input:checked + label::before {
  content: '\f058'; /* circle checkmark */
}

@keyframes done {
  0% {
    opacity: 0;
    background-color: rgba(255, 255, 255, .4);
    transform: translateY(20px);
  }
  50% {
    opacity: 1;
    background-color: rgba(255, 255, 255, .4);
  }
}

@keyframes undone {
  0% {
    opacity: 0;
    background-color: rgba(255, 255, 255, .4);
    transform: translateY(-20px);
  }
  50% {
    opacity: 1;
    background-color: rgba(255, 255, 255, .4);
  }
}

Checkboxes and Radio Buttons

checkbox4


    <input type="checkbox" id="c1" name="cc" />
    <label for="c1"><span></span>Check Box 1</label>
    <p>
    <input type="checkbox" id="c2" name="cc" />
    <label for="c2"><span></span>Check Box 2</label>
    <p><br/>
    <input type="radio" id="r1" name="rr" />
    <label for="r1"><span></span>Radio Button 1</label>
    <p>
    <input type="radio" id="r2" name="rr" />
    <label for="r2"><span></span>Radio Button 2</label>
body {
    font-family: Arial, sans-serif;
    position:relative;
    background:#40464b;
    height:100%;
    padding:40px 30%;
    margin:0;
}

input[type="checkbox"] {
    display:none;
}

input[type="checkbox"] + label {
    color:#f2f2f2;
}

input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}

input[type="checkbox"]:checked + label span {
    background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/check_radio_sheet.png) -19px top no-repeat;
}

input[type="radio"] {
    display:none;
}

input[type="radio"] + label {
    color:#f2f2f2;
    font-family:Arial, sans-serif;
}

input[type="radio"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/check_radio_sheet.png) -38px top no-repeat;
    cursor:pointer;
}

input[type="radio"]:checked + label span {
    background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/check_radio_sheet.png) -57px top no-repeat;
}

Animated Checkbox

checkbox5 checkbox6

 <div class="exp">
   <div class="checkbox">
    <form>
      <div>
        <input type="checkbox" id="check" name="check" value="" />
        <label for="check">
          <span><!-- This span is needed to create the "checkbox" element --></span>Checkbox
        </label>
      </div>
    </form>
</div>

html {
  height: 100%; // for styling only
}

body {
  background-color: #1790b5; // for styling only
  height: 100%; // for styling only
  font-family: 'Open Sans', sans-serif;
}

.exp {
  display: table; // to center the item
  width: 100%;
  height: 100%;

  .checkbox {
    display: table-cell; // to center the item
    width: 100%;
    height: 100%;
    vertical-align: middle; // to center the item
    text-align: center; // to center the item
  }
}

label {
    display: inline-block; // to make it easier to click
    color: #fff;
    cursor: pointer;
    position: relative; // important

    // Now we'll create the checkbox object

    span {
      display: inline-block;
      position: relative;
      background-color: transparent;
      width: 25px;
      height: 25px;
      transform-origin: center;
      border: 2px solid #fff;
      border-radius: 50%;
      vertical-align: -6px;
      margin-right: 10px;
      transition: background-color 150ms 200ms, transform 350ms cubic-bezier(.78,-1.22,.17,1.89); // custom ease effect for bouncy animation

  // Now we'll create the "tick" using pseudo elements - those will be basically two lines that will be rotated to form the "tick"

    &:before {
      content: "";
      width: 0px;
      height: 2px;
      border-radius: 2px; // so that the tick has nice rounded look
      background: #fff;
      position: absolute;
      transform: rotate(45deg);
      top: 13px; // you'll need to experiment with placement depending on the dimensions you've chosen
      left: 9px; // you'll need to experiment with placement depending on the dimensions you've chosen
      transition: width 50ms ease 50ms;
      transform-origin: 0% 0%;
    }

    &:after {
      content: "";
      width: 0;
      height: 2px;
      border-radius: 2px; // so that the tick has nice rounded look
      background: #fff;
      position: absolute;
      transform: rotate(305deg);
      top: 16px; // you'll need to experiment with placement depending on the dimensions you've chosen
      left: 10px; // you'll need to experiment with placement depending on the dimensions you've chosen
      transition: width 50ms ease;
      transform-origin: 0% 0%;
    }
  }
  // Time to add some life to it

  &:hover {
    span {
      &:before {
        width: 5px;
        transition: width 100ms ease;
      }

      &:after {
        width: 10px;
        transition: width 150ms ease 100ms;
      }
    }
  }
}

input[type="checkbox"] {
    display: none; // hide the system checkbox

  // Let's add some effects after the checkbox is checked

  &:checked {
    + label {
      span {
        background-color: #fff;
        transform: scale(1.25); // enlarge the box

        &:after {
          width: 10px;
          background: #1790b5;
          transition: width 150ms ease 100ms; // enlarge the tick
        }

        &:before {
          width: 5px;
          background: #1790b5;
          transition: width 150ms ease 100ms; // enlarge the tick
        }
      }

      &:hover { // copy the states for onMouseOver to avoid flickering
        span {
          background-color: #fff;
          transform: scale(1.25); // enlarge the box

          &:after {
            width: 10px;
            background: #1790b5;
            transition: width 150ms ease 100ms; // enlarge the tick
          }

          &:before {
            width: 5px;
            background: #1790b5;
            transition: width 150ms ease 100ms; // enlarge the tick
          }
        }  
      }
    }
  }
}

Google material style checkbox (css only)

checkbox7

<header class="header">

</header>

<section class="content">
    <ul class="list">
    <li class="list__item">
      <label class="label--checkbox">
          <input type="checkbox" class="checkbox" checked>
            Item 1
      </label>
    </li>
    <li class="list__item">
      <label class="label--checkbox">
          <input type="checkbox" class="checkbox">
            Item 2
      </label>
    </li>
    <li class="list__item">
      <label class="label--checkbox">
          <input type="checkbox" class="checkbox">
            Item 3
      </label>
    </li>
    <li class="list__item">
      <label class="label--checkbox">
          <input type="checkbox" class="checkbox">
            Item 4
      </label>
    </li>
  </ul>
</section>

<a href="" target="_blank" class="button--round button--sticky">
  <i class="fa fa-twitter"></i> 
</a>
@import "bourbon";

$baseFontSize: 16;

$green: #009688;
$blue: #5677fc;
$blueDark: #3b50ce;

$slideDistance: 100;
$slideDuration: .4s;

@function rem($val) {
  @return #{$val / $baseFontSize}rem;
}

body {
  font-size: #{$baseFontSize}px;
}

.header {
  height: 8rem;

  background:  $green;
}

.content {
  @extend %slide-up;

  width: 20rem;
  margin: -4rem auto 0 auto;
  padding: 1rem;

  background: #fff;

  border-radius: rem(2);
  box-shadow: 0 rem(2) rem(5) 0 rgba(0, 0, 0, 0.25);
}

.list {
  margin: .5rem;  
}

.list__item {
  margin: 0 0 .5rem 0;
  padding: 0;
}

.label--checkbox {
  position: relative;

  margin: .5rem;

  font-family: Arial, sans-serif;
  line-height: 135%;

  cursor: pointer;
}

.checkbox {
  position: relative;
  top: rem(-6);

  margin: 0 1rem 0 0 ;

  cursor: pointer;

  &:before {
        @include transition(all .3s ease-in-out);

        content: "";

        position: absolute;
        left: 0;
        z-index: 1;

        width: 1rem;
        height: 1rem;

        border: 2px solid #f2f2f2; 
  }

  &:checked {
    &:before {
       @include transform(rotate(-45deg));

        height: .5rem;

        border-color: $green;
        border-top-style: none;
        border-right-style: none;
    } 
  }

  &:after {
    content: "";

    position: absolute;
    top: rem(-2);
    left: 0;

    width: 1.1rem;
    height: 1.1rem;

    background: #fff;

    cursor: pointer;
  }
}

.button--round { 
  @include transition(.3s background ease-in-out);

  width: 2rem;
  height: 2rem;

  background: $blue;

  border-radius: 50%;
  box-shadow: 0 rem(2) rem(5) 0 rgba(0, 0, 0, 0.25);

  color: #fff;
  text-decoration: none;
  text-align: center;

  i {
    font-size: 1rem;
    line-height: 220%;
    vertical-align: middle;
  }

  &:hover {
    background: $blueDark;
  }
}

.button--sticky {
  position: fixed;
  right: 2rem;
  top: 16rem;
}

%slide-up {
  -webkit-animation-duration: $slideDuration;
  animation-duration: $slideDuration;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: slideUp;
  animation-name: slideUp;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@-webkit-keyframes slideUp {
  0% {
    -webkit-transform: translateY(rem($slideDistance));
    transform: translateY(rem($slideDistance));
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes slideUp {
  0% {
    -webkit-transform: translateY(rem($slideDistance));
    transform: translateY(rem($slideDistance));
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
WangShuXian6 commented 5 years ago

CSS 选择器

选择器 例子 例子描述 CSS
.class .intro 选择 class="intro" 的所有元素。 1
#id #firstname 选择 id="firstname" 的所有元素。 1
* * 选择所有元素。 2
element p 选择所有 \<p> 元素。 1
element,element div,p 选择所有 \<div> 元素和所有 \<p> 元素。 1
element element div p 选择 \<div> 元素内部的所有 \<p> 元素。 1
element>element div>p 选择父元素为 \<div> 元素的所有 \<p> 元素。 2
element+element div+p 选择紧接在 \<div> 元素之后的所有 \<p> 元素。 2
[attribute] [target] 选择带有 target 属性所有元素。 2
[attribute=value] [target=_blank] 选择 target="_blank" 的所有元素。 2
[attribute~=value] [title~=flower] 选择 title 属性包含单词 "flower" 的所有元素。 2
[attribute|=value] [lang|=en] 选择 lang 属性值以 "en" 开头的所有元素。 2
:link a:link 选择所有未被访问的链接。 1
:visited a:visited 选择所有已被访问的链接。 1
:active a:active 选择活动链接。 1
:hover a:hover 选择鼠标指针位于其上的链接。 1
:focus input:focus 选择获得焦点的 input 元素。 2
:first-letter p:first-letter 选择每个 \<p> 元素的首字母。 1
:first-line p:first-line 选择每个 \<p> 元素的首行。 1
:first-child p:first-child 选择属于父元素的第一个子元素的每个 \<p> 元素。 2
:before p:before 在每个 \<p> 元素的内容之前插入内容。 2
:after p:after 在每个 \<p> 元素的内容之后插入内容。 2
:lang(language) p:lang(it) 选择带有以 "it" 开头的 lang 属性值的每个

元素。

 2
element1~element2 p~ul 选择前面有 \<p> 元素的每个 \<ul> 元素。 3
[attribute^=value] a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 \<a> 元素。 3
[attribute$=value] a[src$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 \<a> 元素。 3
[attribute*=value] a[src*="abc"] 选择其 src 属性中包含 "abc" 子串的每个 \<a> 元素。 3
:first-of-type p:first-of-type 选择属于其父元素的首个 \<p> 元素的每个 \<p> 元素。 3
:last-of-type p:last-of-type 选择属于其父元素的最后 \<p> 元素的每个 \<p> 元素。 3
:only-of-type p:only-of-type 选择属于其父元素唯一的 \<p> 元素的每个 \<p> 元素。 3
:only-child p:only-child 选择属于其父元素的唯一子元素的每个 \<p> 元素。 3
:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 \<p> 元素。 3
:nth-last-child(n) p:nth-last-child(2) 同上，从最后一个子元素开始计数。 3
:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个 \<p> 元素的每个 \<p> 元素。 3
:nth-last-of-type(n) p:nth-last-of-type(2) 同上，但是从最后一个子元素开始计数。 3
:last-child p:last-child 选择属于其父元素最后一个子元素每个 \<p> 元素。 3
:root :root 选择文档的根元素。 3
:empty p:empty 选择没有子元素的每个 \<p> 元素（包括文本节点）。 3
:target #news:target 选择当前活动的 #news 元素。 3
:enabled input:enabled 选择每个启用的 \<input> 元素。 3
:disabled input:disabled 选择每个禁用的 \<input> 元素 3
:checked input:checked 选择每个被选中的 \<input> 元素。 3
:not(selector) :not(p) 选择非 \<p> 元素的每个元素。 3
::selection ::selection 选择被用户选取的元素部分。 3
WangShuXian6 commented 5 years ago

animation

放大动效


.dynamic-blown-up {
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 50px;
border-radius: 8px;
background-color: #64e7fd;
animation: blownUp 0.3s linear 0s 1;
font-size: 10px;
color: #ff6209;
}

@keyframes blownUp { 0% { transform: scale(0, 0); }

90% { transform: scale(1.2, 1.2); }

100% { transform: scale(1, 1); } }


<hr/>

>消失动效
```less
.dynamic-disappear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 50px;
  border-radius: 8px;
  background-color: #64e7fd;
  animation: disappear 0.3s linear 0s 1 forwards;
  font-size: 10px;
  color: #ff6209;
}

@keyframes disappear {
  0% {
    transform: scale(1.2, 1.2);

  }

  30% {
    transform: scale(1, 1);
  }

  100% {
    transform: scale(0, 0);
  }
}

弹跳动效


.dynamic-bounce {
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 50px;
border-radius: 8px;
background-color: #64e7fd;
animation: bounce 0.3s linear 0s 1 forwards;
font-size: 10px;
color: #ff6209;
}

@keyframes bounce { 0% { transform: scale(0, 0); }

30% { transform: scale(1.2, 1.2); }

60% { transform: scale(0.7, 0.7); }

100% { transform: scale(1, 1); } }


##### 旋转动画
```less
.bgm-button {
            position: fixed;
            top: 50px;
            right: 30px;
            display: flex;
            width: 30px;
            height: 30px;
        }

        .bgm-button.play {
            animation: bgmButtonRotate 2s infinite linear;
        }

        @keyframes bgmButtonRotate {
            from {
                transform: rotateZ(0deg);
            }
            to {
                transform: rotateZ(360deg);
            }
        }

loading

image 预览 https://codepen.io/WangShuXian6/pen/KjrBrd

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <base href="" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no, minimum-scale=1.0">

    <style>
        .midoci-loading-wrapper {
            z-index: 100;
            position: fixed;
            left: 0;
            top: 0;
            width: 100vw;
            height: 100vh;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: #1c1c1d;
        }

        .midoci-loading {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;

            width: 5rem;
            height: 4rem;
            overflow: hidden;
        }

        .midoci-loading .midoci-line {
            display: flex;
            width: 0.2rem;
            height: 1rem;
            background-color: #be9467;
            border-radius: 1px;
            animation: midociLoading 0.7s ease-in-out infinite;
        }

        .midoci-loading-wrapper .midoci-tip {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            color: #be9467;
        }

        .midoci-line:nth-child(1) {
            animation-delay: 0s;
        }

        .midoci-line:nth-child(2) {
            animation-delay: 0.1s;
        }

        .midoci-line:nth-child(3) {
            animation-delay: 0.2s;
        }

        .midoci-line:nth-child(4) {
            animation-delay: 0.3s;
        }

        .midoci-line:nth-child(5) {
            animation-delay: 0.4s;
        }

        .midoci-line:nth-child(6) {
            animation-delay: 0.5s;
        }

        .midoci-line:nth-child(7) {
            animation-delay: 0.6s;
        }

        @keyframes midociLoading {
            0% {
                transform: scaleY(1)
            }

            50% {
                transform: scaleY(6)
            }

            100% {
                transform: scaleY(1)
            }
        }
    </style>
    <title>loading/title>
</head>

<body>
    <div class="midoci-loading-wrapper">
        <div class="midoci-loading">
            <div class="midoci-line"></div>
            <div class="midoci-line"></div>
            <div class="midoci-line"></div>
            <div class="midoci-line"></div>
            <div class="midoci-line"></div>
            <div class="midoci-line"></div>
            <div class="midoci-line"></div>
        </div>
        <span class="midoci-tip">LOADING...</span>
    </div>
</body>

</html>

loading use rem 1rem=100px when width=375px


<!DOCTYPE html>
<html lang="zh-cn">
loading
LOADING...

WangShuXian6 commented 5 years ago

color

box-shadow

// box-shadow
@boxShadow: 0 18rpx 46rpx 0 rgba(130, 130, 130, .22);

box-shadow

WangShuXian6 commented 5 years ago

扩展可点击区域

button {
    position: relative;
    /* [rest of styling] */
}
button::before {
    content: '';
    position: absolute;
    top: -10px; right: -10px;
    bottom: -10px; left: -10px;
}
WangShuXian6 commented 5 years ago

重复线性渐变 repeating-linear-gradient

https://developer.mozilla.org/zh-CN/docs/Web/CSS/repeating-linear-gradient https://codepen.io/WangShuXian6/pen/QPymer

image

<div id="grad3"></div>
#grad3{
    width: 100px;
    height:2px;
    padding: 0px;
    background-image: repeating-linear-gradient(
          to right,#57A7DF,#57A7DF 10px,#fff 10px,#fff 15px,#E85650 15px,#E85650 25px,#fff 25px,#fff 30px
      );
  }

image

<div id="grad4"></div>
  #grad4{
    width:100px;
    height:4px;
    padding: 0px;
    background-image: repeating-linear-gradient(-45deg, #57A7DF,#57A7DF 20px,#fff 20px,#fff 30px,#E85650 30px,#E85650 50px,#fff 50px,#fff 60px);
  }
WangShuXian6 commented 5 years ago

calc css 计算

@media screen and(max-height: 667px) {
        min-height: calc(100vh - 500px);
      }
WangShuXian6 commented 5 years ago

步进条

step

<div class="step-wrapper">
    <div class="midoci-step">
      <div class="step-item">
        <span class="midoci-text active">1</span>
        <span class="midoci-info active">选择活动主题</span>
      </div>
      <span class="midoci-step-bar active"></span>

      <div class="step-item">
        <span class="midoci-text active">2</span>
        <span class="midoci-info active">设置活动内容</span>
      </div>
      <span class="midoci-step-bar"></span>

      <div class="step-item">
        <span class="midoci-text">3</span>
        <span class="midoci-info">设置奖品</span>
      </div>
      <span class="midoci-step-bar"></span>

      <div class="step-item">
        <span class="midoci-text">4</span>
        <span class="midoci-info">完成创建</span>
      </div>
    </div>
  </div>

.step-wrapper{
  display: flex;
  width: 100%;
  height: 100px;
  align-items: flex-start;
  justify-content: center;
}

.midoci-step{
  display: flex;
  width: 90%;
  align-items: center;
}

.step-item{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.step-item .midoci-text{
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  width: 30px;
  height: 30px;
  border: 3px solid #aaa;
  border-radius: 50%;
}

.step-item .midoci-text.active{
  border: 3px solid #2c9faf;
  background-color: #2c9faf;
  color: #fff;
}

.step-item .step-item.active{
  background-color: #2c9faf;
}

.step-item .midoci-info{
  position: absolute;
  top: 55px;
  left: 50%;
  transform: translate(-50%,-50%);
  color: #aaa;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
}

.step-item .midoci-info.active{
  color: #2c9faf;
}

.midoci-step-bar{
  display: flex;
  flex: 1 1 auto;
  height: 5px;
  background-color: #aaa;
  margin-left: 5px;
  margin-right: 5px;
  border-radius: 4px;
}

.midoci-step-bar.active{
  background-color: #2c9faf;
}
WangShuXian6 commented 4 years ago

CSS自定义属性（--themeColor）

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties

基本用法

声明一个局部变量：

element {
--main-bg-color: brown;
}

使用一个局部变量：

element {
background-color: var(--main-bg-color);
}

每个组件可以单独设置（并不推荐，影响统一风格），也可以全局设置（推荐）。

xy-button{
--themeColor: #42b983;/**单独设置**/
}
:root {
--themeColor: #42b983;/**全局设置**/
}

也可以通过JavaScript实时修改。

document.body.style.setProperty('--themeColor','#F44336');
WangShuXian6 commented 2 years ago

font-weight 常见粗细值名称和数值对应

100 到 900 之间的数值大致对应如下的常见粗细值名称：

100 Thin (Hairline)

200 Extra Light (Ultra Light)

300 Light

400 Normal

500 Medium

600 Semi Bold (Demi Bold)

700 Bold

800 Extra Bold (Ultra Bold)

900 Black (Heavy)