CSS 小结（一）
2018-05-07
看了这个网站后 https://atomiks.github.io/30-seconds-of-css 做了个总结，把常用的记下了，很好的网站！
CSS 选择器
li:not(:last-child) /* 除最后一个子元素外的其他元素 */
li:last-child /* 最后一个子元素 */
/* 第一个子元素 (last-child => first-child) */三角形 triangle
<div class="triangle"></div>
<style>
.triangle {
width: 0;
height: 0;
border-top: 20px solid #ccc;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
</style>例子 =>
哪个方向的三角形则 则对面那条边有颜色
文字过长显示省略号
.truncate-text {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 200px;
}利用伪元素清除浮动 Clearfix
<div class="clearfix">
<div class="floated">float a</div>
<div class="floated">float b</div>
<div class="floated">float c</div>
</div>
<style>
.floated{
float: left;
}
.clearfix::after{
content: '',
display: block;
clear: both;
}
</style>正方形 Constant width to height ratio
<div class="square"></div>
<style>
.square {
width: 10%;
background: #ccc;
}
.square::before {
content: '';
float: left;
padding-top: 100%;
}
.square::after {
content: '';
display: block;
clear: both;
}
</style>对于宽度或高度大小已知的情况下是很容易画一个正方形的，这个对于宽度是比例（自适应）的时候，很实用。
文字选中样式 Custom text selection
<p class="custom-text-selection">Select some of this text.</p>
<style>
.custom-text-selection::selection {
background: deeppink;
color: white;
}
</style>>Select some of this text.
禁止选择 Disable selection
<p class="unselectable">You can select me.</p>
<style>
.unselectable {
user-select: none;
}
</style>下面这段话无法选中 👇
You can select me.
可以禁止用户选中，但不是防止用户复制文本的安全方法。
加载 Donut spinner
<div class="donut"></div>
<style>
@keyframes donut-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: retate(360deg);
}
}
.donut {
display: inline-block;
border: 4px solid rgba(0, 0, 0, 0.1);
border-left-color: #7983ff;
border-radius: 50%;
width: 30px;
height: 30px;
animation: donut-spin 1.2s linear infinite;
/* animation: donut-spin 1.2s linear infinite; */
/* donut-spin => 动画名称 1.2s => 完成一次需要的时间 */
/* linear => 动画保持匀速 infinite => 无限循环 */
}
</style>均匀分布 Evenly distributed children
<div class="evenly-distributed-children">
<p>Item1</p>
<p>Item2</p>
<p>Item3</p>
</div>
<style>
.evenly-distributed-children {
display: flex;
justify-content: space-between;
}
</style>Item1
Item2
Item3
水平+垂直 居中 Flexbox centering
<div class="flexbox-centering">
<div class="child">Centered content.</div>
</div>
<style>
.flexbox-centering {
display: flex;
justify-content: center;
align-items: center;
}
</style>Hover 事件下划线动画 Hover underline animation
<p class="hover-underline-animation">
Hover this text to see the effect!
</p>
<style>
.hover-underline-animation {
display: inline-block;
position: relative;
color: #0087ca;
}
.hover-underline-animation::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
transform: scaleX(0);
background-color: #0087ca;
transform-origin: bottom left;
transition: transform 0.2s ease-out;
}
.hover-underline-animation:hover::after {
transform: scaleX(1);
}
</style>Hover this text to see the effect!