您的位置：首页 > 其它

（个人）AR电子书系统创新实训第二周（2）

2017-05-21 21:40 344 查看

学习了一部分CSS3之后感觉打开了新世界的大门，尤其是CSS3的动画。之前看过很多惊艳的动效，原来用CSS3就可以做到。在AE里也有表达式控制动画，后面我也会一点点学。简单写一点这周学的JS和CSS3，感觉JS有那么一点不好理解。HTML 中的脚本必须位于与 /script> 标签之间。脚本可被放置在 HTML 页面的和部分中。

会告诉 JavaScript 在何处开始和结束。

之间的代码行包含了 JavaScript

浏览器会解释并执行位于之间的 JavaScript

1. JavaScript 语句

JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。

2.JavaScript 变量

与代数一样，JavaScript 变量可用于存放值（比如 x=2）和表达式（比如 z=x+y）。

变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。

变量必须以字母开头

变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）

变量名称对大小写敏感（y 和 Y 是不同的变量）

声明变量的方法与其他语言基本一样

3.JavaScript If…Else 语句

<!DOCTYPE html>
<html>
<body>

<p>点击这个按钮，获得基于时间的问候。</p>

<button onclick="myFunction()">点击这里</button>

<p id="demo"></p>

<script>
function myFunction()
{
var x="";
var time=new Date().getHours();
if (time<10)
{
x="Good morning";
}
else if (time<20)
{
x="Good day";
}
else
{
x="Good evening";
}
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

4.其他的while、for、switch语句跟其他语言基本一样的

下面是一点整理的使用CSS3做动效和图层样式常用到的属性值。因为在PS里经常用得到，所以对代码实现也比较感兴趣

1.文字阴影效果

text-shadow 属性

<style>
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}

div
{
font-family:myFirstFont;
}
</style>

2.CSS3的过渡效果

Transition值

Transition-timing-function

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:50px;
background:red;
color:white;
font-weight:bold;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

/* Firefox 4: */
#div1 {-moz-transition-timing-function: linear;}
#div2 {-moz-transition-timing-function: ease;}
#div3 {-moz-transition-timing-function: ease-in;}
#div4 {-moz-transition-timing-function: ease-out;}
#div5 {-moz-transition-timing-function: ease-in-out;}

/* Safari and Chrome: */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}

/* Opera: */
#div1 {-o-transition-timing-function: linear;}
#div2 {-o-transition-timing-function: ease;}
#div3 {-o-transition-timing-function: ease-in;}
#div4 {-o-transition-timing-function: ease-out;}
#div5 {-o-transition-timing-function: ease-in-out;}

div:hover
{
width:300px;
}
</style>
</head>
<body>

<div id="div1" style="top:100px">linear</div>
<div id="div2" style="top:150px">ease</div>
<div id="div3" style="top:200px">ease-in</div>
<div id="div4" style="top:250px">ease-out</div>
<div id="div5" style="top:300px">ease-in-out</div>

<p>请把鼠标指针移动到红色的 div 元素上，就可以看到过渡效果。</p>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航