第五课 Css3旋转放大属性，正六边形的绘制
程序员文章站
2022-07-03 17:51:27
恢复内容开始 一、效果 二、知识点 1、background-color: rgba(0,0,0,.4); (红色、绿色、蓝色、透明度（0-1）) 2、position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; /* ......
---恢复内容开始---
一、效果
二、知识点
1、background-color: rgba(0,0,0,.4); (红色、绿色、蓝色、透明度（0-1）)
2、position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; /*使用绝对定位万能居中*/
3、z-index: 1;/*绝对定位层级*/
4、transform: rotate(360deg) scale(1.4);/*旋转角度 放大比例 */
5、选择器 优先级 id>>class> 标签 同级比价数量
6、list-item 与black相似 独占一行
三、源码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="关键词">
<meta name="description" content="描述">
<title>css3旋转放大属性</title>
<style>
body{
margin: 0;
padding: 0;
}
.wrap{
width: 1000px;
height: 500px;
margin: 100px auto;
background-color: #096;
}
.wrap ul{
list-style: none;
margin: 0;
padding: 0;
}
.wrap li{
position: relative;/*相对定位 监管绝对定位*/
float: left;
width: 180px;
height: 105px;
margin: 30px 10px;
background-color: rgba(0,0,0,.5);/*(红色，绿色，蓝色，透明度（0-1）)*/
}
.wrap li:before,
.wrap li:after{
position: absolute;/*绝对定位*/
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
content:'';/*伪元素激活必备*/
}
.wrap li:before{
transform: rotate(-60deg);
}
.wrap li:after{
transform: rotate(60deg);
}
.wrap .important{
margin-left: 100px;/*左边距*/
}
.wrap img{
position: absolute;/*万能居中position: absolute; top: 0;left: 0;right: 0;bottom: 0; margin: auto;*/
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 75px;
height: 75px;
z-index: 1;/*绝对定位层级*/
}
.wrap img:hover{
transform: rotate(360deg) scale(1.4);/*旋转角度 放大比例 */
transition: 1s;
}
/*
选择器 优先级 id>>class> 标签 同级比价数量
list-item 与black相似 独占一行
*/
</style>
</head>
<body>
<div class="wrap">
<ul>
<li><img src="images\1.png"></li>
<li><img src="images\1.png"></li>
<li><img src="images\1.png"></li>
<li><img src="images\1.png"></li>
<li><img src="images\1.png"></li>
<li class="important"><img src="images\1.png"></li>
<li><img src="images\1.png"></li>
<li><img src="images\1.png"></li>
<li><img src="images\1.png"></li>
<li><img src="images\1.png"></li>
<li><img src="images\1.png"></li>
<li><img src="images\1.png"></li>
<li><img src="images\1.png"></li>
<li><img src="images\1.png"></li>
</ul>
</div>
</body>
</html>
---恢复内容结束---
上一篇： 武夷山正山小种的功效和作用是什么