HTML+CSS+JS实现 ❤️ 团队人物图片蜂巢布局❤️

 

  代码目录:

主要代码实现:

css样式:

html,
body {height: 100%;margin: auto;--wrp: 800px;width: var(--wrp);
}body {background: center/1.6% #f5f5f5 url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="28" height="49" viewBox="0 0 28 49"%3E%3Cg fill-rule="evenodd"%3E%3Cg id="hexagons" fill="%23e5e5e5" fill-opacity="0.4" fill-rule="evenodd"%3E%3Cpath d="M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');background: #faf2e8;
}body,
.hex-wrap {display: flex;flex-wrap: wrap;align-items: center;justify-content: center;align-content: center;
}.hex-wrap {--r: 0.24935;--r-1: calc(1 / calc(1 - var(--r)));--g: 5px;--w: calc(var(--r-1) * var(--wrp) / 4 - 2 * var(--r-1) * var(--g));margin: 0 -1px;justify-content: flex-start;
}.hex {clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);background: center/cover #482245;color: #faf2e8;width: var(--w);height: calc(0.8658 * var(--w));margin: var(--g) calc(var(--r) / -2 * var(--w) + var(--g));position: relative;
}.hex:nth-of-type(4n) {transform: translateY(calc(50% + var(--g)));
}.hex:nth-of-type(4n+2) {transform: translateY(calc(-50% - var(--g)));
}.hex[data-h1]:before {content: attr(data-h1);font: calc(var(--w) / 3) "Permanent Marker", sans-serif;position: absolute;width: 70%;text-align: left;top: 43%;left: 50%;transform: translate(-61%, -50%) rotate(-25deg);
}.hex:before {position: absolute;width: 88%;text-align: inherit;top: 47%;left: 50%;transform: translate(-50%, -50%);
}.hex[data-h1]:before {content: attr(data-h1);font: calc(var(--w) / 3) "Permanent Marker", sans-serif;
}.hex[data-h1]:before {content: attr(data-h1);font: calc(var(--w) / 3) "Permanent Marker", sans-serif;transform: translate(-65%, -43%) rotate(-16deg);
}.hex[data-h2]:before {width: 70%;content: attr(data-h2);font: calc(var(--w) / 5)/1 "Rock Salt", sans-serif;transform: translate(-49%, -50%) rotate(-29deg);
}.hex.negr[data-h2]:before {transform: translate(-49%, -50%) rotate(31deg);
}.hex[data-team] {transition: transform 0.5s;
}.hex[data-team]:hover {z-index: 9;transform: scale(2);
}.tot {transform-origin: 50% 0;
}.tob {transform-origin: 50% 100;
}.tar {text-align: right;
}.tal {text-align: left;
}.a1 {background: #ffcb59;
}.a2 {background: #ff5b8c;
}.pr {background: #482245;
}.a1t {color: #ffcb59;
}.a2t {color: #ff5b8c;
}.prt {color: #482245;
}

html :

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Hexa team</title><link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Rock+Salt&amp;family=Permanent+Marker&amp;display=swap'><link rel="stylesheet" href="css/style.css"></head><body><div class="hex-wrap"><div class='hex tar negr' data-h2='Tim Lake'></div><div class='hex a1' data-h1='Our'></div><div class='hex a2' data-h1='Team'></div><div class='hex' data-h2='Jisim Dove'></div><div class='hex a2'></div><div class='hex' data-team='m1' style='background-image:url("img/1.jpg")'></div><div class='hex tot' data-team='m2' style='background-image:url("img/2.jpg")'></div><div class='hex a2'></div><div class='hex tar' data-h2='Simar Chan'></div><div class='hex' data-team='m3' style='background-image:url("img/3.jpg")'></div><div class='hex tob' data-team='m4' style='background-image:url("img/4.jpg")'></div><div class='hex negr' data-h2='Jeff Buzz'></div><div class='hex a1' style='background-image: url("img/5.jpg")'></div><div class='hex a1'></div><div class='hex a1'></div></div></body></html>

js文件在上面截图可以看到 需要引进来。

