常用CSS写法
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了常用CSS写法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5736字，纯文字阅读大概需要9分钟。
内容图文
常用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写法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】