标签：常用 bezier cubic 0.36 alternate 0.64 infinite 写法 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>
标签：常用,bezier,cubic,0.36,alternate,0.64,infinite,写法,CSS 来源： https://www.cnblogs.com/jane-panyiyun/p/14626436.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。