纯CSS3画六角灯笼特效，详细教学

这个效果是我一个同事没事画着搞的。

我们先看效果， 不想看实现过程的，直接拉到最底下点击查看原文。

这是高清静态版：

起初，我就是想做一个节目中那样2D的卡通大红灯笼。在百度效果图的时候，发现了这种古典灯笼。真的十分漂亮，就临时换了目标。

要实现这个效果，需要熟悉CSS3的transform样式和一丢丢的空间的想象能力。

第一步，我们完成一个正六边形

先画出一个长方形div，然后再复制5个。将他们以中心为原点，依次旋转60度。然后像Z轴方向偏移一下。

具体的偏移量，根据你div的宽度，简单的三角函数换算一下。

比如：我的div宽度为80，则需要Z轴移动的距离为40/Math.tan(Math.PI*30/180)=69

    .surface {  position: absolute; left: -40px;    top: -100px;    width: 80px;    height: 150px;  background: radial-gradient(#fffea1, #fffea1, #fbd342); transform-origin: center;   overflow: hidden;   }   .front {transform: rotateY(0) translateZ(69px);}    .right-front {transform: rotateY(60deg) translateZ(69px);}  .right-rear {transform: rotateY(120deg) translateZ(69px);}  .rear {transform: rotateY(180deg) translateZ(69px);}    .left-rear {transform: rotateY(-120deg) translateZ(69px);}  .left-front {transform: rotateY(-60deg) translateZ(69px);}

顶部和底面，我也做了两个六边形的面，本来计划是盖住的，不过最终成像时候不太好看，我就去掉了。

六边形之前的文章已经提到过了。使用border属性，画出两个梯形，拼凑起来，就是六边形。

第二步，我们对这个灯笼做一些修饰。

这里就偷个懒，使用圆和方块来做装饰。

每个矩形的before和after。我来做两个矩形的框，用来表示灯笼的木质骨架。

然后在四个角。分别放四个装饰用的圆。超出矩形的部分隐藏。

  .surface-decoration {    position: absolute; width: 40px;    height: 40px;   border-radius: 50%; border: solid 3px #e36d00;  }   .surface-decoration.left-top {  left: -20px;    top: -20px; }   .surface-decoration.right-top { right: -20px;   top: -20px; }   .surface-decoration.left-bottom {   left: -20px;    bottom: -20px;  }   .surface-decoration.right-bottom {  right: -20px;   bottom: -20px;  }

第三步，我们再加上一些凸出来的装饰

这个就是画两个交叉的矩形，在灯笼表面的交叉处凸出来。看着就像是木质骨架的延伸。

实现方式也是一个矩形，我们使用它的before和after。分别画两个矩形。

记得复制六份，依次旋转60度。

其实这个时候基本上已经可以结束了。不过我还想更完美一些。

第四步，添加顶部和底部的框架。

这个步骤没有什么创新性了。就是重复使用之前的代码，然后重写一些样式。达到顶部变宽变矮。底部变矮的效果。顺便我们换一个视角。

第五步，添加流苏和中国结

由于已经到半夜4点，我也有点扛不住了。流苏部分就偷懒了。一条红线，加上一个渐变色的长方形。长方形顶部为半圆。

由于计划中还有旋转的效果，所以流苏也要考虑旋转的时候时刻保持可见。

简单粗暴的处理方式。复制三份，分别旋转60度。这样就基本保障，无论哪个角度都不会被隐藏。

中国结，使用分别使用4个圆角矩形，旋转45度和负45度。就得到交叉的网状中国结主体。

在两边加上两个耳朵。

效果完成。

最后，加上动画效果

加上旋转和外发光的效果。模拟走马灯和蜡烛的闪烁。

收工睡觉。 顺便求个关注。

代码仓库地址：https://github.com/shb190802/html5

每天只想听你们说：北妈最帅！

前端你别闹

我觉得你们应该点 「在看」

纯CSS3画六角灯笼特效，详细教学相关推荐

php隐藏指定id的div,CSS_纯css3显示隐藏一个div特效的具体实现，复制代码代码如下: !DOCTYPE H - phpStudy...
纯css3显示隐藏一个div特效的具体实现复制代码代码如下: #showDiv { background-color:red; width:300px; height:300px; display: ...
css滑动星星评分,纯css3滑动星星打分动画特效
特效描述:纯css3 滑动星星打分动画.纯css3滑动星星打分动画特效代码结构 1. 引入CSS 2. HTML代码基本样式: Basic star rating: 5 stars 4 stars ...
纯CSS3实现动态火车行驶特效
上次开完飞机,这次开火车查看效果:http://hovertree.com/texiao/css3/7/ 效果图: 代码如下: <!DOCTYPE html> <html> ...
css元素发光效果图,纯CSS3实现圆圈动态发光特效动画的示例代码
本文主要介绍了纯CSS3实现圆圈动态发光特效动画的示例代码,分享给大家,具体如下: 效果图: 代码: 纯CSS3实现圆圈动态发光特效动画 body { background-color: #00000 ...
html设计动画小黄人,用纯css3画一个小黄人并实现动画效果
[摘要] 本文用纯css3画出一个动态的小黄人页面,代码简洁高效,是一个非常实用的CSS3学习案例. 不得不说CSS3的出现让网页更加绚丽生动,以前需要用图片来实现的效果现在完全可以通过几段css来解 ...
纯css3模拟龙卷风动画js特效
下载地址纯css3代码实现的龙卷风特效,css模拟龙卷风动画代码. dd:
html css画五角星,css画梯形，css画五角星， css画六角星，css画六边形
css画梯形,css画五角星, css画六角星 ,css画六边形 css画梯形 .triangle { border-bottom: 100px solid #F36823; border-left: ...
python绘制六角星外廓_Python之OpenGL笔记(32)：正交投影画六角星
一.目的 1.摄像机应用,正交投影画六角星: 二.程序运行结果三.摄像机的设置吴亚峰<OpenGL ES 3.x游戏开发>(上卷)内容从日常生活的经验中可以很容易地了解到,随着摄像机 ...
2014圣诞节一款纯css3实现的雪人动画特效
在2014年的圣诞节,爱编程小编给大家分分享一款纯css3实现的雪人动画特效.该实例实现一个雪人跳动的特效,效果图如下: 在线预览源码下载实现的代码. html代码: <span cla ...

纯CSS3画六角灯笼特效，详细教学

纯CSS3画六角灯笼特效，详细教学相关推荐

最新文章

热门文章