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

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样式

  1.     button{
  2.          padding:;
  3.           border: none;
  4.          font: inherit;
  5.          color: inherit;
  6.           background-color: transparent;
  7.           /* show a hand cursor on hover; some argue that we
  8.           should keep the default arrow cursor for buttons */
  9.           cursor: pointer;
  10.     }
  11.     .btn{
  12.         background-color: #fff;
  13.         border: 1px solid #ccc;
  14.         border-radius:4px;
  15.         padding: 0.5em 1em;
  16.         margin-top: 5px;
  17.     }

3：transition4个属性

  1. transition: width 0.5s ease-out 1s;

4:Cannot set property 'width' of undefined?

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

5:JS修改CSS样式

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

6：原生JS事件写法

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

7：伪类after和before的使用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <style>
  8.     button{
  9.          padding: 0;
  10.           border: none;
  11.          font: inherit;
  12.          color: inherit;
  13.           background-color: transparent;
  14.           /* show a hand cursor on hover; some argue that we
  15.           should keep the default arrow cursor for buttons */
  16.           cursor: pointer;
  17.     }
  18.     .btn{
  19.         background-color: #fff;
  20.         border: 1px solid #ccc;
  21.         border-radius:4px;
  22.         padding: 0.5em 1em;
  23.         margin-top: 5px;
  24.     }
  25.     div{
  26.         text-align:center;
  27.     }
  28.     .hr{
  29.         width:0;
  30.         display: inline-block;
  31.         height: 0px;
  32.         border-top:1px solid blue;
  33.         transition: width 0.5s ease-out;
  34.     }
  35.     p{
  36.         transition: color 0.5s ease-out;
  37.     }
  38.     .box{
  39.         border:1px solid #ebebeb;
  40.         padding: 20px 10px;
  41.         margin:20px;
  42.         background-color: #f7f6f6;
  43.         display: inline-block;
  44.     }
  45.     .box1{
  46.         transform: skew(30deg);
  47.     }
  48.     .box2{
  49.         transform: scale(0.5,1);
  50.     }
  51.     .box3{
  52.         transform: rotate(45deg);
  53.     }
  54.     .box4{
  55.         transform: translate(10px,20px);
  56.     }
  57.     .box5{
  58.         transform: translate(20px,40px) rotate(45deg) scale(2,1) skew(30deg);
  59.     }
  60. </style>
  61. <body>
  62.     <div>
  63.     <p>前端学院</p>
  64.     <div class="hr"></div>
  65.     <br>
  66.     <button class="btn" onclick="change()">按钮</button>
  67.     <br>
  68.     <div class="box">box0</div>
  69.     <div class="box box1">box1</div>
  70.     <div class="box box2">box2</div>
  71.     <div class="box box3">box3</div>
  72.     <div class="box box4">box4</div>
  73.     <div class="box box5">box5</div>
  74.     </div>
  75. </body>
  76. <script>
  77.     function change(){
  78.         var hr = document.getElementsByClassName('hr');
  79.         var p = document.getElementsByTagName('p');
  80.         console.log(hr[0].style.width);
  81.         if(hr[0].style.width){
  82.             hr[0].style.width=null;
  83.             p[0].style.color="black";
  84.         }else{
  85.         hr[0].style.width="100px";
  86.         p[0].style.color="blue";
  87.         }
  88.     }
  89. </script>
  90. </html>

