学习日报12.16

最新推荐文章于 2024-08-25 18:26:48 发布

IUrkin

最新推荐文章于 2024-08-25 18:26:48 发布

阅读量94

点赞数

分类专栏：日报文章标签： html 定位 css

本文链接：https://blog.csdn.net/IUrkin/article/details/111290671

版权

日报专栏收录该内容

9 篇文章 0 订阅

订阅专栏

2d转换 css

连写模式

在这里插入图片描述

一边移动一边旋转

先移动再旋转，如果先转再移动，会由于方向发生变化导致出现未知的路径

位移方法translate 绝对定位 absolute 定位position 缩放效果scale 的效果实现

在这里插入图片描述

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		.c {
			width: 500px;
			height: 200px;
			background: #921113;
			margin: auto;
			position: relative;
		}
		.a {
			width: 30px;
			height: 40px;
			line-height: 40px;
			background: #807F7F;
			border: 1px solid white;
			border-radius: 0px 25px 25px 0px;
			position: absolute;
			top: 50%;
			text-align: center;
			transform: translateY(-50%);
		}
		.x {
			width: 30px;
			height: 40px;
			line-height: 40px;
			background: #807F7F;
			border: 1px solid white;
			border-radius: 25px 0px 0px 25px;
			position: absolute;
			right: 0px;
			top:50%;
			transform: translateY(-50%);
			text-align: center;
		}
		.v {
			list-style-type: none;
			position: absolute;
			top:90%;
			left: 50%;
			transform: translateX(-50%);
		}
		.v li{
			width: 10px;
			height: 10px;
			border-radius: 5px;
			background:rgba(0,0,0,0.3);
			float:left;
			transition: all 0.5s;
			margin:0 2px;
		}
		.v li:hover {
			transform: scale(1.3);
			background:rgba(0,0,0,0.6);
		}
	</style>
</head>

<body>
	<div class="c">
		<div class="a">&lt;</div>
		<div class="x">&gt;</div>
	    <ul class="v">
	   	<li></li>
	   	<li></li>
	   	<li></li>
	   	<li></li>
	   	<li></li>
	   </ul>
	
	</div>
</body>
</html>

堆叠顺序

在这里插入图片描述

IUrkin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习日报12.16

2d转换 css连写模式一边移动一边旋转先移动再旋转，如果先转再移动，会由于方向发生变化导致出现未知的路径位移方法translate 绝对定位 absolute 定位position 缩放效果scale 的效果实现<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title> <style type="text/css">
复制链接

扫一扫

专栏目录