w3cschool官方发布了app更新版本,web前端工程师是

作者: 前端  发布:2019-08-28

css3动画第一式--简单翻滚,css3一式翻滚

在w3cschool上面查阅css3的动画语法手册时,发现“css3 动画”栏目首页放了一个翻滚的div动画案例,觉得挺好看的,于是就自己模仿着写了一下,感觉还行O(∩_∩)O哈哈~

查看原地址

下面放代码:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.box {
    position: relative;
    margin-top: 50px;
    height: 60px;
}
.test {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 50px;
    font:14px/50px Microsoft YaHei;
    text-align: center;
    color: #fff;
    border-radius: 5px;
    background-color: #eb5C7e;
    -webkit-animation-name: gogogo;
    -webkit-animation-duration: 6s;
    -webkit-animation-timing-function:ease;
    -webkit-animation-iteration-count: infinite;
    animation-name: gogogo;
    animation-duration: 6s;
    animation-timing-function:ease;
    animation-iteration-count: infinite;
}
@-webkit-keyframes gogogo
{
    0% { 
        background-color: #eb5C7e;
        -webkit-transform: rotate(0);
    }
    10% {
        background-color: #eb5C7e;
        -webkit-transform: rotate(0);    
    }
    30%{
        background-color: #1b9e55;
        left: 0; 
        -webkit-transform: rotate(30deg);        
    }
    50%{
        left: 400px;
        background-color: #2a7df8;
        -webkit-transform: rotate(0);
    }
    70%{
        left: 400px;
        background-color: #2a7df8;
        -webkit-transform: rotate(0);
    }    
    100%{ 
        left:0;
        background-color: #eb5C7e;
        -webkit-transform: rotate(-360deg);
    }
}
@keyframes gogogo
{
    0% { 
        background-color: #eb5C7e;
        transform: rotate(0);    
    }
    10% {
        background-color: #eb5C7e;
        transform: rotate(0);    
    }
    30%{
        background-color: #1b9e55;
        left: 0; 
        transform: rotate(30deg);        
    }
    50%{
        left: 400px;
        background-color: #2a7df8;
        transform: rotate(0);
    }
    70%{
        left: 400px;
        background-color: #2a7df8;
        transform: rotate(0);
    }    
    100%{ 
        left:0;
        background-color: #eb5C7e;
        transform: rotate(-360deg);
    }
}
</style>
</head>
<body>
    <div class="box">
        <div class="test">
            翻滚吧
        </div>
    </div>
</body>
</html>

然后,你可能看不到效果?少年,该升级浏览器啦~~~

在w3cschool上面查阅css3的动画语法手册时,发现css3 动画栏目首页放了一个翻滚的div动画案例,觉得...

在w3cschool上面查阅css3的动画语法手册时,发现“css3 动画”栏目首页放了一个翻滚的div动画案例,觉得挺好看的,于是就自己模仿着写了一下,感觉还行O(∩_∩)O哈哈~

目前web产品交互越来越复杂,用户使用体验和网站前端性能优化这些都得靠web前端工程师去做,web前端工程师是设计加开发的综合体,web前端工程师是在开发人员中最直接面向产品,面向用户的设计人员,一个开发团队的成果是要靠web前端工程师去展现,因为用户不会去关心后台的处理有多么强大 ;在设计人员中web前端工程师是直接面向开发人员的设计人员,向开发人员以一种计算机语言的方式传递其设计理念,web前端工程师在整个团队中是很关键的。

   近日,为了庆祝w3cschool八周年生日,w3cschool官网推出了八周年庆活动。此次活动时间从8月1日至8月15日,此次活动只剩最后1天!

9159.com 1

所以一名合格的web前端工程师必须得掌握HTML、CSS和JavaScript。只懂其中一个或两个还不行,你必须对这三门语言都很熟悉。也不是说必须对这三门语言都非常精通,但你至少要能够运用它们完成大多数任务,而无需地频繁地寻求别人的帮助。

同时,在活动期间,w3cschool官方另外推出w3cschool app八周年庆版本。

查看原地址

下面介绍下需要的一些基础知识

9159.com 2

下面放代码:

开发环境


编辑器:Phpstorm 或者sublime

浏览器:chrome(F12开启审查模式,可以看到任何一个网页的元素)或者火狐(需要安装插件firebug),当然右键还可以查看任何一个网站的源代码。

推荐阅读

