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

来源：互联网发布：淘宝信用贷款编辑：程序博客网时间：2024/06/14 21:04

学习了一部分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>

阅读全文

0 0