申请网站
忘记密码
密 码：
登录名：
建站咨询热线：
0532-88781131
、
15166683288
返回贴子列表
发表新贴
主题：
CSS3动画应用
共有
1445
人浏览过本贴
主贴管理
置 顶
加 精
结 贴
转 贴
昵称：奈薇建站网
论坛积分：108060
发贴等级：
21
发贴数：1159
回贴数：1282
被砸鸡蛋：
1
获赠鲜花：
182
发表时间：2019/6/28 15:47:00
楼 主
CSS3动画应用
以前
青岛网站设计
上的动画基本都是依靠flash制作完成，后来慢慢出现了javascript技术，让动画的显示效率显著提高，随着浏览器对CSS3动画的支持越来越好（IE除外，IE10用户量还非常的少），CSS3动画应用也将日趋广泛，以前
青岛网站制作
很多只能用flash或者javascript实现的动画效果，现在用CSS3动画也能部分的实现了。作为一个前端设计师，我们有足够的理由去使用CSS3动画让用户有更好的体验。
在使用CSS3动画设计构思前，我们须改变所有的浏览器都保持一致的思想，在不支持CSS3动画的主流浏览器里面保持最基本的功能体验，让支持CSS3动画的浏览器给用户提供更优的用户体验。
QQ音乐上周发布的QQ音乐年末回馈，全民领福袋的活动需求中，有习惯使用chrome等非IE浏览器的同学会发现一些好玩的效果，像《逆世界》电影一样，福袋里的礼品像失重般飞出来，贴在顶上，这是ecd同学利用CSS3动画设计的小创意。类似的效果，在很多的项目中都会出现，相信以后也会越来越多。
写在前
“起初，神创造天地。”
CSS3的出现已让web从业者兴奋了好久，但因兼容性的关系，应用面相对较窄，当然，也有不少的项目都有它的渗入，特别是在mac及移动终端领域。
好几个月前，我们在一个伟大项目中大肆使用CSS3及其更深入的动画属性，来替代古老年代需要JS来完成的选择和效果，给用户更冲“鸡”、更舒心的体验。
“神看光是好的、就把光暗分开了。”
资料整合后经过体验发现，资料整理成的手册混入过多的DEMO不合适，这些动画属性参数DEMO应有个地方来存放，让资料查阅和动画属性参数DEMO都有各自的窝。同时，过多的“算法”和数学及校式属性的组合使用，会让很多人抓狂。于是增加了一个工具，可以在线设计动画、调试预览或调用集成库输出合适自己需要的CSS3动画代码，来满足另一部份不仅仅停留于查阅资料的诉求。
“神说、要有光、就有了光。”
大伙抬起头，露出诡异的笑容表示认同，并表示是应该有这么个利器来帮助人类工业复兴。于是他挽起裤管，提起脚丫夹起那双人字拖一脚踩在转椅上，N++分钟后，框架出来了。然来大伙坐下来讨论、需求分析、分工、输出计划deadline，经过团队全员业余长时间参与资料的整理、验证与校对，良好的阅读版面设计，资料手册有了一个比较完整的原型。
“神说、天上要有光体、可以分昼夜、作记号、定节令、日子、年岁。”
经过对目标用户的使用习惯与诉求采样分析，动画工具经过多次讨论后确认采用左右结构，左侧是三个TAB切换，可设计“变形过渡”、“自定义动画”与“预设动画库”，右侧是效果预览区，方便即时检验动画的预期。
设计面板提供三种模式的混合：设置条拖动智能调整大概数值，手工输入数值精确调整，预设效果与贝塞尔曲线混合，更多的操作发现可在体验中获得。
右侧预览区域，可把本机图片拖动到区域内替换默认图片，以获得更接近的动画效果。在“自定义动画”设置时，右侧下面还提供一个时间轴动画层集合的调试区域（如上图），可在关键帧设置其时间位置与数值，或删除关键帧。
“地是空虚混沌，渊面黑暗，神的灵运行在水面上。”
ecd的小灰灰看着大伙桌面上堆积成山的各种资料，喃喃地说，做个网站吧，把我们用过的这些属性整合起来，方便我们自己查阅，如果可以，也分享出来，方便广大劳动人民。
“并要发光在天空、普照在地上。事就这样成了。”
所有的功能特性都集合完毕，最后到整妆阶段，得有皮，是的，万物生长靠太阳，再牛X的东东也需要包装。达人同学经过一周末的操刀画皮，并为此设计了一个野蜂飞舞的LOGO，大伙堆在一起整合优化，体验并修改细节和BUG，经过多个日夜的奋斗。
就这么成了，就这么成了。
「CSS3动画参考」名字暂定，如您有更性感的名字，请告知我们。由ecd数字音乐设计中心利用业余时间整理/设计/研发输出，并在实际工作中得到验证，争取呈现的是一份详细严谨的资料。
感谢ecd本项目团队huihui、darren、mousa、williams、bryan、hugo、rock、pufen倾情辛苦奉献和广大业界知识份子的支持与鞭策，“神的光要照着我们！”
该工具使用HTMl5&CSSS3设计开发，我们十分建议您使用Chrome、Safari、Firefox等浏览器进行访问使用。在使用过程中有疑问或错误纠正，请在本贴留言。
“神称光为昼、称暗为夜．有晚上、有早晨、这是头一日。”
经过内部多天的体验使用发现，有了资料手册和工具，不能没有成品的品鉴，应该全民参与提交的一个案例集合，世间有取有予，才最和谐。网站第三块内容“案例分享”也就出现了。
奈薇建站网致力于，让每个中国人、每个中国企业都拥有自己的“官方网站”！
回复此贴
单贴管理
修 改
删 除
清理签名
TOP
共
0
个回贴 分
0
页
上一页 / 下一页 当前第
页
奈薇建站网青岛网站建设公司/青岛网站制作公司，专业提供"气质"型网站建设及精美网站制作服务，同时欢迎各地网站建设公司、网站制作公司代理我们的奈薇建站系统共同发展
热点地区：
青岛网站建设价格
青岛即墨网站制作公司
开发区信息港
山东在线门户
1
182
