#app,body,html{height:100%;-webkit-overflow-scrolling:touch;font:14px/1.5 helvetica neue,helvetica,arial,pingfang sc,hiragino sans gb,microsoft yahei,heiti sc,wenquanyi micro hei,sans-serif}body,dd,dl,fieldset,h1,h2,h3,h4,h5,ol,p,textarea,ul{margin:0;word-wrap:break-word}h1,h2,h3,h4,h5{font-weight:400}button{border:none}.flex{-ms-flex-wrap:wrap;flex-wrap:wrap}.flex,.flex_top_bet{display:-webkit-box;display:-ms-flexbox;display:flex}.flex_top_bet{-ms-flex-line-pack:start;align-content:flex-start;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.flex_top_left{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:left;-ms-flex-pack:left;justify-content:left;-ms-flex-wrap:wrap;flex-wrap:wrap}.flex_top_left,.flex_top_right{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.flex_top_right{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.flex_bottom_left{-webkit-box-pack:left;-ms-flex-pack:left;justify-content:left}.flex_bottom_cen,.flex_bottom_left{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.flex_bottom_cen{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.flex_bottom_right{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.flex_cen_cen{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.flex_cen_around,.flex_cen_cen{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.flex_cen_around{-ms-flex-pack:distribute;justify-content:space-around}.flex_top_left_col{-webkit-box-pack:left;-ms-flex-pack:left;justify-content:left;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.flex_cen_column{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.flex_cen_column,.flex_top_cen{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.flex_top_cen{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.flex_cen_left{-webkit-box-pack:left;-ms-flex-pack:left;justify-content:left}.flex_cen_left,.only_flex{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.only_flex{-ms-flex-wrap:wrap;flex-wrap:wrap}.flex_cen_right{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.flex_cen_bet,.flex_cen_right{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.flex_cen_bet{-ms-flex-wrap:wrap;flex-wrap:wrap}.flex_cen_bet,.flex_col{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.flex_col{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@media screen and (max-width:500px){.flex_51{-webkit-box-flex:0;-ms-flex:0 0 80%;flex:0 0 80%;-webkit-box-sizing:border-box;box-sizing:border-box}}.mar_top_30{margin-top:30px}.bor_rad_2{border-radius:2px}.component-container{max-width:100%}.active{border:1px dashed #409eff!important;-webkit-box-sizing:border-box;box-sizing:border-box}#contextmenu{position:fixed;visibility:hidden;z-index:200;background-color:#fff;border-radius:4px;-webkit-box-shadow:0 0 10px #bbb;box-shadow:0 0 10px #bbb;min-width:180px;color:#888}#contextmenu div{padding:10px 15px}#contextmenu div:hover{background-color:#e8e8e8;cursor:pointer}#contextmenu div.split{border:1px solid #eee;height:1px;width:100%;padding:0}.preview-body,.view{width:100%;min-height:100%}a{text-decoration:none;color:inherit}.gradient_img{opacity:1!important;-webkit-transition:all .4s;transition:all .4s}#render_app{-webkit-box-sizing:border-box;box-sizing:border-box;overflow-x:hidden;width:100%;min-height:100%;background:#fff;max-width:1920px;margin:0 auto}#render_app::-webkit-scrollbar{display:none}.render_mobile_wrap{width:375px;height:100%;position:relative;background-position:50%}.render_mobile_wrap .mobile_bg{width:100%;height:100%;background-size:100%;background-repeat:no-repeat;border-radius:12px;-webkit-box-sizing:border-box;box-sizing:border-box}.render_mobile_wrap #render_scroll_midware{-webkit-box-shadow:0 0 15px #e7da92;box-shadow:0 0 15px #e7da92;position:absolute;top:50%;left:0;width:100%;overflow:hidden;background:#fff;border-radius:2px;-webkit-transform:translatey(-50%);transform:translatey(-50%)}.render_mobile_wrap #render_scroll_midware::-webkit-scrollbar{display:none}.v-modal{z-index:200!important}@media screen and (max-width:800px){chimee-progresstime-total,chimee-volume{display:none!important}}chimee-progressbar-all,chimee-progressbar-buffer{border-radius:4px}.free_support_tip{bottom:0;width:100%;z-index:112}.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.free_support_tip{line-height:55px;text-align:center;font-size:12px;background:#fff}.free_support_tip .free_support_url{color:#eb5648;font-size:16px}.free_support_tip .btn{background:#eb5648;color:#fff;padding:5px 10px;border-radius:4px;margin-left:10px;text-decoration:none} @media screen and (min-width:800px){#article_template_home .temp_item{margin:10px 40px 20px}#article_template_home .design_self{height:300px}}@media screen and (max-width:800px){#article_template_home .temp_item{margin:10px 0}#article_template_home .design_self{height:150px}}#article_template_home{padding:0 5%}#article_template_home .temp_item{cursor:pointer;width:250px;height:300px;overflow:hidden;-webkit-transition:.5s;transition:.5s;background:#fff;-webkit-box-shadow:0 5px 7px rgba(0,0,0,.2);box-shadow:0 5px 7px rgba(0,0,0,.2)}#article_template_home .temp_item .item_tip{top:0;width:100%;height:40px;background:hsla(0,0%,100%,.1);background:#fff}#article_template_home .temp_item .item_tip .text{padding:4px 20px;border-radius:4px;color:#ed5345;right:10px;bottom:12px;font-size:14px}#article_template_home .temp_item .item_tip .text2{bottom:12px;right:88px}#article_template_home .temp_item .img_wrap{position:relative;width:250px;height:260px;overflow:hidden}#article_template_home .temp_item .img_wrap .shadow{visibility:hidden;position:absolute;top:0;width:100%;height:100%;background:rgba(0,0,0,.3);color:#fff;font-size:16px}#article_template_home .temp_item .img_wrap:hover img{-webkit-animation:fadeindown 2s .3s;animation:fadeindown 2s .3s}#article_template_home .temp_item .img_wrap:hover .shadow{visibility:visible}#article_template_home .temp_item:hover .text{font-weight:700}#article_template_home .design_self{width:250px;height:300px;border-radius:2px}#article_template_home .design_self img{width:22%}#article_template_home img{width:100%;min-height:100%} .h5donghua_desc{font-size:20px;background:#ec5344;color:#fff}.h5donghua_desc .h5donghua_desc_item{width:340px;margin:0 1rem 5rem;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;color:hsla(0,0%,100%,.8)}.h5donghua_desc .h5donghua_desc_item .icon{width:30px;height:30px}.h5donghua_desc .h5donghua_desc_item .title{font-size:1.3rem;font-weight:500;line-height:4rem}.h5donghua_desc .h5donghua_desc_item .desc{font-size:1rem;font-weight:300;text-align:left} footer{line-height:30px;background:#27364e;padding:30px 80px;text-align:left}footer,footer .logo_color{color:#eb5648}footer .con_us svg{width:100%;fill:#eb5648}footer .con_us svg:hover{fill:#fff}footer .icon{border:1px solid #eb5648;width:30px;height:30px;padding:5px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;margin:10px 10px 10px 0}footer .icon:hover{background:#fff;border:1px solid #fff}.qrcode_icon{width:200px}

专注动画、创意、h5，只做丰富全面的动画平台

手势交互类h5模板

预览详情

预览详情

预览详情

预览详情

更多手势交互类h5

展示类h5模板

预览详情

预览详情

预览详情

预览详情

更多微官网类h5

建站编辑器特色

丰富的动画设置

除了支持常用的数十种进场、退场、加强等动画外，本站h5动画制作工具还支持触发式动画播放及手势播放动画控制

强大的触发器交互

h5动画制作工具预置数十种触发器，可实现触发时播放动画、播放音视频、拨打电话、页面跳转、复制文本、切换场景等交互操作，满足更多个性化交互h5设计需求

完善的组件集

图片、文字、音视频、banner导航、轮播图、表单、地图、自定义html等数十款丰富的组件，还预置响就式网站、一镜到底、翻页h5、长页h5等页面样式

h5案例推荐

自助建站-autmake

h5案例网

丰富的h5案例网

分类详细、案例策划、创意、技术实现多维度解决

爆款h5推荐

自助建站-autmake

一出手就是爆款的网易哒哒h5

注重用户参与感,吸引他们参与互动,引起共鸣

3d动画推荐

三维物体的展示与交互

汽车模型、vr看房等都用到了threejs技术