如何制作H5页面 H5如何在网页中绘制三角形

【 tulaoshi.com - css 】

H5如何在网页中绘制三角形

　　网页中经常有一种三角形的图标，鼠标点一下会弹出一个下拉菜单之类的(之前淘宝也有，不过现在改版好像没有了)

　　之前以为是个png图标背景，后来在bootstrap中看到有一个图标样式叫做caret的用来实现这种效果。没想到用CSS也能实现这个效果。

　　看了下源码是这样的：

　　.caret {display: inline-block;width: 0;height: 0;margin-left: 2px;vertical-align:middle;border-top: 4px solid;border-right: 4px solid transparent;border-left: 4px solid transparent;}

　　这是为什么呢?我们打个比方，有四块红色和黑色的木板代表元素的四个边框，把他们两横两竖重叠起来，这时候他们在二维平面的投影便成了上面的效果。

　　效果1：显示效果是以四个不同方向的光的投影

　　{width: 0;height: 0;border-top: 40px solid #000;border-right: 40px solid#ff0000;border-left: 40px solid #ff0000;border-bottom: 40px solid #000;}

　　效果2：其他方向上设置透明色

　　{width: 0;height: 0;border-top: 40px solid transparent;border-left: 40px solid#ff0000;border-bottom: 40px solid transparent;}

　　效果3：

　　{width: 0;height: 0;border-top: 40px solid #000;border-right: 30px solid#ff0000;border-left: 50px solid #ff0000;border-bottom: 25px solid #000;}

如何制作H5页面 

　　创建作品

　　登陆VXPLO互动大师网站，进入“我的作品”页面。点击创建作品，创建一个手机案例或PC案例。

　　添加素材

　　1、 工具栏中选中图片工具，在白色舞台里拖曳出一个对象框，确定图片大小与位置，便可添加素材，例如下图添加了一个唇印的图片。

　　2、 你还可以添加其他素材，例如文字、视频、音频等。

　　3、 对象树中也会出现唇印这个素材，我们可以通过对象树比较方便地管理素材。

　　添加事件

　　1、 在素材下添加事件，如下图，触发条件是点击，目标对象是唇印图片，目标动作是振动，时间为1秒。

　　2、 保存作品，点击菜单栏的预览按钮，或用手机扫描预览二维码，就可以观看效果了，点击唇印图片的时候，唇印就会振动。

　　如此三步

　　就可以完成一个简单的H5页面动态效果。当然，VXPLO互动大师还可以制作非常有趣复杂的效果，配合计数器、时间轴、滑动时间轴、动效等组件来使用，可以制作更多酷炫的H5页面哦!

　　分享作品

　　回到我的作品页面，点击分享按钮，可以把这个地址分享给朋友，或者扫描二维码，在手机上观看，还可以分享到微信朋友圈。

　　如果你有独特的创意想法，运用VXPLO互动大师，通过简单的几步设定完成一个微场景，打破生硬的动态图文，增加用户浏览时更有交互性和趣味性，在微信中快速传播。更多零代码做交互效果，可以查看VXPLO互动大师网站。