HTML、CSS、JavaScript、PHP、 MySQL 的学习顺序是什么?

  今日,w3cschool官方发布了app更新版本,分别是安卓版v1.2.25和苹果版v1.4.7。
  那么,w3cschool app功能有哪几个方面的升级呢?
  1、签到功能
  只要下载w3cschool app最新版或者将w3cschool app更新就可以签到。小伙伴们将从每日签到获得经验,对于后期证书评估将大有帮助。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.box {
    position: relative;
    margin-top: 50px;
    height: 60px;
}
.test {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 50px;
    font:14px/50px Microsoft YaHei;
    text-align: center;
    color: #fff;
    border-radius: 5px;
    background-color: #eb5C7e;
    -webkit-animation-name: gogogo;
    -webkit-animation-duration: 6s;
    -webkit-animation-timing-function:ease;
    -webkit-animation-iteration-count: infinite;
    animation-name: gogogo;
    animation-duration: 6s;
    animation-timing-function:ease;
    animation-iteration-count: infinite;
}
@-webkit-keyframes gogogo
{
    0% { 
        background-color: #eb5C7e;
        -webkit-transform: rotate(0);
    }
    10% {
        background-color: #eb5C7e;
        -webkit-transform: rotate(0);    
    }
    30%{
        background-color: #1b9e55;
        left: 0; 
        -webkit-transform: rotate(30deg);        
    }
    50%{
        left: 400px;
        background-color: #2a7df8;
        -webkit-transform: rotate(0);
    }
    70%{
        left: 400px;
        background-color: #2a7df8;
        -webkit-transform: rotate(0);
    }    
    100%{ 
        left:0;
        background-color: #eb5C7e;
        -webkit-transform: rotate(-360deg);
    }
}
@keyframes gogogo
{
    0% { 
        background-color: #eb5C7e;
        transform: rotate(0);    
    }
    10% {
        background-color: #eb5C7e;
        transform: rotate(0);    
    }
    30%{
        background-color: #1b9e55;
        left: 0; 
        transform: rotate(30deg);        
    }
    50%{
        left: 400px;
        background-color: #2a7df8;
        transform: rotate(0);
    }
    70%{
        left: 400px;
        background-color: #2a7df8;
        transform: rotate(0);
    }    
    100%{ 
        left:0;
        background-color: #eb5C7e;
        transform: rotate(-360deg);
    }
}
</style>
</head>
<body>
    <div class="box">
        <div class="test">
            翻滚吧
        </div>
    </div>
</body>
</html>

推荐模板网站


http://sc.chinaz.com/moban/

食用方式:先过一遍下面教程里的全部内容,然后找个好看的模板,学习index.html里的语句具体是怎么用的。一般模板都会涉及到jqeury和bootstrap,有些地方看不懂的话也没关系。

注意:提高基本功还是要靠做下面的作业,套模板只是一种实践和快速生产的方式。

9159.com 3

然后,你可能看不到效果?少年,该升级浏览器啦~~~

作业


简易:做出登陆界面

登陆样例

较难:做出类似百度搜索界面的纯前端页面

搜索界面样例

  2、教程库扩增至1000本教程手册
  w3cschool app教程手册特色在于拥有非常强的系统性,譬如阅读PHP教程,你只要刷完一本手册,就可以全面认识PHP技术,而不需从通过纷杂的许多手册里了解这门技术。
  3、离线阅读功能
  w3cschool app离线功能可以让你随时随地查询各种技术手册,即使信号不好,依然不影响阅读体验。

Html


划掉的可以先不用看 其他都扫过一遍 之后就可以一边查一边写

http://www.w3cschool.cn/html/

W3Cschool Html

推荐收藏

html 速查词典 http://www.w3cschool.cn/html/dict

9159.com 4

Css


http://www.w3cschool.cn/css/

css都稍微看下

不需要看太仔细

推荐收藏

css 速查词典|css API中文手册|css参考文档  http://www.w3cschool.cn/css/dict

CSS动画实例参考手册 http://www.w3cschool.cn/moresource/cssreference/index.html

9159.com ,  4、开发者头条
  在w3cschool app首页,每天每个小时都会批量推送开发者头条资讯,每日更新内容包含科技头条新闻、开发者资讯、技术分享、开源项目、程序员职业生涯发展等。

Bootstrap


http://www.w3cschool.cn/bootstrap/

bootstrap看完css后可以看了,试试看各个控件怎么用

推荐收藏

常用的Bootstrap资源网站  http://123.w3cschool.cn/bootstrap_resources

9159.com 5

JS


http://www.w3cschool.cn/javascript/

js也是都要看的 这个语言很强大

推荐收藏

Javascript开发资源 http://123.w3cschool.cn/javascript_resource

  5、书签功能
  最近学习教程的功能特色在于:它具有学习进度保存效果,程序员可以从上次阅读的地方继续开始,能够显示最近一个月的编程书籍,保证学习的连贯性。
  6、搜索功能
  在搜索功能方面,可以快速精准地查询整个平台上面的手册和教程。
  对于w3cschool app 5大功能,如果你都用过,那一定就是w3school的真爱粉!
  最后,你使用最多的是哪一个,更喜欢哪一个功能呢?

jquery


http://www.w3cschool.cn/jquery/

内容不多 但是这是前端的核心

推荐收藏

免费Jquery插件合集 http://123.w3cschool.cn/freejquery

前端学习资源汇总


http://123.w3cschool.cn/plk2fi

前端教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-资源汇总,方便大家学习查阅参考。

本文由9159.com发布于前端,转载请注明出处:w3cschool官方发布了app更新版本,web前端工程师是

关键词: 9159.com