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

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. 优化SQLServer

    由于SQLServer,数据文件mdf过大,造成系统异常卡 一. 更改隔离级别 ALTER DATABASE [B2EC] SET SINGLE_USER WITH ROLLBACK IMMEDIAT ...

  2. mybatis必知必会一

    入门: 1.每个基于 MyBatis 的应用都是以一个 SqlSessionFactory 的实例为中心的.SqlSessionFactory 的实例可以通过 SqlSessionFactoryBui ...

  3. K：找寻数组中第n大的数组元素的三个算法

    相关介绍:  给定一个数组,找出该数组中第n大的元素的值.其中,1<=n<=length.例如,给定一个数组A={2,3,6,5,7,9,8,1,4},当n=1时,返回9.解决该问题的算法 ...

  4. 基于jQuery日历插件制作日历

    这篇文章主要介绍了基于jQuery日历插件制作日历的相关资料,需要的朋友可以参考下 来看下最终效果图吧: 是长得丑了一点,不要吐槽我-.- 首先来说说这个日历主要的制作逻辑吧: ·一个月份最多有31天 ...

  5. css中:not()选择器和jQuery中.not()方法

    因为老是将这两个的not方法弄混,所以写一下备忘. css中:not()选择器用法 :not 伪类选择器可以筛选不符合表达式的元素,:not(selector) 其中的selector为css选择器 ...

  6. drupal读取mysql的longblob字段

    unserialize($event->variables)

  7. 搭建VueMint-ui框架

    搭建VueMint-ui框架 2018年01月07日 22:29:58 阅读数:2660 vueweb vue project 检查项目环境 一.检查是否安装node.js # 检查node版本 $ ...

  8. 从golang-gin-realworld-example-app项目学写httpapi (五)

    https://github.com/gothinkster/golang-gin-realworld-example-app/blob/master/users/middlewares.go 中间件 ...

  9. java笔记--匿名内部类和静态内部类的理解和使用

    匿名内部类 --如果朋友您想转载本文章请注明转载地址"http://www.cnblogs.com/XHJT/p/3889467.html  "谢谢-- 1.由于局部内部类并不可见 ...

  10. django定义Model中的方法和属性

    #定义一个Model class UserProfile(models.Model): user=models.OneToOneField(User,unique=True) phone=models ...