CSS

语言：

CSSSCSS

确定

@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);

html,

body {

height: 100%;

width: 100%;

margin: 0;

}

body {

background: linear-gradient(80deg, #43cea2, #185a9d);

background-size: 400% 400%;

-webkit-animation: AnimatedGradient 10s ease infinite;

-moz-animation: AnimatedGradient 10s ease infinite;

animation: AnimatedGradient 10s ease infinite;

}

.container {

width: 100%;

height: 50%;

margin: auto;

right: 0;

left: 0;

top: 0;

bottom: 0;

position: absolute;

}

.hexagon {

position: relative;

width: 300px;

height: 173.21px;

margin: 86.60px 0;

background-image: url(http://www.extremetech.com/wp-content/uploads/2013/07/Andromeda-Galaxy-640x353.jpg);

background-size: auto 346.4102px;

background-position: center;

background-repeat: no-repeat;

box-shadow: 0 0 10px rgba(0, 0, 0, 1);

margin-top: 5%;

margin-left: 10.5%;

float: left;

}

.title {

font-size: 1.5em;

text-align: center;

margin-top: 12.5%;

margin-left: 0%;

position: absolute;

width: 100%;

height: 40px;

font-family: 'Raleway', Arial, sans-serif;

z-index: 1;

line-height: 1.7;

}

.statement {

font-size: 2em;

text-align: center;

margin-top: 27.5%;

margin-left: 0%;

position: absolute;

width: 100%;

height: 51px;

background-color: black;

color: white;

font-family: 'Raleway', Arial, sans-serif;

z-index: 1;

line-height: 1.7;

font-weight: bold;

}

#left {

background-image: url(http://onehdwallpaper.com/wp-content/uploads/2015/07/Chile-Mountain-Beautiful-Photography.jpg);

background-size: auto 346.4102px;

background-position: center;

background-repeat: no-repeat;

}

#middle {

background-image: url(http://www.wallpaperhi.com/thumbnails/detail/20120815/light%20clouds%20nature%20trees%20rain%20forest%20grass%20wildlife%20wet%202560x1600%20wallpaper_www.wallpaperhi.com_69.jpg);

background-size: auto 346.4102px;

background-position: center;

background-repeat: no-repeat;

}

#right {

background-image: url(http://www.extremetech.com/wp-content/uploads/2013/07/Andromeda-Galaxy-640x353.jpg);

background-size: auto 346.4102px;

background-position: center;

background-repeat: no-repeat;

}

.hexagon:hover .hexagon-hidden {

display: block;

}

.hexagon-hidden {

position: absolute;

width: 300px;

height: 173.21px;

margin: 86.60px 0;

background-color: #DDDDDD;

-webkit-animation: fadein 1s;

/* Safari, Chrome and Opera > 12.1 */

-moz-animation: fadein 1s;

/* Firefox < 16 */

-ms-animation: fadein 1s;

/* Internet Explorer */

-o-animation: fadein 1s;

/* Opera < 12.1 */

animation: fadein 1s;

top: 0;

bottom: 0;

right: 0;

left: 0;

margin: auto;

float: left;

z-index: 99;

transform: scale(.85);

font-family: 'Raleway', Arial, sans-serif;

display: none;

}

.hover {

display: block;

}

#hiddenArea {

box-shadow: none;

}

.hexagon-hidden:hover {

background-image: none;

}

.hexTop,

.hexBottom {

position: absolute;

z-index: 1;

width: 212.13px;

height: 212.13px;

overflow: hidden;

-webkit-transform: scaleY(0.5774) rotate(-45deg);

-ms-transform: scaleY(0.5774) rotate(-45deg);

transform: scaleY(0.5774) rotate(-45deg);

background: inherit;

left: 43.93px;

box-shadow: 0 0 10px rgba(0, 0, 0, 1);

}

/*counter transform the bg image on the caps*/

.hexTop:after,

.hexBottom:after {

content: "";

position: absolute;

width: 300.0000px;

height: 173.20508075688775px;

-webkit-transform: rotate(45deg) scaleY(1.7321) translateY(-86.6025px);

-ms-transform: rotate(45deg) scaleY(1.7321) translateY(-86.6025px);

transform: rotate(45deg) scaleY(1.7321) translateY(-86.6025px);

-webkit-transform-origin: 0 0;

-ms-transform-origin: 0 0;

transform-origin: 0 0;

background: inherit;

}

.hexTop {

top: -106.0660px;

}

.hexTop:after {

background-position: center top;

}

.hexBottom {

bottom: -106.0660px;

}

.hexBottom:after {

background-position: center bottom;

}

.hexagon:after {

content: "";

position: absolute;

top: 0.0000px;

left: 0;

width: 300.0000px;

height: 173.2051px;

z-index: 2;

background: inherit;

}

@-webkit-keyframes AnimatedGradient {

0% {

background-position: 0% 50%

}

50% {

background-position: 100% 50%

}

100% {

background-position: 0% 50%

}

}

@-moz-keyframes AnimatedGradient {

0% {

background-position: 0% 50%

}

50% {

background-position: 100% 50%

}

100% {

background-position: 0% 50%

}

}

@keyframes AnimatedGradient {

0% {

background-position: 0% 50%

}

50% {

background-position: 100% 50%

}

100% {

background-position: 0% 50%

}

}

@keyframes fadein {

from {

opacity: 0;

}

to {

opacity: 1;

}

}

/* Firefox < 16 */

@-moz-keyframes fadein {

from {

opacity: 0;

}

to {

opacity: 1;

}

}

/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadein {

from {

opacity: 0;

}

to {

opacity: 1;

}

}

/* Internet Explorer */

@-ms-keyframes fadein {

from {

opacity: 0;

}

to {

opacity: 1;

}

}

/* Opera < 12.1 */

@-o-keyframes fadein {

from {

opacity: 0;

}

to {

opacity: 1;

}

}

html如何将图片做成六边形,HTML5六边形图形效果相关推荐

  1. 把图片做成html,HTML5实践-图片设置成灰度图

    以前,在web上要显示灰度图片的话,只有手工使用图片软件转换.但是现在借助于html5的canvas可以实现这个过程,而不需要再借助图片编辑软件了.我用html5和jquery做了一个demo,来展示 ...

  2. html5把六张图片做成立方体,html5 3D旋转的图片立方体代码

    特效描述:html53D 旋转的图片立方体.html5 css3转换属性创建3D旋转立方体多维数据图片库代码. 代码结构 1. HTML代码 单击下面的图片来旋转立方体. //DOM load eve ...

  3. html5怎么把图片做成按钮,炫酷实用的jQuery插件 涵盖菜单、按钮、图片 | HTML5资源教程...

    新的一周开始了,今天我们要为大家分享一些全新的 1.CSS3书本翻页动画 书本翻页效果逼真 今天我们要分享一款炫酷而且实用的CSS3动画效果,它是模拟书本翻页的动画特效.当鼠标滑过书本右上角时,书本即 ...

  4. c语言静态图片做成动态效果,如何使静态图片做成动态效果？怎么让静态图片动起来...

    原标题:如何使静态图片做成动态效果?怎么让静态图片动起来 如果用手机拍了一组张片,想要将这些静态图片合成动态的该怎么操作呢?将多张图片合成一张gif动图的方式,既能够占据更少的内存,还能够提升图片的趣 ...

  5. 图片照片展示html5模板

    简介: 图片照片展示html5模板 网盘下载地址: http://kekewangLuo.cc/GPDLk5RCWJO0 图片:

  6. 如何将图片做成gif动图？

    如何将图片做成gif动图?前几天我的一个粉丝小伙伴问我一个问题,上班的时候领导给了他几张图片,让他将这几张图片合并做成一张gif动图,他也是第一次制作gif动图,于是在网上寻找方法教程,找了很久也尝试 ...

  7. c语言静态图片做成动态效果,怎样把图片做成动态图 两张静态图片加过渡效果制作成gif动图...

    近日有朋友问小编说:有两张带文字的图片文件,想要制作成gif格式的动图,并且这两张图片要加上自然的过渡效果,这样怎么制作呢?其实咱们狸窝家园也是有挺多图片制作成gif动图的方法的,只是要添加自然的过渡 ...

  8. 怎么把图片做成gif动图

    怎么把图片做成gif动图?当我们看到网上有很多非常搞笑又可爱的gif动图,你是不是也想自己做一个属于自己的呢?嗯,有很多的小姐姐,他们就很喜欢做一些小动物或者小宝宝的gif动图.gif动图大家应该都不 ...

  9. Unity 将图片做成预制体

    Unity 将图片做成预制体 刚导入Assets的图片是无法直接拖入场景中的,若我们想要将图片变成预制体,需要做一点转化. 方法如下: 选中想要转成预制体的图片,更改如下图: 然后就可以将图片拖入场景 ...

最新文章

  1. 计算机语言主要由一些指令组成这些指令包括,(计算机组成指令系统汇编语言.ppt...
  2. 【iOS开发-8】UIButton类型属性简单归纳以及自定义按钮的设置
  3. Mysql数据库文件路径重置
  4. python入门教程完整版(懂中文就能学会)-Python入门教程完整版400集（懂中文就能学会）快来带走...
  5. 基因分子生物学～DNA与蛋白质模板
  6. Web前端人员如何面试？常见vue面试题有哪些？
  7. 吸尘车-真空吸尘车：真空吸尘车
  8. C#实现文件拖放并打开文件
  9. 表单相关标签之textarea，select
  10. VMware网络连接模式——桥接模式、NAT模式以及仅主机模式的介绍和区别
  11. 如何在Angular中引入AliPlayer
  12. 基于Python的植被覆盖度时空变化规律分析
  13. 联想计算机系统重装,联想笔记本电脑一键重装系统的方法
  14. 主引导记录MBR的结构和作用
  15. VirtualBox 6.0.10
  16. Mac OS制作Windows10启动盘
  17. fast文件服务器的迁移,FastDfs数据迁移方案预研
  18. html单元格上下拆分代码,在HTML/CSS如何垂直拆分表格单元格（特别版）
  19. txt文件批量转换为excel文件
  20. 李航《统计学习方法》第2版 第5章课后习题答案

热门文章

  1. 如何度量逻辑回归模型表现
  2. 解决苹果、WIN 10和Ubuntu时间不同步的问题
  3. linux shell 计算时间差值
  4. 使用 Axis2 调用 Java WebService 接口
  5. uniapp盲盒商城交易平台系统多语言国外H5盲盒商城源码
  6. WZOI-202去除圆括号
  7. Docker------基础命令、容器卷、容器互联
  8. 《变形金刚4》玩植入玩过头 红牛、舒化奶……啥都有
  9. 基于微信小程序的课程点名签到系统设计与实现 报告+项目源码及数据库文件
  10. EFCore范型数据仓储和DBContext优化