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

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的更多相关文章

  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. 四：SpringCloud-Hystrix

    八:Hystrix断路器 1. 概述 1.1 分布式系统面临的问题 ==复杂分布式体系结构中的应用程序有数十个依赖关系,每个依赖关系在某些时候将不可避免地失败.== 上图中的请求需要调用A, P, H ...

  2. SpringMVC笔记：annotation注解式开发

    一.配置式开发 在我们之前的学习中,springmvc使用配置式开发模式,需要在核心配置文件中springmvc.xml注册大量的bean来注入controller控制器,工作繁琐容易出错,下面我们学 ...

  3. Rafy中的EventBus

    EventBus主要是干嘛使的,直接翻译叫事件总线. 是观察者模型的实现,利用它你既可以实现观察者模型的业务场景,还可以基于它的事件驱动机制来实现应用程序内组件之间的解耦与通信. 我们来看看有Even ...

  4. Java CountDownLatch解析（上）

    写在前面的话 最近一直在边工作边学习分布式的东西,看到了构建Java中间件的基础知识,里面有提到Java多线程并发的工具类,例如ReentrantLock.CyclicBarrier.CountDow ...

  5. spss C# 二次开发 学习笔记（三）——Spss .Net 开发

    Spss .Net 二次开发的学习过程暂停了一段时间,今天开始重启. 之前脑残的不得了,本想从网上下载一个Spss的安装包,然后安装学习.于是百度搜索Spss,在百度搜索框的列表中看到Spss17.S ...

  6. php之连接mssql（sql server）新手教程

    ps:网上搜了很多教程,讲的都很好,就是都有点漏的地方,花了一天时间查缺补漏终于弄好了(;´༎ຶД༎ຶ`),希望我的教程能帮到新手,还有写博客的时候因为不小心按错一个键,导致重写了,博客园这个编辑器真 ...

  7. python学习之老男孩python全栈第九期_day020知识点总结——序列化模块、模块的导入和使用

    一. 序列化模块 # 序列化 --> 将原本的字典.列表等内容转换成一个字符串的过程就叫做序列化# 反序列化 --> 从字符串转换成数据类型的过程叫做反序列化# 序列 -- 字符串 # 什 ...

  8. iview-admin2中vue.config配置文件輸出路徑

    在vue.config.js文件中添加如下信息 module.exports = { baseUrl: '', // 可以配置生产和测试环境下,文件的路径(即index中引用的路径,但不会在dist中 ...

  9. Node.js 的安装

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 的运行环境,简单的说就是运行在服务端的 JavaScript.所以学起来还是比较容易接受的. Node.js 使用事件驱动 ...

  10. Ubuntu 搭建Web服务器(MySQL+PHP+Apache)详细教程

    Ubuntu 搭建Web服务器(MySQL+PHP+Apache)详细教程 看了好多人的博客,有的不全 or 有问题,整理了一下,适合小白 新手先整理几个小问题 1.为啥使用 Linux 搭建服务器? ...