常用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>