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 代码结构清晰、规范；
- 代码中含有必要的注释；
在线学习参考资料
1：行内元素水平居中 text-align:center;
2：button样式
button{
padding:;
border: none;
font: inherit;
color: inherit;
background-color: transparent;
/* show a hand cursor on hover; some argue that we
should 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 we
should 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>
No.1 - 制作一个简单的菜单动画效果---百度IFE的更多相关文章
- 手把手制作一个简单的IDEA插件(环境搭建Demo篇)
新建IDEA插件File --> new --> Project--> Intellij PlatForm Plugin-->Next-->填好项目名OK 编写插件新建工 ...
- 如何使用AEditor制作一个简单的H5交互页demo
转载自:http://www.alloyteam.com/2015/06/h5-jiao-hu-ye-bian-ji-qi-aeditor-jie-shao/ 本教程演示如何使用AEditor制作一个 ...
- 实例学习SSIS（一）--制作一个简单的ETL包
原文:实例学习SSIS(一)--制作一个简单的ETL包 导读: 实例学习SSIS(一)--制作一个简单的ETL包 实例学习SSIS(二)--使用迭代 实例学习SSIS(三)--使用包配置 实例学习SS ...
- TensorFlow练习13: 制作一个简单的聊天机器人
现在很多卖货公司都使用聊天机器人充当客服人员,许多科技巨头也纷纷推出各自的聊天助手,如苹果Siri.Google Now.Amazon Alexa.微软小冰等等.前不久有一个视频比较了Google N ...
- PureMVC和Unity3D的UGUI制作一个简单的员工管理系统实例
前言: 1.关于PureMVC: MVC框架在很多项目当中拥有广泛的应用,很多时候做项目前人开坑开了一半就消失了,后人为了填补各种的坑就遭殃的不得了.嘛,程序猿大家都不喜欢像文案策划一样组织文字写东西 ...
- 制作一个简单的WPF图片浏览器
原文:制作一个简单的WPF图片浏览器 注:本例选自MSDN样例,并略有改动.先看效果: 这里实现了以下几个功能:1. 对指定文件夹下所有JPG文件进行预览2. 对选定图片进行旋转3. 对选定图片 ...
- 自己制作一个简单的操作系统二[CherryOS]
自己制作一个简单的操作系统二[CherryOS] 我的上一篇博客 自己制作一个简单的操作系统一[环境搭建], 详细介绍了制作所需的前期准备工作 一. 一点说明 这个操作系统只是第一步, 仅仅是开机显示 ...
- 用CSS3制作50个超棒动画效果教程
这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动.为了能够预览到这些惊人的CSS3技术带来的动画特效,请大家使用如Safari和Chrome这类基于WebKit内核的浏览器 ...
- 【Unity技巧】制作一个简单的NPC
1. 写在前面 前几天看了cgcookie的一个教程,学习了下怎么根据已有人物模型制作一个仿版的NPC人物,感觉挺好玩的,整理一下放到博客里! 先看一下教程里面的最终效果. 是不是很像个幽灵~ 下面是 ...
随机推荐
- WPF实现夜间模式
背景 项目中设计了一个黑色主题,稍加改正也可作为夜间模式,效果图如下: 原理 由于项目中存在地图,而地图完全是由位图组成,不能直接改变背景色,所以我在内容上面放置了一个黑色的Border作为遮罩.可通 ...
- 按照拼音排序的SQL语句条件
ORDER BY nlssort(NAME, 'NLS_SORT=SCHINESE_PINYIN_M')
- 撩课-Web大前端每天5道面试题-Day16
1.for循环中的作用域问题? 写出以下代码输出值,尝试用es5和es6的方式进行改进输出循环中的i值. ; i<=; i++) { setTimeout(function timer() { ...
- gRPC的简单Go例子
gRPC是一个高性能.通用的开源RPC框架,其由Google主要面向移动应用开发并基于HTTP/2协议标准而设计,基于ProtoBuf(Protocol Buffers)序列化协议开发,且支持众多开发 ...
- SSH注解方式与XML配置方式对照表
一.Hibernate 1.一对多注解 2.单表注解 二.Struts2 Struts2注解 三.Spring 1.IOC注解 2.AOP注解
- js中的同步与异步的问题
前言 近来,总是忙于拿js写一些案例,因为是小白,并没有什么丰富的经验,对各个知识点把握也不是很全面,写起来真的是...一言难尽,太痛苦了= =.尤其是在写一些轮播的时候,里面需要用到定时器,而一旦用 ...
- [POI2013]LUK-Triumphal arch
题目链接 此题的答案k具有可二分性 那么我们可以二分答案k,然后跑一个树形DP 令\(dp[i]\)表示到节点\(i\)时需要再多染色的点数 那么有\(dp[i]=\max(\sum_{fa[j]=i ...
- BZOJ1021 [SHOI2008]循环的债务
Description Alice.Bob和Cynthia总是为他们之间混乱的债务而烦恼,终于有一天,他们决定坐下来一起解决这个问题. 不过,鉴别钞票的真伪是一件很麻烦的事情,于是他们决定要在清还债务 ...
- com.alibaba.fastjson.JSONObject循环给同一对象赋值会出现"$ref":"$[0]"现象问题
1.今天定义了一个JSONObject对象,引用的com.alibaba.fastjson.JSONObject,循环给这个对象赋值出现"$ref":"$[0]" ...
- GIS平台结构设计
前言: WebGIS由于技术发展和功能定位的原因,一般在进行架构设计的时候更多地考虑是否容易实现.用户交互.数据传输方便.渲染效果等方面,对强GIS的应用考虑得少,所以架构上与桌面的GIS平台很不一样 ...