常用CSS写法

2021/4/7 10:39:35

编程Tag： css 常用 infinite 写法 bezier cubic 0.36 alternate 0.64

本文主要是介绍常用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写法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

常用CSS写法

常用CSS写法

相关编程文章