精彩推荐更新中:

HTML5大作业实战100套

  打卡 文章 更新  36  /  100天

大家可以点赞、收藏、关注、评论我啦 、需要完整文件随时联系我或交流哟~!

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/562125.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

设置中文环境_我花几年时间找到的学习中文好方法,值得你一看

最近挺多朋友问关于我家小C是如何学习中文汉字的&#xff0c;其实我也一直挺想写这方面的内容的&#xff0c;但真的是很纠结。说起这个过程&#xff0c;就是一把眼泪一把鼻涕的辛酸&#xff0c;因为对于海外党来说&#xff0c;学中文真的是太艰辛了&#xff01;在孩子学习中文过…

重装系统无法在计算机上运行,开机无法进入系统?重装系统开机不能进入系统怎么办...

电脑卡顿、运行缓慢、蓝屏崩溃&#xff0c;在电脑出现这些问题的时候&#xff0c;我们都会选择重装系统来解决这些问题。然而在重装系统过程中&#xff0c;有时候出现意外&#xff0c;导致重装系统后进不了系统。重装系统开机进不了系统&#xff0c;我们应该怎么办呢&#xff1…

HTML+CSS+JS实现 ❤️ 粒子倒计时特效❤️

&#x1f345; 作者主页&#xff1a;Java李杨勇 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我&#xff0c;都给你】 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f…

我与计算机作文450字,打电脑作文450字

今天&#xff0c;我妈让我玩电脑。我想可以玩CF咯&#xff0c;我特别的高兴。下面请大家来看看作文网小编为大家带来的最新单元作文《打电脑作文450字》。如果想要更多关于单元作文&#xff0c;请继续关注我们出国留学网的作文栏目。篇一&#xff1a;打电脑作文450字放暑假了&a…

恒企自考_致自考生:想自考的人千千万万,遇到的困难却千篇一律

今天我们就一起来聊聊&#xff0c;自考路上&#xff0c;都有哪些困难&#xff0c;以及要如何解决&#xff01;先看一下&#xff0c;已经在路上的考生们他们觉的自考难在哪里&#xff1f;&#xff1a;从上图来看&#xff0c;总的来说就是“记忆力不行”“自律能力差”“没法安静…

HTML+CSS+JS实现 ❤️ 科技感的数字时钟特效❤️

代码目录&#xff1a; 主要代码实现&#xff1a; css样式 : charset "utf-8"; import url("https://fonts.googleapis.com/css?familyShareTechMono"); html, body {height: 100%; }body {background: #0f3854;background: radial-gradient(ellipse at c…

HTML+CSS+JS实现 ❤️ 卡西欧手表图形特效❤️

代码目录&#xff1a; 主要代码实现&#xff1a; css样式&#xff1a; import url(https://fonts.googleapis.com/css2?familyGidugu&familyMichroma&displayswap); font-face {font-family: "DSEG7 Classic";src: url(https://manzdev.github.io/twitch-c…

徐州医科大学计算机报名,2019年徐州医科大学计算机等级考试准考证打印

2019年上半年(第54次)全国计算机等级考试&#xff0c;将于2019年3月30日-4月1日进行。我校考点考试报名和考前培训班的招生工作已全面启动。本次报名考生将自行在网上报名、缴费及打印准考证&#xff0c;因此请报名考试和培训的同学在报名前务必认真阅读此通知及报名系统中的通…

HTML+CSS+JS实现 ❤️ 立方体旋转图片切换特效❤️

效果演示&#xff1a; 代码目录&#xff1a; 主要代码实现&#xff1a; css样式&#xff1a; /*Full-page view:https://codepen.io/GeorgePark/full/gegavO/*/import url(https://fonts.googleapis.com/css?familyMontserrat:500); :root {/* Base font size */font-size: 1…

湖北大学计算机考研怎么样,湖北大学研究生好考吗 复试难吗

