css矩形凹陷效果_css基础小练习

最新推荐文章于 2021-08-04 04:40:40 发布

weixin_39672160

最新推荐文章于 2021-08-04 04:40:40 发布

阅读量1.1k

点赞数

文章标签： css矩形凹陷效果

本文链接：https://blog.csdn.net/weixin_39672160/article/details/112116565

版权

1.CSS中的定位position

Position有三个，absolute绝对定位，定位会释放原来的位置，并且是基于外层父级标签来说的
relative是相对定位，定位离开原来的位置没有释放，相对于原来的位置来说的。
fixed是固定的对位，始终是基于浏览器的左上角来定位的适合用来做广告

2. Css3新增选择器

.div_1>p:last-child是获得最后一个子元素
.div_1>p:first-child获得第一个子元素
.div_1>p:nth-child(n)获得指定的子元素，括号中为odd为偶数行，even为基数行
.div_1>p:empty获取为空的子元素标签
inpue：focus获取焦点
befor在指定对象之前插入属性
属性选择器input[type=text]

3.css3的新增属性

/*倒圆角指令*/
border-radius: 100px; 0-100px当为0时是一个矩形，当为100px为圆
/*旋转角度*/
transform: rotate(45deg); 0-360deg旋转的度数
/*放大的倍数*/
transform: scale(1.3); 放大与缩小的倍数，1以上为方法，1以下到0为缩小
transform: translate(0px,-5px); X:水平的位移 Y ：垂直的位移负数：上
box-shadow: 0px 0px 70px #D5093C; 阴影水平方向的偏移垂直方向的偏移模糊度阴影的颜色
@keyframes name动画标签，from{}to{}从。。到。。的动作

4.用css做出一个会跳动的心效果如下

主要是对两个圆以及一个矩形旋转之后拼接成的效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		
			.cen{
				width: 200px;
				height: 200px;
				background-color: #FF00FF;
				box-shadow: 0px 0px 50px #FF00FF;
				animation: 1s aj infinite;
			}
			/*倒圆角指令*/
			.lef{
				border-radius: 100px;
				position: absolute;
				top: 200px;
				left: 150px;
			}
			.rig{
				border-radius: 100px;
				position: absolute;
				top: 200px;
				left: 300px;					
			}
			.c{
				transform: rotate(45deg);
				position: absolute;
				top: 275px;
				left: 225px;
			}
			div:hover{
				
				transform: scale(1.3);
				
			}
			/*动画'*/
			@keyframes aj{
				0%{transform: scale(1) rotate(45deg);}
				50%{transform: scale(1.1) rotate(45deg);}
				100%{transform: scale(1) rotate(45deg);}
			}
		</style>
	</head>
	<body>
		<!--圆-->
		<div class="cen lef">
				
			
		</div>
		<!--矩形-->
		<div class="cen c">
			
		</div>
		<!--圆-->
		<div class="cen rig">
			
		</div>
	</body>
</html>

weixin_39672160

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css矩形凹陷效果_css基础小练习

1.CSS中的定位positionPosition有三个，absolute绝对定位，定位会释放原来的位置，并且是基于外层父级标签来说的relative是相对定位，定位离开原来的位置没有释放，相对于原来的位置来说的。fixed是固定的对位，始终是基于浏览器的左上角来定位的适合用来做广告2. Css3新增选择器.div_1>p:last-child是获得最后一个子元素 .div_1>p:f...
复制链接

扫一扫