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

最新推荐文章于 2024-07-25 14:02:05 发布

guagua4843

最新推荐文章于 2024-07-25 14:02:05 发布

阅读量237

点赞数

分类专栏：实训；学习文章标签： javascript css3

本文链接：https://blog.csdn.net/guagua4843/article/details/72614857

版权

实训；学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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

guagua4843

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（个人）AR电子书系统创新实训第二周（2）

学习了一部分CSS3之后感觉打开了新世界的大门，尤其是CSS3的动画。之前看过很多惊艳的动效，原来用CSS3就可以做到。在AE里也有表达式控制动画，后面我也会一点点学。简单写一点这周学的JS和CSS3，感觉JS有那么一点不好理解。
复制链接

扫一扫

专栏目录