您的位置：首页 > Web前端 > HTML5

HTML5基本用法二(图片，css3样式等等)

2012-08-31 15:04 387 查看 
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /></head>
<style>
div {
background-color: red;
}
@-webkit-keyframes mycolor {
0% {
background-color: red;
}
40% {
background-color: darkblue;
}
70% {
background-color: yellow;
}
100% {
background-color: red;
}
}
div:hover {
-webkit-animation-name: mycolor;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
}

</style>
<style type="text/css">
P:nth-child(odd){color:red}
</style>

<body>
<video src="bgsound .mp3" controls="controls"></video>
<br>
<div>首先本身也是个效果啊，下面的是红蓝色相间的段落</div>
<!--我要求p1,p2.p3,p4间隔显示红色和蓝色字体 ,传统做法是定两个选择器-->
<p >p1</p>
<p >p2</p>
<p >p3</p>
<p >p4</p>
<canvas id="can" width="300px" height="200px" style="border:1px solid"></canvas>
</body>
<script type="text/javascript">
var canvas=document.getElementById("can");
var cxt=canvas.getContext("2d");
//要加载图片的话
//1，创建image对象
var image1=new Image();
//2.指定图片路径
image1.src="王建伟戴眼镜.JPG";
//3，加载完毕后，再绘制图片
image1.onload=function(){
cxt.drawImage(image1,20,40,100,100);
}

</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html5 css image border function div
相关文章推荐
新的分享
章节导航