1、例如像淘宝商品列表,商品有多行,想单独设置最后一行的item的margin-bottom:
.goodItem是item的class名
/* 列表的最后一行margin-bottom设置为0 */
.goodItem:nth-child(3n+1):nth-last-child(-n+3),
.goodItem:nth-child(3n+1):nth-last-child(-n+3)~.goodItem{
margin-bottom: 0;
}
2、多行文本的容器,想最后一行超出部分省略号显示:
<div class="contain">
这是多行文本这是多行文本这是多行文本这是多行文本这是多行文本这是多行文本这是多行文本这是多行文本这是多行文本这是多行文本这是多行文本这是多行文本这是多行文本这是多行文本这是多行文本这是多行文本这是多行文本这是多行文本这是多行文本这是多行文本
</div>
<style>
.contain{
width: 298px;//设置宽度
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;//代表第几行进行超出部分省略的操作
overflow: hidden;
}
</style>
3、滚动条:
html:
<div class="scroll-container"></div>
css:
.scroll-container {
height: 250px;
border: 1px solid #ddd;
padding: 15px;
overflow: auto;
.row {
margin: 0;
line-height: 1.5;
}
&::-webkit-scrollbar {
width: 8px;
background: white;
}
&::-webkit-scrollbar-corner, /* 滚动条角落 */
&::-webkit-scrollbar-thumb,
&::-webkit-scrollbar-track {
border-radius: 4px;
}
&::-webkit-scrollbar-corner,
&::-webkit-scrollbar-track {
/* 滚动条轨道 */
background-color: rgba(180, 160, 120, 0.1);
box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
}
&::-webkit-scrollbar-thumb {
/* 滚动条手柄 */
background-color: #00adb5;
}
}
4、tips(css实现,摆脱对插件的依赖)
//html部分:
<div class="bruce flex-ct-y">
<a class="tips" href="https://www.baidu.com" data-msg="Hello World">提示框</a>
<a class="tips" href="https://www.baidu.com"></a>
</div>
//css部分:
.bruce{
display: grid;
place-items: center;
}
.tips {
position: relative;
margin-top: 10px;
padding: 0 20px;
border-radius: 10px;
height: 40px;
background-color: #66f;
line-height: 40px;
color: #fff;
}
.tips::after {
position: absolute;
left: 0;
top: 0;
border-radius: 5px;
width: 100%;
height: 100%;
background-color: rgba(0,0,0, .5);
opacity: 0;
text-align: center;
font-size: 12px;
content: attr(data-msg);
transition: all 300ms;
}
.tips:first-child {
margin-top: 0;
}
.tips:hover::after {
left: calc(100% + 20px);
opacity: 1;
}
.tips[href]:empty::before {
content: attr(href);
}
.tips[href]:empty:hover::after {
display: none;
}
5、阻止点击事件的触发
//html部分:
<div class="bruce flex-ct-x">
<a class="disabled-trigger" href="https://www.baidu.com">点我</a>
</div>
//js部分:
<script>
document.getElementsByClassName("disabled-trigger")[0].addEventListener("click", () => alert("Hello World"));
</script>
//css部分:
.disabled-trigger {
padding: 0 20px;
border-radius: 10px;
height: 40px;
background-color: #66f;
pointer-events: none;
line-height: 40px;
color: #fff;
}
6、美化后的单选按钮样式:
//html部分:
<div class="bruce flex-ct-x">
<ul class="beauty-selection">
<li>
<input type="radio" name="radioName" id="fed-engineer" hidden>
<label for="fed-engineer"></label>
<span>前端工程师</span>
</li>
<li>
<input type="radio" name="radioName" id="bed-engineer" hidden>
<label for="bed-engineer"></label>
<span>后端工程师</span>
</li>
<li>
<input type="radio" name="radioName" id="fsd-engineer" hidden>
<label for="fsd-engineer"></label>
<span>全栈工程师</span>
</li>
</ul>
</div>
//css部分:
.beauty-selection {
display: flex;
li {
display: flex;
align-items: center;
margin-left: 20px;
&:first-child {
margin-left: 0;
}
}
input:checked + label {
background-color: #f90;
}
label {
margin-right: 5px;
padding: 2px;
border: 1px solid #f90;
border-radius: 100%;
width: 18px;
height: 18px;
background-clip: content-box;
cursor: pointer;
transition: all 300ms;
&:hover {
border-color: #09f;
background-color: #09f;
box-shadow: 0 0 7px #09f;
}
}
span {
font-size: 16px;
}
}
7、利用filter开启悼念模式
//html部分:
<div class="bruce flex-ct-x">
<div class="mourning-mode">
<img src="https://yangzw.vip/static/codepen/car.jpg">
</div>
</div>
//css部分:
html {
filter: grayscale(100%);
}
.mourning-mode {
img {
width: 400px;
}
}
8、使用box-shadow描绘单侧投影:
<div class="bruce flex-ct-x">
<div class="aside-shadow">投影</div>
</div>
<style>
.aside-shadow {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid;
width: 100px;
height: 100px;
box-shadow: -7px 0 5px -5px #f90;
font-weight: bold;
font-size: 30px;
color: #f90;
}
</style>
9、气泡背景墙:
<div class="bruce">
<ul class="bubble-bgwall">
<li>Love</li>
<li>Love</li>
<li>Love</li>
<li>Love</li>
<li>Love</li>
<li>Love</li>
<li>Love</li>
<li>Love</li>
<li>Love</li>
<li>Love</li>
</ul>
</div>
<style>
.bruce {
background-image: linear-gradient(270deg, #8146b4, #6990f6);
}
.bubble-bgwall {
overflow: hidden;
position: relative;
margin: 0 auto;
width: 1200px;
height: 100%;
li {
display: flex;
position: absolute;
bottom: -200px;
justify-content: center;
align-items: center;
border-radius: 10px;
width: 50px;
height: 50px;
background-color: rgba(#fff, .15);
color: #ccc;
animation: bubble 15s infinite;
&:nth-child(1) {
left: 10%;
}
&:nth-child(2) {
left: 20%;
width: 90px;
height: 90px;
animation-duration: 7s;
animation-delay: 2s;
}
&:nth-child(3) {
left: 25%;
animation-delay: 4s;
}
&:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
background-color: rgba(#fff, .3);
animation-duration: 8s;
}
&:nth-child(5) {
left: 70%;
}
&:nth-child(6) {
left: 80%;
width: 120px;
height: 120px;
background-color: rgba(#fff, .2);
animation-delay: 3s;
}
&:nth-child(7) {
left: 32%;
width: 160px;
height: 160px;
animation-delay: 2s;
}
&:nth-child(8) {
left: 55%;
width: 40px;
height: 40px;
font-size: 12px;
animation-duration: 15s;
animation-delay: 4s;
}
&:nth-child(9) {
left: 25%;
width: 40px;
height: 40px;
background-color: rgba(#fff, .3);
font-size: 12px;
animation-duration: 12s;
animation-delay: 2s;
}
&:nth-child(10) {
left: 85%;
width: 160px;
height: 160px;
animation-delay: 5s;
}
}
}
@keyframes bubble {
0% {
opacity: .5;
transform: translateY(0) rotate(45deg);
}
25% {
opacity: .75;
transform: translateY(-400px) rotate(90deg);
}
50% {
opacity: 1;
transform: translateY(-600px) rotate(135deg);
}
100% {
opacity: 0;
transform: translateY(-1000px) rotate(180deg);
}
}
</style>
10、css实现折叠面板:
<div class="bruce flex-ct-x">
<div class="accordion">
<input type="checkbox" id="collapse1">
<input type="checkbox" id="collapse2">
<input type="checkbox" id="collapse3">
<article>
<label for="collapse1">列表1</label>
<p>内容1<br>内容2<br>内容3<br>内容4</p>
</article>
<article>
<label for="collapse2">列表2</label>
<p>内容1<br>内容2<br>内容3<br>内容4</p>
</article>
<article>
<label for="collapse3">列表3</label>
<p>内容1<br>内容2<br>内容3<br>内容4</p>
</article>
</div>
</div>
<style>
.accordion {
width: 300px;
article {
margin-top: 5px;
cursor: pointer;
&:first-child {
margin-top: 0;
}
}
input {
display: none;
&:nth-child(1):checked ~ article:nth-of-type(1) p,
&:nth-child(2):checked ~ article:nth-of-type(2) p,
&:nth-child(3):checked ~ article:nth-of-type(3) p {
border-bottom-width: 1px;
max-height: 600px;
}
}
label {
display: block;
padding: 0 20px;
height: 40px;
background-color: #f66;
cursor: pointer;
line-height: 40px;
font-size: 16px;
color: #fff;
}
p {
overflow: hidden;
padding: 0 20px;
border: 1px solid #f66;
border-top: none;
border-bottom-width: 0;
max-height: 0;
line-height: 30px;
transition: all 500ms;
}
}
</style>
11、按钮的点击动画:
<div class="bruce flex-ct-x">
<button class="stereo-btn">iCSS</button>
</div>
<style>
.stereo-btn {
padding: 10px 20px;
outline: none;
border: none;
border-radius: 10px;
background-image: linear-gradient(#09f, #3c9);
box-shadow: 0 10px 0 #09f;
cursor: pointer;
text-shadow: 0 5px 5px #ccc;
font-size: 50px;
color: #fff;
transition: all 300ms;
&:active {
box-shadow: 0 5px 0 #09f;
transform: translate3d(0, 5px, 0);
}
}
</style>
12、自动打字:
<div class="bruce flex-ct-x">
<div class="auto-typing">Do You Want To Know More About CSS Development Skill</div>
</div>
<style>
@mixin typing($count: 0, $duration: 0, $delay: 0) {
overflow: hidden;
border-right: 1px solid transparent;
width: #{$count + 1}ch;
font-family: Consolas, Monaco, Monospace;
white-space: nowrap;
animation: typing #{$duration}s steps($count + 1) #{$delay}s backwards, caret 500ms steps(1) #{$delay}s $duration * 2 forwards;
}
.auto-typing {
font-weight: bold;
font-size: 30px;
color: #09f;
@include typing(52, 5);
}
@keyframes typing {
from {
width: 0;
}
}
@keyframes caret {
50% {
border-right-color: currentColor;
}
}
</style>
13、输入框:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
h4 {
text-align: center;
}
section {
display: flex;
width: 900px;
margin: 0 auto;
justify-content: space-evenly;
}
section + section {
margin-top: 40px;
}
.g {
position: relative;
}
.input-g {
border-bottom: 1px solid #d0d0d5;
}
.input-g::after {
content: "";
position: absolute;
border-bottom: 2px solid #2486ff;
left: 0;
right: 0;
bottom: -1px;
transform: scaleX(0);
transition: transform 0.25s;
}
.input-g:focus-within::after {
transform: scaleX(1);
}
.control {
margin: 0;
line-height: 1.5;
outline: none;
}
.input {
padding: 20px 16px 6px;
border: 1px solid transparent;
background: #f5f5f5;
}
.outline,
.textarea {
padding: 13px 16px 13px;
border: 1px solid #d0d0d5;
border-radius: 4px;
transition: border-color 0.25s;
}
.outline:focus,
.textarea:focus {
border-color: #2486ff;
}
.control:placeholder-shown::placeholder {
color: transparent;
}
.input-label {
position: absolute;
font-size: 16px;
line-height: 1.5;
left: 16px;
top: 14px;
color: #a2a9b6;
padding: 0 2px;
transform-origin: 0 0;
pointer-events: none;
transition: all 0.25s;
}
/* 线框样式label定位 */
.control:not(:placeholder-shown) + .input-label,
.control:focus + .input-label {
color: #2486ff;
transform: scale(0.75) translate(-2px, -32px);
}
/* 填充样式下label定位 (样式覆盖 后来居上) */
.input:not(:placeholder-shown) ~ .input-label,
.input:focus ~ .input-label {
transform: scale(0.75) translateY(-14px);
}
/* 线框交互下有个白色背景 */
.outline ~ .input-label,
.textarea ~ .input-label {
background-color: #fff;
}
</style>
</head>
<body>
<h4>填充风格</h4>
<section>
<div class="g input-g">
<input class="input control" placeholder="邮箱" />
<label for="" class="input-label">邮箱</label>
</div>
<div class="g input-g">
<input class="input control" placeholder="邮箱" />
<label for="" class="input-label">邮箱</label>
</div>
<div class="g input-g">
<input value="hello world" class="input control" placeholder="邮箱" />
<label for="" class="input-label">邮箱</label>
</div>
</section>
<h4>轮廓风格</h4>
<section>
<div class="g outline-g">
<input class="outline control" placeholder="邮箱" />
<label for="" class="input-label">邮箱</label>
</div>
<div class="g outline-g">
<input class="outline control" placeholder="邮箱" />
<label for="" class="input-label">邮箱</label>
</div>
<div class="g outline-g">
<input value="hello world" class="outline control" placeholder="邮箱" />
<label for="" class="input-label">邮箱</label>
</div>
</section>
<h4>文本的轮廓风格</h4>
<section>
<div class="g textarea-g">
<textarea class="textarea control" placeholder="邮箱"></textarea>
<label for="" class="input-label">邮箱</label>
</div>
<div class="g textarea-g">
<textarea class="textarea control" placeholder="邮箱"></textarea>
<label for="" class="input-label">邮箱</label>
</div>
<div class="g textarea-g">
<textarea
value="hello world"
class="textarea control"
placeholder="邮箱"
></textarea>
<label for="" class="input-label">邮箱</label>
</div>
</section>
</body>
</html>
14、返回浏览器顶部:
<input type="hidden" id="toTop"/>//输入框隐藏,且置顶
<label for="toTop">返回至顶</label>//label置顶