【css+js】彩色书签

最新推荐文章于 2022-09-28 16:41:02 发布

KatyLight

最新推荐文章于 2022-09-28 16:41:02 发布

阅读量432

点赞数

分类专栏：样式静态页demo 文章标签： javascript css 前端

本文链接：https://blog.csdn.net/qq_33014695/article/details/125916004

版权

样式同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

静态页demo

16 篇文章 0 订阅

订阅专栏

点击后，书签就会慢慢消失，主要依靠css动画实现，

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body {
      padding: 0;
      margin: 0;
      background-color: #181857;
      height: 100vh;
      overflow: hidden;
    }

    li.hide {
      opacity: 0;
      transition: opacity ease-in 1s;
    }

    li {

      background-color: #FFFFFFCC;
      color: #FFF;
      border-radius: 5px;
      height: 22px;
      list-style: none;
      text-align: right;
      position: absolute;
      left: 30px;
      top: calc(50vh - 22px);
      width: 70%;
      opacity: 1;
      transition: transform ease-in 1s, opacity ease-in .5s, background-color ease-in .8s;
      transform-origin: left center;
      padding: 10px 50px 10px 10px;
    }
    li:hover {
      filter: brightness(40%);
    }
    ul {
      padding-inline-start: 0;
      padding-inline-end: 0;
      marker: none;
      height: 100vh;
      overflow: hidden;
      margin: 0;
      user-select: none;
    }

    li:nth-child(1) {
      transform: rotate(-80deg);
      background-color: rgba(245, 71, 71, 0.8);
    }

    li:nth-child(2) {
      transform: rotate(-60deg);
      background-color: rgba(245, 144, 71, 0.8);
    }

    li:nth-child(3) {
      transform: rotate(-40deg);
      background-color: rgba(245, 196, 71, 0.8);
    }

    li:nth-child(4) {
      transform: rotate(-20deg);
      background-color: rgba(103, 245, 71, 0.8);
    }

    li:nth-child(5) {
      transform: rotate(0deg);
      background-color: rgba(71, 245, 230, 0.8);
    }

    li:nth-child(6) {
      transform: rotate(20deg);
      background-color: rgba(71, 120, 245, 0.8);
    }

    li:nth-child(7) {
      transform: rotate(40deg);
      background-color: rgba(129, 71, 245, 0.8);
    }

    li:nth-child(8) {
      transform: rotate(60deg);
      background-color: rgba(207, 71, 245, 0.8);
    }

    li:nth-child(n+9) {
      opacity: 0;
      /*background-color: red;*/
      transform: rotate(90deg);
    }
  </style>
  <script>

    let dlist = [
      'meine',
      'hello',
      'is',
      'var',
      'let',
      'laugh',
      'many',
      'child',
      'lightning'
    ]
    window.onload = () => {
      let ul = document.querySelector('ul')
      let k = dlist.length
      let lil = []
      for (let i = 0; i < 100; i++) {
        let v = i % k
        let str = dlist[v]
        let li = document.createElement('li')
        li.innerText = str
        li.addEventListener('click', (e) => {
          e.target.remove()
        })
        ul.append(li)
        lil.push(li)
      }

    }
  </script>
</head>
<body>
<ul>

</ul>
</body>
</html>