No.1 - 制作一个简单的菜单动画效果---百度IFE的更多相关文章

  1. 手把手制作一个简单的IDEA插件(环境搭建Demo篇)

    新建IDEA插件File --> new --> Project--> Intellij PlatForm Plugin-->Next-->填好项目名OK 编写插件新建工 ...

  2. 如何使用AEditor制作一个简单的H5交互页demo

    转载自:http://www.alloyteam.com/2015/06/h5-jiao-hu-ye-bian-ji-qi-aeditor-jie-shao/ 本教程演示如何使用AEditor制作一个 ...

  3. 实例学习SSIS（一）--制作一个简单的ETL包

    原文:实例学习SSIS(一)--制作一个简单的ETL包 导读: 实例学习SSIS(一)--制作一个简单的ETL包 实例学习SSIS(二)--使用迭代 实例学习SSIS(三)--使用包配置 实例学习SS ...

  4. TensorFlow练习13: 制作一个简单的聊天机器人

    现在很多卖货公司都使用聊天机器人充当客服人员,许多科技巨头也纷纷推出各自的聊天助手,如苹果Siri.Google Now.Amazon Alexa.微软小冰等等.前不久有一个视频比较了Google N ...

  5. PureMVC和Unity3D的UGUI制作一个简单的员工管理系统实例

    前言: 1.关于PureMVC: MVC框架在很多项目当中拥有广泛的应用,很多时候做项目前人开坑开了一半就消失了,后人为了填补各种的坑就遭殃的不得了.嘛,程序猿大家都不喜欢像文案策划一样组织文字写东西 ...

  6. 制作一个简单的WPF图片浏览器

    原文:制作一个简单的WPF图片浏览器 注:本例选自MSDN样例,并略有改动.先看效果: 这里实现了以下几个功能:1.  对指定文件夹下所有JPG文件进行预览2.  对选定图片进行旋转3.  对选定图片 ...

  7. 自己制作一个简单的操作系统二[CherryOS]

    自己制作一个简单的操作系统二[CherryOS] 我的上一篇博客 自己制作一个简单的操作系统一[环境搭建], 详细介绍了制作所需的前期准备工作 一. 一点说明 这个操作系统只是第一步, 仅仅是开机显示 ...

  8. 用CSS3制作50个超棒动画效果教程

    这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动.为了能够预览到这些惊人的CSS3技术带来的动画特效,请大家使用如Safari和Chrome这类基于WebKit内核的浏览器 ...

  9. 【Unity技巧】制作一个简单的NPC

    1. 写在前面 前几天看了cgcookie的一个教程,学习了下怎么根据已有人物模型制作一个仿版的NPC人物,感觉挺好玩的,整理一下放到博客里! 先看一下教程里面的最终效果. 是不是很像个幽灵~ 下面是 ...

随机推荐

  1. hdu 1392 Surround the Trees 凸包模板

    Surround the Trees Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

  2. Struts2 (三) — OGNL与值栈

    一.OGNL表达式 1.概述 1.1什么是OGNL ​ OGNL是Object-Graph Navigation Language的缩写,俗称对象图导航语言. 它是一种功能强大的表达式语言,通过它简单 ...

  3. Drupal7安装注意事项

    1.在php.ini中将max_execution_time = 2400,memory_limit = 256M

  4. Laravel之Ueditor

    1.访问网址http://ueditor.baidu.com/website/download.html下载合适的编辑器版本 2.按照插件包中的index.html样式,布局页面 3.如果需要使用表单 ...

  5. RHEL5.X 重启网卡出现./network-functions: line 78: .: ifcfg-eth0: file not found

    错误信息: 红帽RHEL5.5系统,重启网卡报错 [root@localhost network-scripts]# service network restart Shutting down int ...

  6. No rabbit death problem

    package basic.java; /** * 不死神兔问题: * 有一对兔子,从出生后第三个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,加入兔子都不死,问地二十个月的兔子对数 ...

  7. pytorch 文本输入处理

    https://blog.csdn.net/nlpuser/article/details/88067167 https://blog.csdn.net/u012436149/article/deta ...

  8. js作用域链以及全局变量和局部变量

    > [带var] > 在当前作用于中声明了一个变量,如果当前是全局作用域,也相当于给全局作用域设置了一个属性叫做a ```javascript //=>变量提升:var a; < ...

  9. weixin设置菜单

    https://jingyan.baidu.com/article/925f8cb8dfcf11c0dce05661.html

  10. 类型“Microsoft.Office.Interop.Word.ApplicationClass”错误 4317 无法嵌入互操作类型

    类型“Microsoft.Office.Interop.Word.ApplicationClass”错误 4317 无法嵌入互操作类型“Microsoft.Office.Interop.Word.Ap ...