常用CSS写法

常用CSS写法

 

 
1. 隐藏滚动条或更改滚动条样式  
/*css主要部分的样式*//*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 10px; /*对垂直流动条有效*/ height: 10px; /*对水平流动条有效*/ } /*定义滚动条的轨道颜色、内阴影及圆角*/ ::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: rosybrown; border-radius: 3px; } /*定义滑块颜色、内阴影及圆角*/ ::-webkit-scrollbar-thumb{ border-radius: 7px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #E8E8E8; } /*定义两端按钮的样式*/ ::-webkit-scrollbar-button { background-color:cyan; } /*定义右下角汇合处的样式*/ ::-webkit-scrollbar-corner { background:khaki; }
 
文字超出隐藏并显示省略号
单行（一定要有宽度）
width:200rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 
多行
word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
 
 
控制div内的元素自动换行
word-wrap: break-word; word-break：break-all;
 
 
纯css画三角形
#demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
 
绝对定位元素居中（水平和垂直方向
#demo {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-color: green;
}
 
 
css3实现小球沿着椭圆轨迹旋转的动画
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 旋转动画 */
      .animate {
        width: 420px;
        height: 300px;
        border-radius: 50%;
        position: absolute;
        left: 10px;
        top: 20px;
      }
      @keyframes animX {
        0% {
          left: -20px;
        }
        100% {
          left: 340px;
        }
      }
      @keyframes animY {
        0% {
          top: -30px;
        }
        100% {
          top: 200px;
        }
      }
      @keyframes scale {
        0% {
          transform: scale(0.7);
        }
        50% {
          transform: scale(1.2);
        }
        100% {
          transform: scale(0.7);
        }
      }
      .ball {
        width: 100px;
        height: 100px;
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 12px;
      }
      .ball img:hover {
        transform: scale(1.2);
      }
      .ball img {
        width: 70px;
        height: 70px;
        margin-bottom: 10px;
      }
      /* 6个图x和y轴动画加起来是18s , 18s/6 等于 3s
每个球y轴动画延迟 从0递减3s,x轴与y轴相差动画时长的一半（9s/2） */
      .ball1 {
        animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -4.5s infinite alternate,
          animY 9s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
          scale 18s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
      }
      .ball2 {
        animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -7.5s infinite alternate,
          animY 9s cubic-bezier(0.36, 0, 0.64, 1) -3s infinite alternate,
          scale 18s cubic-bezier(0.36, 0, 0.64, 1) -3s infinite alternate;
      }
      .ball3 {
        animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -10.5s infinite alternate,
          animY 9s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate,
          scale 18s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate;
      }
      .ball4 {
        animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -13.5s infinite alternate,
          animY 9s cubic-bezier(0.36, 0, 0.64, 1) -9s infinite alternate,
          scale 18s cubic-bezier(0.36, 0, 0.64, 1) -9s infinite alternate;
      }
      .ball5 {
        animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -16.5s infinite alternate,
          animY 9s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate,
          scale 18s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate;
      }
      .ball6 {
        animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -19.5s infinite alternate,
          animY 9s cubic-bezier(0.36, 0, 0.64, 1) -15s infinite alternate,
          scale 18s cubic-bezier(0.36, 0, 0.64, 1) -15s infinite alternate;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <!-- 旋转动画 -->
      <div class="animate">
        <div class="ball ball1">
          <img src="img/ball.jpg" />
          <p>1</p>
        </div>
        <div class="ball ball2">
          <img src="img/ball.jpg" />
          <p>2</p>
        </div>
        <div class="ball ball3">
          <img src="img/ball.jpg" />
          <p>3</p>
        </div>
        <div class="ball ball4">
          <img src="img/ball.jpg" />
          <p>4</p>
        </div>
        <div class="ball ball5">
          <img src="img/ball.jpg" />
          <p>5</p>
        </div>
        <div class="ball ball6">
          <img src="img/ball.jpg" />
          <p>6</p>
        </div>
      </div>
      <!-- 旋转动画结束 -->
    </div>
  </body>
  <script>
    var items = document.getElementsByClassName("ball");
    //console.log(items)
    for (var i = 0; i < items.length; i++) {
      items[i].addEventListener("click", function() {
        console.log(this);
      });
    }
    for (var i = 0; i < items.length; i++) {
      items[i].addEventListener("mouseover", function() {
        for (j = 0; j < items.length; j++) {
          items[j].style.animationPlayState = "paused";
        }
      });
      items[i].addEventListener("mouseout", function() {
        for (j = 0; j < items.length; j++) {
          items[j].style.animationPlayState = "running";
        }
      });
    }
  </script>
</html>
 
 
 
 

posted @ 2021-04-07 09:56  jane_panyiyun  阅读(232)  评论(0)  编辑  收藏  举报