考取湖北大学的研究生比较容易。考研难易主要看招生单位所处的地域、名气、排名等&#xff0c;因为报考生源不同。一般来说发达地区特别是大城市的重点大学都难考&#xff0c;而非重点大学则相对好考。湖北大学是非211高校&#xff0c;所在城市位于湖北。湖北大学研究生好考吗1…

区分错误类型_牛鹭学院:Bug类型解析及其常见实例介绍

软件测试中&#xff0c;bug的类型有很多种&#xff0c;比如&#xff1a;代码错误、界面优化、设计缺陷、需求补充和用户体验等&#xff1b;一般情况下&#xff0c;需求补充和设计缺陷比较好区分&#xff0c;但是代码错误、界面优化和用户体验区分不是很明显&#xff1b;下面我们…

HTML+CSS+JS实现 ❤️酷炫的时光隧道旅行动特效❤️

效果演示&#xff1a; 代码目录&#xff1a; 主要代码实现&#xff1a; css样式&#xff1a; html, body {width: 100%;height: 100%;overflow: hidden; }body {background: #000;text-align: center; }body::before {content: "";display: inline-block;height: 10…

word文档保存到服务器,读取SQL表数据保存到Word并将Word文档保存到服务器代码

代码如下&#xff1a;引用 Microsoft Word 11.0 Object Librarypublic bool ExportWord( DataTable Table ){object Missing System.Reflection.Missing.Value;int NumRows, NumColumns, rowIndex, colIndex;object FileName Word文件名; //如&#xff1a;c:\tets.docWord.Ap…

HTML+CSS+JS实现 ❤️夜晚云层动画特效❤️

效果演示&#xff1a; 基于css3 keyframes 属性制作乌云密布云层动画&#xff0c;夜晚云层飘过动画特效。可用于网页动态云层背景特效。利用animation 和png云图片制作完成。 代码目录&#xff1a; 主要代码实现&#xff1a; css样式&#xff1a; html, body {width: 100%;he…

微机原理换行代码_微机原理课程设计——汇编输出杨辉三角

目录第一章绪论...................................................................................................................................1第二章分析与设计..............................................................................................…

微软ODBC服务器驱动,Windows ODBC 驱动程序中的连接弹性

Windows ODBC 驱动程序中的连接弹性09/01/2020本文内容为了确保应用程序能与 Azure SQL 数据库 保持连接&#xff0c;Windows 上的 ODBC 驱动程序可以还原空闲连接。重要Microsoft Azure SQL 数据库和 SQL Server 2014(及更高版本)服务器版本支持连接复原能力功能。若要详细了解…

HTML+CSS+JS实现 ❤️3D悬浮粒子翻转动效❤️

效果演示&#xff1a; three基于canvas制作全屏的3D方块粒子悬停&#xff0c;跟随鼠标移动3D翻转动画特效。支持360度无死角翻转效果。 代码目录&#xff1a; 主要代码实现&#xff1a; html代码 : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu…

3 配置ftp文件服务器,03-FTP和TFTP配置

1.1 FTP简介FTP(File Transfer Protocol&#xff0c;文件传输协议)用于在远端服务器和本地主机之间传输文件&#xff0c;是IP网络上传输文件的通用协议。在万维网(WWW&#xff0c;World Wide Web)出现以前&#xff0c;用户使用命令行方式传输文件&#xff0c;最通用的应用程序…

HTML+CSS+JS实现 ❤️新型冠状病毒射击小游戏❤️

效果演示&#xff1a; 代码目录&#xff1a; 主要代码实现&#xff1a; 部分JS代码 : var stage {w: 1280,h: 720 }var _pexcanvas document.getElementById("canvas"); _pexcanvas.width stage.w; _pexcanvas.height stage.h; var ctx _pexcanvas.getContext(…

config设置源 使用pip_python pip源配置

pip源配置文件可以放置的位置&#xff1a;Linux/Unix:/etc/pip.conf~/.pip/pip.conf~/.config/pip/pip.confMac OSX:~/Library/Application Support/pip/pip.conf~/.pip/pip.conf/Library/Application Support/pip/pip.confWindows:%APPDATA%\pip\pip.ini%HOME%\pip\pip.iniC:\…