CSS教程

常用CSS写法

本文主要是介绍常用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>        

这篇关于常用CSS写法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航