No.1 - 制作一个简单的菜单动画效果---百度IFE

最近比较闲，在家做点训练

http://ife.baidu.com/course/detail/id/18?t=1527144851578#learn

CSS3新特性，兼容性，兼容方法总结

https://www.cnblogs.com/jesse131/p/5441199.html

课程概述

作业提交截止时间：09-01

关于此课程

此课程按照简单到难的顺序一共有八个任务，由浅入深的带大家了解 Web 动效落地方法。完成这八道题，你会掌握如下技能：

熟练掌握 CSS transition 、transform 、animation 的用法 ;
怎么从一份动效标注去 100% 还原 CSS 动画 ;
学会使用常用的前端动画开源库。

课程适用人群

你需要具备一定 HTML、CSS 开发基础；
你对动效设计概念有一定的了解，既知道怎么做，也知道为什么要这么做；
你需要具备熟练使用 git|github 的能力。

作者有话说

在后续的一段时间，我会陆续在我的知乎专栏公布题目的写法和详细分析。https://zhuanlan.zhihu.com/uxelement
建议你在看我的方法之前，尽量先自己先实现，我的方法不一定比你的好。也欢迎你在完成课程的闲暇，贡献自己的学习笔记。毕竟总结沉淀才是最好的学习方法。
如果你对本课程有任何意见，或者你跟我一样是个爱猫人士的话，欢迎来我的知乎勾搭~我们可以聊聊技术（养猫）心得：）

下面进入本学院第一个任务

任务目的

熟悉 CSS3 过渡子属性
通过 JavaScript 触发过渡效果
理解语义化，合理地使用 HTML 标签来构建页面

任务描述

通过 CSS transition 实现如下效果：
视频demo
每次点击【切换样式】按钮的时候，出现视频 demo 所示的动画效果。
学有余力的同学可以研究一下，如何通过修改贝塞尔曲线，让这个动效更贴近自然。

任务注意事项

CSS transition 的各项子属性（时间曲线）等详细值可以自由定义；
注意浏览器中的兼容性；
HTML 及 CSS 代码结构清晰、规范；
代码中含有必要的注释；

在线学习参考资料

CSS3 新特性兼容方法总结
CSS3 过渡
Understanding CSS3 Transitions
动效落地方法
优秀的 CSS 交互动效示例

1：行内元素水平居中 text-align:center;

