Skip to content

Instantly share code, notes, and snippets.

@xyeig

xyeig/css.markdown

Last active April 21, 2019 03:50
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save xyeig/0f07e3adc8fb614c93818ab1e884563c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save xyeig/0f07e3adc8fb614c93818ab1e884563c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. xyeig revised this gist Apr 21, 2019. No changes.
  2. xyeig created this gist Apr 21, 2019.
    7 changes: 7 additions & 0 deletions css.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    css 元素出现动画
    ----------


    A [Pen](https://codepen.io/xboxyan/pen/axLPgN) by [XboxYan](https://codepen.io/xboxyan) on [CodePen](https://codepen.io).

    [License](https://codepen.io/xboxyan/pen/axLPgN/license).
    4 changes: 4 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,4 @@
    <button onclick="add()">添加</button>
    <ul class="list" id="list">
    <li>box</li>
    </ul>
    5 changes: 5 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    function add(){
    var child = document.createElement('li');
    child.innerText = 'box';
    document.getElementById('list').appendChild(child);
    }
    43 changes: 43 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,43 @@
    .list{
    list-style: none;
    width: 200px;
    color: #fff;
    counter-reset: num;
    }
    .list li{
    padding: 10px;
    margin: 10px;
    background:slateblue;
    animation:show .5s;
    }
    .list li:after{
    counter-increment: num;
    content: counter(num)
    }
    .list li:nth-child(2n + 1) {
    background: tomato
    }
    .list li:nth-child(3n + 2) {
    background:royalblue
    }
    .list li:nth-child(5n + 3) {
    background:violet
    }
    .list li:nth-child(7n + 4) {
    background:tan;
    color: #000;
    }
    .list li:nth-child(11n + 5) {
    background:yellowgreen
    }

    @keyframes show{
    from {
    opacity: 0;
    transform: translateX(100px)
    }
    to {
    opacity: 1;
    transform: translateX(0)
    }
    }