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

最新推荐文章于 2021-08-01 16:23:04 发布

King·Forward

最新推荐文章于 2021-08-01 16:23:04 发布

阅读量884

点赞数

分类专栏： HTML5 文章标签： html5 css image border function div

本文链接：https://blog.csdn.net/wjw_java_android/article/details/7929374

版权

HTML5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!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.οnlοad=function(){
		cxt.drawImage(image1,20,40,100,100);
	}
 





</script>
</html>

King·Forward

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5基本用法二(图片，css3样式等等)

div { background-color: red; } @-webkit-keyframes mycolor { 0% { background-color: red; } 40% { backgrou
复制链接

扫一扫