幻象客官网的导航和工具制作完成啦

发表于 闲谈 2017-01-06 阅读数: 217

以后还会加入更多的内容。

其实花了不少时间,其中最耗时的当然是这个效果啦:

幻象客

这个动态效果由很长的一段CSS代码组成,这里贴一部分。有兴趣的可以私聊公众号style.css,或者自己上网站抓包。

.ch-info {

   position: absolute;

   background: rgba(59,89,120, 0.7);

   width: inherit;

   height: inherit;

   border-radius: 50%;

   opacity: 0;

   -webkit-transition: all 0.4s ease-in-out;

   -moz-transition: all 0.4s ease-in-out;

   -o-transition: all 0.4s ease-in-out;

   -ms-transition: all 0.4s ease-in-out;

   transition: all 0.4s ease-in-out;

   -webkit-transform: scale(0);

   -moz-transform: scale(0);

   -o-transform: scale(0);

   -ms-transform: scale(0);

   transform: scale(0);

   -webkit-backface-visibility: hidden;

}

工具页面,目前不是很多内容,以后会慢慢进行补充:

你能猜出哪个图是什么工具吗?嘿嘿。其中有NEIE自动学习机哦。

这个是导航页面,用了同一种设计,目前不是很多内容:

目前测试除了iphone的Safari显示不出那个动态效果外其他一切正常。使用iPhone的童靴可能需要换一个浏览器进行浏览。

欢迎关注微信公众号:幻象客

网站:https://www.huanxiangke.com

幻象客 二维码

Add comment