CSS 3旋转放大属性，正六边形的绘制

最新推荐文章于 2023-07-01 11:15:35 发布

*派大星*

最新推荐文章于 2023-07-01 11:15:35 发布

阅读量164

点赞数

分类专栏：前端CSS 文章标签：前端 css web

本文链接：https://blog.csdn.net/weixin_42282235/article/details/96485090

版权

前端CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了如何使用CSS3的transform属性来创建一个正六边形，并在鼠标悬停时实现旋转放大效果。关键知识点包括背景颜色设置、绝对定位、伪元素、旋转和缩放等。示例代码展示了如何通过结合:before和:after伪元素来构造正六边形，并在:hover状态下应用动画效果。

摘要由CSDN通过智能技术生成

CSS 3旋转放大属性，正六边形的绘制

1. 效果如下：
在这里插入图片描述
2. 所用到的知识点：

a、background-color: rgba(0,0,0,.4);   (红色、绿色、蓝色、透明度（0-1）)

b、position: absolute; left: 0; top: 0; right: 0; bottom: 0;    margin: auto;  /*使用绝对定位万能居中*/

c、z-index: 1;/*绝对定位层级*/

d、transform: rotate(360deg) scale(1.4);/*旋转角度   放大比例   */

e、选择器 优先级 Id>>class> 标签  同级比价数量 

f、list-item  与black相似 独占一行

3. 源码如下：

<!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;  /*清除ul自身的特效，小黑点*/
    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\011.png"></li>
    <li><img src="images\011.png"></li>
    <li><img src="images\011.png"></li>
    <li><img src="images\011.png"></li>
    <li><img src="images\011.png"></li>
    <li class="important"><img src="images\011.png"></li>
    <li><img src="images\011.png"></li>
    <li><img src="images\011.png"></li>
    <li><img src="images\011.png"></li>
    <li><img src="images\011.png"></li>
    <li><img src="images\011.png"></li>
    <li><img src="images\011.png"></li>
    <li><img src="images\011.png"></li>
    <li><img src="images\011.png"></li>
</ul>
</div>
</body>
</html>

*派大星*

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 3旋转放大属性，正六边形的绘制

CSS 3旋转放大属性，正六边形的绘制1. 效果如下：2. 所用到的知识点：a、background-color: rgba(0,0,0,.4); (红色、绿色、蓝色、透明度（0-1）)b、position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; /*使用绝对定位万能居中*/c、z-i...
复制链接

扫一扫

专栏目录