css 技巧
图片模糊
filter: blur(1px);
-webkit-filter: blur(1px); /* chrome, opera */
-ms-filter: blur(1px);
-moz-filter: blur(1px);
元素隐藏
visibility: hidden; 这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在；
opacity: 0;``CSS3属性，设置0可以使一个元素完全透明；
position: absolute; 设置一个很大的 left 负值定位，使元素定位在可见区域之外；
display: none; 元素会变得不可见，并且不会再占用文档的空间；
transform: scale(0); 将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留；
<div hidden="hidden"> HTML5属性,效果和display:none;相同，但这个属性用于记录一个元素的状态；
height: 0; 将元素高度设为 0 ，并消除边框；
filter: blur(0); CSS3属性，将一个元素的模糊度设置为0，从而使这个元素“消失”在页面中；
三角形
/** 正三角 */
.triangle {
0;
height: 0;
border-style: solid;
border- 0 25px 40px 25px;
border-color: transparent transparent rgb(245, 129, 127) transparent;
}
倒三角
/** 倒三角 */
.triangle {
0;
height: 0;
border-style: solid;
border- 40px 25px 0 25px;
border-color: rgb(245, 129, 127) transparent transparent transparent;
}
虚线效果
.dotted-line{
border: 1px dashed transparent;
background: linear-gradient(white,white) padding-box, repeating-linear-gradient(-45deg,#ccc 0, #ccc .25em,white 0,white .75em);
}
文本超出省略号
单行文本
.single-ellipsis{
500px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
多行文本
.multiline-ellipsis {
display: -webkit-box;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4; //需要显示的行数
overflow: hidden;
text-overflow: ellipsis;
}
排版竖文
<div class="bruce flex-ct-x">
<div class="vertical-text">
<h3>情</h3>
<p>我见犹怜，<br>爱不释手。<br>雅俗共赏，<br>君子好逑。</p>
</div>
</div>
.vertical-text {
writing-mode: vertical-rl;
h3 {
padding-left: 20px;
font-weight: bold;
font-size: 18px;
color: #f66;
}
p {
line-height: 30px;
color: #66f;
}
}
灰度模式
filter: grayscale(100%);
描绘波浪线
<div class="bruce flex-ct-x">
<p class="waveline-text">波浪线文字</p>
</div>
@mixin waveline($h, $color: #f66) {
position: relative;
&::after {
position: absolute;
left: 0;
top: 100%;
100%;
height: $h;
background: linear-gradient(135deg, transparent, transparent 45%, $color, transparent 55%, transparent 100%), linear-gradient(45deg, transparent, transparent 45%, $color, transparent 55%, transparent 100%);
background-size: $h * 2 $h * 2;
content: "";
}
}
.waveline-text {
height: 20px;
line-height: 20px;
letter-spacing: 10px;
@include waveline(10px);
}
格子背景
background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%),
linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%);
background-position: 0 0, 20px 20px;
background-size: 40px 40px;
下划线跟随导航栏
<div class="bruce flex-ct-x">
<ul class="underline-navbar">
<li>Alibaba阿里巴巴</li>
<li>Tencent腾讯</li>
<li>Baidu百度</li>
<li>Jingdong京东</li>
<li>Ant蚂蚁金服</li>
<li>Netease网易</li>
</ul>
</div>
.underline-navbar {
display: flex;
li {
position: relative;
padding: 10px;
cursor: pointer;
font-size: 20px;
color: #09f;
transition: all 300ms;
&::before {
position: absolute;
left: 100%;
top: 0;
border-bottom: 2px solid transparent;
0;
height: 100%;
content: "";
transition: all 300ms;
}
&:active {
background-color: #09f;
color: #fff;
}
&:hover {
&::before {
left: 0;
top: 0;
z-index: -1;
border-bottom-color: #09f;
100%;
transition-delay: 100ms;
}
& + li::before {
left: 0;
}
}
}
}
动态边框
<div class="bruce flex-ct-x">
<div class="dynamic-border">iCSS</div>
</div>
.dynamic-border {
200px;
height: 80px;
background: linear-gradient(0, #f66 2px, #f66 2px) no-repeat left top/0 2px,
linear-gradient(-90deg, #f66 2px, #f66 2px) no-repeat right top/2px 0,
linear-gradient(-180deg, #f66 2px, #f66 2px) no-repeat right bottom/0 2px,
linear-gradient(-270deg, #f66 2px, #f66 2px) no-repeat left bottom/2px 0;
cursor: pointer;
line-height: 80px;
text-align: center;
font-weight: bold;
font-size: 50px;
color: #f66;
transition: all 300ms;
&:hover {
background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
}
}
自动打字
<div class="bruce flex-ct-x">
<div class="auto-typing">Do You Want To Know More About CSS Development Skill</div>
</div>
@mixin typing($count: 0, $duration: 0, $delay: 0) {
overflow: hidden;
border-right: 1px solid transparent;
#{$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 {
0;
}
}
@keyframes caret {
50% {
border-right-color: currentColor;
}
}
渐变色文字
<h2 class="gradient-text">Gradient text</h2>
<style>
.gradient-text {
background-image: linear-gradient(90deg, red, blue);
background-clip: text;
color: transparent;
}
</style>
顺滑滚动
html {
scroll-behavior: smooth;
}
text-shadow多阴影
<h2 class="so-many-shadows">This is fun</h2>
<style>
.so-many-shadows {
text-shadow:
3px 3px 0 yellow,
6px 6px 0 blue,
9px 9px red,
12px 12px 0 black;
}
</style>
text-shadow多边框叠加
.content {
box-shadow:
0 0 0 10px #EE6352,
0 0 0 20px #D45379,
0 0 0 30px #A4558F,
0 0 0 40px #6D588E,
0 0 0 50px #405378;
}
响应式多列布局
.content {
columns: 200px;
}
动画链接下划线
h5 > a {
position: relative;
text-decoration: none;
}
h5 > a:hover {
cursor: pointer;
}
h5 > a::before {
content: "";
position: absolute;
100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #7f828f;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
h5 > a:hover::before {
visibility: visible;
transform: scaleX(1);
}
使用linear-gradient控制背景渐变
.gradient-bg {
background: linear-gradient(135deg, #f66, #f90, #3c9, #09f, #66f) left center/400% 400%;
animation: move 10s infinite;
}
@keyframes move {
0%,
100% {
background-position-x: left;
}
50% {
background-position-x: right;
}
}
清除 overflow: auto;的滚动条
.div{
overflow: auto
}
.div::-webkit-scrollbar{
display: none;
}
控制文本渐变
background-image: linear-gradient(90deg, #f66, #f90);
background-clip: text;
animation: hue 5s linear infinite;
-webkit-text-fill-color: transparent;
@keyframes hue {
from {
filter: hue-rotate(0);
}
to {
filter: hue-rotate(-1turn);
}
}
}
气泡背景墙
<div class="bruce" data-title="气泡背景墙">
<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>
.bruce {
background-image: linear-gradient(270deg, #8146b4, #6990f6);
}
.bubble-bgwall {
overflow: hidden;
position: relative;
margin: 0 auto;
100%;
max- 1200px;
height: 100%;
li {
display: flex;
position: absolute;
bottom: -200px;
justify-content: center;
align-items: center;
border-radius: 10px;
50px;
height: 50px;
background-color: rgba(#fff, .15);
color: #ccc;
animation: bubble 15s infinite;
&:nth-child(1) {
left: 10%;
}
&:nth-child(2) {
left: 20%;
90px;
height: 90px;
animation-duration: 7s;
animation-delay: 2s;
}
&:nth-child(3) {
left: 25%;
animation-delay: 4s;
}
&:nth-child(4) {
left: 40%;
60px;
height: 60px;
background-color: rgba(#fff, .3);
animation-duration: 8s;
}
&:nth-child(5) {
left: 70%;
}
&:nth-child(6) {
left: 80%;
120px;
height: 120px;
background-color: rgba(#fff, .2);
animation-delay: 3s;
}
&:nth-child(7) {
left: 32%;
160px;
height: 160px;
animation-delay: 2s;
}
&:nth-child(8) {
left: 55%;
40px;
height: 40px;
font-size: 12px;
animation-duration: 15s;
animation-delay: 4s;
}
&:nth-child(9) {
left: 25%;
40px;
height: 40px;
background-color: rgba(#fff, .3);
font-size: 12px;
animation-duration: 12s;
animation-delay: 2s;
}
&:nth-child(10) {
left: 85%;
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);
}
}
自动打字器
<div class="bruce flex-ct-x" data-title="自动打字">
<div class="auto-typing">Do You Want To Know More About CSS Development Skill</div>
</div>
@mixin typing($count: 0, $duration: 0, $delay: 0) {
overflow: hidden;
border-right: 1px solid transparent;
#{$count + 1}ch;
font-family: Consolas, Monaco, monospace;
white-space: nowrap;
animation: typing #{$duration}s steps($count + 1) #{$delay}s infinite backwards,
caret 500ms steps(1) #{$delay}s infinite forwards;
// 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 caret {
50% {
border-right-color: currentColor;
}
}
@keyframes typing {
from {
0;
}
}
鼠标样式cursor
default小白 默认
pointer小手
move移动
text文本
not-allowed禁止