css 技巧

2022-01-13 22:37:19

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 {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 25px 40px 25px;
  border-color: transparent transparent rgb(245, 129, 127) transparent;
}

倒三角

/** 倒三角 */
.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 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{
  width: 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%;
		width: 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;
			width: 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;
				width: 100%;
				transition-delay: 100ms;
			}
			& + li::before {
				left: 0;
			}
		}
	}
}

动态边框

<div class="bruce flex-ct-x">
	<div class="dynamic-border">iCSS</div>
</div>

.dynamic-border {
	width: 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;
	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;
	}
}

渐变色文字

  <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;
                width: 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;
	width: 100%;
	max-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);
	}
}

自动打字器

<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;
	width: #{$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 {
		width: 0;
	}
}

鼠标样式cursor

default小白默认

pointer小手

move移动

text文本

not-allowed禁止

css 技巧

码农公寓

css 技巧

图片模糊

元素隐藏

三角形

倒三角

虚线效果

文本超出省略号

排版竖文

灰度模式

描绘波浪线

格子背景

下划线跟随导航栏

动态边框

自动打字

渐变色文字

顺滑滚动

text-shadow多阴影

text-shadow多边框叠加

响应式多列布局

动画链接下划线

使用linear-gradient控制背景渐变

清除 overflow: auto;的滚动条

控制文本渐变

气泡背景墙

自动打字器

鼠标样式cursor

相关文章