2：button样式

    button{padding: 0;border: none;font: inherit;color: inherit;background-color: transparent;/* show a hand cursor on hover; some argue that weshould keep the default arrow cursor for buttons */cursor: pointer;}.btn{background-color: #fff;border: 1px solid #ccc;border-radius:4px;padding: 0.5em 1em;margin-top: 5px;}

3：transition4个属性

transition: width 0.5s ease-out 1s;

4:Cannot set property 'width' of undefined?

这个问题不是CSS的问题，而是一个纯javascript的问题。
你的css写得没错，问题出在Javascript当中的 getElementsByClassName("aa")，这个方法得到的是一个由class="aa"的所有元素组成的集合，而不是单个元素；集合是没有display属性的，集合中的元素才有display属性。当你试图做 集合.style.display的时候，自然会报错。所以你这个问题的解决方案应该是：遍历集合中所有的元素，然后给每个元素都加上display="none"的属性。示例代码如下：window.onload = function (){divset = document.getElementsByClassName("aa");for (var i = 0; i<divset.length;i++) {divset[i].style.display="none";};}

5:JS修改CSS样式

var obj = document.getElementById("btnB");
① obj.style.backgroundColor= "black";
② obj.setAttribute("class", "style2");
https://www.cnblogs.com/susufufu/p/5749922.html（全解）

6：原生JS事件写法

https://www.cnblogs.com/iyangyuan/p/4190773.html

7：伪类after和before的使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<style>button{padding: 0;border: none;font: inherit;color: inherit;background-color: transparent;/* show a hand cursor on hover; some argue that weshould keep the default arrow cursor for buttons */cursor: pointer;}.btn{background-color: #fff;border: 1px solid #ccc;border-radius:4px;padding: 0.5em 1em;margin-top: 5px;}div{text-align:center;}.hr{width:0;display: inline-block;height: 0px;border-top:1px solid blue;transition: width 0.5s ease-out;}p{transition: color 0.5s ease-out;}.box{border:1px solid #ebebeb;padding: 20px 10px;margin:20px;background-color: #f7f6f6;display: inline-block;}.box1{transform: skew(30deg);}.box2{transform: scale(0.5,1);}.box3{transform: rotate(45deg);}.box4{transform: translate(10px,20px);}.box5{transform: translate(20px,40px) rotate(45deg) scale(2,1) skew(30deg);}
</style>
<body><div><p>前端学院</p><div class="hr"></div><br><button class="btn" onclick="change()">按钮</button><br><div class="box">box0</div><div class="box box1">box1</div><div class="box box2">box2</div><div class="box box3">box3</div><div class="box box4">box4</div><div class="box box5">box5</div></div>
</body>
<script>function change(){var hr = document.getElementsByClassName('hr');var p = document.getElementsByTagName('p');console.log(hr[0].style.width);if(hr[0].style.width){hr[0].style.width=null;p[0].style.color="black";}else{hr[0].style.width="100px";p[0].style.color="blue";}}
</script>
</html>

转载于:https://www.cnblogs.com/cndotabestdota/p/9083200.html

No.1 - 制作一个简单的菜单动画效果---百度IFE相关推荐

用计算机制作动画,如何使用制作工具制作一个简单的Flash动画-电脑自学网
怎么制作Flash动画?通过Adobe Flash我们可以制作出非常有趣好看的动画,也可以制作一键简单的小动画,下面给大家介绍如何使用制作工具制作一个简单的Flash动画. 操作方法: 1.打开fla ...
制作一个简单的canvas动画
制作一个简单的canvas动画作者:旺仔一上来先话不多说上代码,代码能看的懂得,ok,就当我下面所有的内容为废话,代码看的不太懂的,没关系我会一点一点让你懂,不过前提是你有一定的html+css+ ...
制作一个简单的倒计时动画
今天我使用Android Studio制作了一个简单的倒计时动画,算是练习一下属性动画的使用吧,先看一个效果吧,点击播放倒计时动画按钮后可以播放倒计时动画实现方式: 第一步:使用Android St ...
ppt怎么制作一个简单的红绿灯动画?
红绿灯在生活中是很常见的一种,我们有时做课件时需要用到红绿灯,那么该怎样做一个简单的红绿灯呢?下面就给大家介绍下利用ppt做一个建议的动画红绿灯,下面我们就来看看详细的教程 1.首先,我们需要做一个红 ...
pr如何跳到关键帧_PR教程如何利用pr制作一个简单的动画
Adobe Premiere Pro简称PR,是一款非常不错的视频制作编辑软件,如何如何利用pr制作一个简单的动画,这里小编为大家带来了pr动画制作教程--利用pr制作动画,一起来学习一下吧! Ado ...
电子脑PHP动画制作,PS简单制作一个动态的字体动画
这篇教程是向PHP中文网的朋友分享PS简单制作一个动态的字体动画方法,教程制作出来的字体动画非常漂亮,难度不是很大,来看看吧动态的文字比静态的文字更加吸引人的目光.如果在平时的海报中,在平时的促销活 ...
实例学习SSIS（一）--制作一个简单的ETL包
http://www.cnblogs.com/tenghoo/archive/2009/10/archive/2009/10/archive/2009/10/16/ssis_lookup.html 导 ...
Python制作一个简单的抽奖软件（二）
Python制作一个简单的抽奖软件(二) 认识QT 因为都对 QT和tkinter都没用过,之前简单使用tkinter后发现,界面调整不太好弄.然后度娘了之后,QT是强大GUI库之一,很多人都推荐它. ...
PR教程：1分钟制作一个简约文字小动画视频开场片头
PR教程:1分钟制作一个简约文字小动画视频开场片头微信公众号:知音后期,一个简单直接分享干货的公众号!
Unity中用shader graph制作一个简单的传送门效果
Unity中用shader graph制作一个简单的传送门效果一.配置渲染管线 1.通过菜单"Asset" --> "Create" --> &q ...