前端学习【03】常用CSS代码块

最新推荐文章于 2023-07-04 22:39:08 发布

原创最新推荐文章于 2023-07-04 22:39:08 发布 · 3.4k 阅读

1 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

3 篇文章

订阅专栏

本文分享了7个实用的CSS技巧，包括清除浮动、隐藏溢出文字、使用伪元素响应鼠标悬停、过渡动画、居中对齐、中心点旋转及动画效果。每个技巧均附带代码示例，帮助读者快速掌握并应用于实际项目中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

常用CSS笔记

1.清除浮动

.clearfix:after {
	content:".";/*内容为小点，尽量不要空，否者旧版本浏览器有空隙*/
	display:block;
	height:0;
	visibility:hidden;/*隐藏盒子*/
	clear:both;
}

.clearfix {
	*zoom:1;/* *代表ie6/7能识别的特殊符号 zoom就是ie6/7清除浮动的方法*/
}

2.溢出文字隐藏

.overflow {
	white-space:nowrap;/*首先强制一行*/
	overflow:hidden;
	text-overflow:ellipsis;/*超出部分使用省略号*/
}

3.鼠标经过插入一个伪元素

.div {
	width:100px;
	height:100px;
	position:relative;/*子绝父相*/
}

.div:hover::before {
	content:"";
	width:100%;
	height:100%;
	border:10px solid rgba(255,255,255,.3);
	display:block;/*伪元素属于行内元素，需要转换*/
	position:absolute;
	top:0;
	left:0;
	box-sizing:border-box;/*把padding 和 border 都算入width里面*/
}

4.过渡动画

div {
 	width:300px;
 	height:100px;
 	/*transition写在div中 而不是hover中*/
	/*transition: width 0.6s ease 0s,height 0.3s ease-in 1s;*/
	transition: all 0.6s;/*所有属性都变化，后面连个参数可省略*/
}
/*鼠标经过盒子，改变盒子大小*/
div:hover {
	width:600px;
	height:300px;
}

5.盒子居中对齐

div {
 	width:200px;
 	height:200px;
 	background-color:pink;
 	position:absplute;
 	left:50%;
 	top:50%;
 	/*margin-left:100px; 需要计算不合适*/
 	/*水平/垂直 移动自己宽度的一半*/
 	transform:translate(-50%,-50%);
}

6.按中心点旋转

div {
 	width:200px;
 	height:200px;
 	background-color:pink;
	transition:all 0.6s;
	/*transform-origin:top left; 设置旋转点 为左上角  */
	transform-origin:20px 30px;
}

div:hover{
	/*旋转360度*/
	transform:rotate(360deg);
}

7.动画

div {
 	width:200px;
 	height:200px;
 	background-color:pink;
 	/*animation: 动画名称 动画时间 运动曲线 何时开始 播放次数(infinite无限循环) 是否反方向*/
	animation: go 2s ease 0s 2 alternate;/*引用动画 一般只使用前两个参数*/
}
/*定义动画 keyframe 动画名称 {} */
@keyframes go{
	/*from{
		transform:translateX(0);
	}
	to{
		transform:translateX(600px);
	}*/
	0%{/*起始位置，等价于 from*/
		transform:translate3d(0，0,0);
	}
	25%{
		transform:translate3d(800px，0,0);
	}
	50%{
		transform:translate3d(800px，400px,0);
	}
	75%{
		transform:translate3d(0，400px,0);
	}
	100%{/*相当于 to*/
		transform:translate3d(0，0,0);
	}
}