精华内容
下载资源
问答
  • css3 html5
    千次阅读
    2020-08-07 18:58:54

    HTML5+CSS3来实现轮播图
    利用CSS3的新属性Animation,主要是利用CSS3的动画的特性,不需要任何JS技术即可实现轮播图:

    下面就是我实现轮播图的步骤
    (1)、先用@keyframes创建一个动画

    @keyframes identifier {
            from{
                  /*初始状态*/
            }to{
                 /*结束状态*/
            }
        }
    

    (2)、通过animation 来配置动画效果

    animation-name: move;            //需要执行那个动画名move
    animation-duration: 30s;             //动画执行的时间为30s
    animation-iteration-count: infinite;  //动画迭代次数为无限循环 infinite
    animation-timing-function: steps(5);   //动画分5步完成(5张图片)
    

    HTML代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div#outer{
                width: 400px;
                height: 200px;
                border: 1px solid red;
                margin:0 auto;
                overflow: hidden;
            }
            div.move{
                width: 2000px;
                height: 200px;
                background-color: red;
                
                animation-name: move;
                animation-duration: 10s;
                animation-timing-function: steps(5);
                animation-iteration-count: infinite;
            }
            div.move div{
                width: 400px;
                height: 200px;
                float: left;
                color: #fff;
                font-size: 30px;
            }
    
            @keyframes move{
                from{
                    margin-left: 0px;
                }
                to{
                    margin-left: -2000px;
                }
            }
        </style>
    </head>
    <body>
        <div id="outer">
            <div class="move">
                <div style="background-color: red;">div1</div>
                <div style="background-color: blue;">div2</div>
                <div style="background-color: green;">div3</div>
                <div style="background-color: pink;">div4</div>
                <div style="background-color: purple;">div5</div>
            </div>
        </div>
    </body>
    </html>
    
    更多相关内容
  • HTML5+CSS3 精美登陆界面源码

    千次下载 热门讨论 2016-01-19 09:52:44
    3个很精美的登陆界面,全都是用HTML5+CSS3开发的,所以可能不适合低版本IE浏览器。大家可以下来看看,做的超级漂亮的。
  • 疯狂html5+css3+javascript完整版

    热门讨论 2013-12-10 17:26:36
    (1) 本书很多HTML 5CSS 3代码必须在高版本的浏览器中才能看到效果。建议读者安装Opera 11.60、Firefox 10.0、Chrome 17.0以上版本的浏览器。 (2) 本书少量程序需要使用Java编译、运行,建议安装jdk-7u3-...
  • 基于html5+css3实现的精美聊天界面demo

    千次下载 热门讨论 2015-07-27 14:53:31
    基于HTML5+css3实现的两人即时通讯聊天界面,界面风格相当漂亮,可直接使用,也可简单修改为自己想要的样式,仅供大家参考。
  • HTML5CSS3的新特性(浓缩好记版)

    万次阅读 多人点赞 2018-08-22 16:22:33
    1.html5的新特性?(记住有九大模块内容) 添加了video,radio标签 添加了canvas画布和svg,渲染矢量图片 添加了一些列语义化标签header,footer,main,section,aside,nav等 input的type值新添加了很多...

    综述:这个问题在面试的时候经常被问到,有必要做一个总结,理解的深刻充分一些

    1.html5的新特性?(记住有九大模块内容)

    • 添加了video,radio标签

    • 添加了canvas画布和svg,渲染矢量图片

    • 添加了一些列语义化标签header,footer,main,section,aside,nav等

    • input的type值新添加了很多属性(email,url,number,range,Date pickers (date, month, week, time, datetime, datetime-local),search,color)

    • 添加了地理位置定位功能 Geolocation API

    • 添加了web存储功能,localStorage和sessionStorage

    • 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本

    • web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。

    • 服务端事件推送(EventSource 对象用于接收服务器发送事件通知),所有主流浏览器均支持服务器发送事件,除了 Internet Explorer

    if(typeof(EventSource)!=="undefined"){
      var source=new EventSource("/example/html5/demo_sse.php");
      source.onmessage=function(event){
             console.log(event.data);
        };
      }else{
          console.log("抱歉,您的浏览器不支持 server-sent 事件 ...");
      }

    2.CSS3中新添加的特性?(css3也有九大属性,要多去实践应用)

    • 媒体查询(可以查询设备的物理像素然后进行自适应操作)

    • transform,transition,translate,scale,skelw,rotate等相关动画效果

    • box-shadow,text-shadow等特效

    • CSS3 @font-face 规则,设计师可以引入任意的字体了

    • CSS3 @keyframes 规则,可以自己创建一些动画等

    • 2D、3D转换

    • 添加了border-radius,border-image等属性

    • CSS3 创建多列(column-count规定文本可以以几列的方式布局)

    • CSS3 用户界面(resize,box-sizing,outline-offset)

    div{
        resize:both; /*规定元素的尺寸可以由用户进行手动的调整*/
        overflow:auto;
    }
    div{
        box-sizing:border-box;
        -moz-box-sizing:border-box;	     /* Firefox */
        -webkit-box-sizing:border-box;	/* Safari */
        width:50%;
        float:left;
    }
    div{
        margin:20px;
        width:150px; 
        padding:10px;
        height:70px;
        border:2px solid black;
        outline:2px solid red;  /*在元素的外围添加一层轮廓,轮廓是不占位置的*/
        outline-offset:12px;    /*轮廓距离border的距离*/
    }

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    展开全文
  • HTML5+CSS3实例源码(包含20个),制作都很精细,界面漂亮,望对你有帮助
  • CSS3+HTML5+从入门到精通

    热门讨论 2014-07-03 12:44:13
    CSS3+HTML5+从入门到精通 CSS3+HTML5+从入门到精通》-中文学习教程
  • CSS3 +HTML5入门到精通

    千次下载 热门讨论 2014-07-01 16:58:08
    HTML+5+从入门到精通》-中文学习教程
  • 代码为博客实例代码 http://blog.csdn.net/lmj623565791/article/details/32964301 有问题博客中留言
  • HTML5+CSS3实现的立方体翻转3D全屏焦点图特效源码

    千次下载 热门讨论 2014-09-25 14:22:58
    这是一款非常大气华丽的HTML5/CSS3 3D实现的全屏3D焦点图特效插件,在页面的两侧,有两个带有立体浮动效果的左右箭头进行图片的切换。其焦点图的图片切换方式是3D效果的,类似立方体翻转一样,焦点图默认显示文字,...
  • HTML5 3D/CSS3 3D爱心动画项目实例源码

    千次下载 热门讨论 2014-08-20 11:30:37
    大家可以点解DEMO来看看。CSS3代码,对这些线条进行渲染,以便其有3D的视觉效果。很多div,主要是构造爱心的线条区域。
  • 3D纸片折叠动画是一款纸片折叠动画特效,利用HTML5CSS3的相关特性,我们可以将一张张纸片折叠起来,形成很酷的3D动画效果。经测试效果相当不错。
  • HTML5+CSS3响应式垂直时间轴,没有用js。挺好看的,分享给大家
  • 本套Web前端基础全家桶教程是全新录制,将前端学习的基础内容融汇为148节课,涵盖了HTMLCSSHTML5CSS3的核心技术点。通过对本教程的学习,可以帮助初学者快速上手,并完成大部分静态网页的开发。 教程的具体...
  • HTML5 CSS3 : 进度条的实现实例源码

    万次下载 热门讨论 2014-07-12 09:59:46
    代码为博客实例代码:http://blog.csdn.net/lmj623565791/article/details/34825865 有问题,博客中留言
  • HTML5+CSS3多彩进度条是一款CSS3进度条,可以用在投票结果分析,效果也非常不错。
  • HTML5 CSS3 :canvas 模拟实现电子彩票刮刮乐实例代码

    万次下载 热门讨论 2014-07-12 10:34:12
    代码为博客实例代码http://blog.csdn.net/lmj623565791/article/details/34089553 有问题博客中留言
  • HTML5CSS3零基础入门

    千人学习 2021-07-01 13:36:54
    课程详细全面介绍了HTML5CSS3,内容包括:常用标签,表单元素,表格,css样式,浮动,定位等知识点,课程以案例为导向,全程没有废话,本着极简的理念节约你的每一分钟,让你在最短的时间内系统掌握HTML5CSS3
  • 20个HTML5&CSS3超酷应用

    千次下载 热门讨论 2014-02-24 20:00:26
    20个HTML5&CSS3超酷应用
  • css3-mediaqueries.js+html5.js

    热门讨论 2014-07-04 16:56:02
    响应式页面 引用的两个js 兼容ie8 ie7的html5标签与media属性 css3-mediaqueries.js html5.js
  • HTML5+CSS3 chm版中文参考手册

    热门讨论 2015-07-13 10:39:59
    HTML5+CSS3 chm版中文参考手册, 都是最新帮助手册
  • html5+css3+JS代码

    千次下载 热门讨论 2012-05-22 13:55:26
    《精通html5+css3+JavaScript页面设计》代码
  • HTML5 CSS3 : 3D立方体旋转动画实例源码

    万次下载 热门讨论 2014-07-12 09:58:23
    代码为博客实例代码:http://blog.csdn.net/lmj623565791/article/details/34120047 有问题博客中留言
  • HTML5CSS3基础教程(第8版)高清pdf

    热门讨论 2015-02-04 15:16:42
    本书是最新中文《HTML5CSS3基础教程》第8版的高清pdf文档,下载后可使用任何pdf阅读器阅读使用。
  • HTML+CSS3 5个炫酷的loading

    万次阅读 2021-07-22 17:06:25
    为了粘贴,每个loading对应一个html文件,效果如图: 代码如下 loading1 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta ...

    为了方便大家方便CV,每个loading对应一个html文件。

    文件下载压缩包,下载地址:

    https://download.csdn.net/download/m0_48850204/20432352?spm=1001.2014.3001.5501

    效果如图:

        

     代码如下

    loading1

    <!DOCTYPE html>
    <html lang="zh">
    
    <head>
    	<meta charset="UTF-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>阿玉写loading loading1</title>
    	<style type="text/css">
    		*,
    		*:after,
    		*:before {
    			-webkit-box-sizing: border-box;
    			-moz-box-sizing: border-box;
    			box-sizing: border-box;
    		}
    
    		html,
    		body {
    			height: 100%;
    			background-color: #494a5f;
    
    		}
    
    
    
    		.nav {
    			width: 100%;
    			padding-bottom: 1.2em;
    			position: absolute;
    			z-index: 99;
    			color: white;
    			display: flex;
    			justify-content: center;
    		}
    
    		.nav a {
    			color: #fff;
    			text-decoration: none;
    		}
    		.nav a {
    			display: inline-block;
    			margin: 0.5em;
    			padding: 0.6em 1em;
    			border: 3px solid #fff;
    			font-weight: 700;
    		}
    
    		.nav a:hover {
    			opacity: 0.6;
    			cursor: pointer;
    		}
    
    		.nav a.current {
    			background: #1d7db1;
    			color: #fff;
    		}
    
    	
    
    		.htmleaf-container {
    			height: 100%;
    			position: relative;
    			min-height: 200px;
    		}
    
    		.loader {
    			position: absolute;
    			left: 50%;
    			top: 50%;
    			transform: translate(-50%, -50%);
    			width: 56px;
    			height: 50px;
    			perspective: 100px;
    			perspective-origin: 50% 100%;
    			transform-style: preserve-3d;
    			transform: translateZ(-1px);
    
    		}
    
    		.loader .loader-inner {
    			width: 50%;
    			height: 100%;
    			background: #fff;
    			border: 3px solid #b93be6;
    			position: absolute;
    			right: 0;
    			transform-origin: 0% 100%;
    		}
    
    		.loader .loader-inner:first-child {
    			left: 0;
    		}
    
    		.loader .loader-inner hr {
    			margin: 3px 3px 6px;
    			border: 1px solid #b93be6;
    		}
    
    		.loader .loader-inner.box {
    			-webkit-animation: loading-1 3.6s infinite ease-in-out;
    			animation: loading-1 3.6s infinite ease-in-out;
    		}
    
    		.loader .loader-inner.box-1 {
    			animation-delay: .2s;
    		}
    
    		.loader .loader-inner.box-2 {
    			animation-delay: .4s;
    		}
    
    		.loader .loader-inner.box-3 {
    			animation-delay: 0.6s;
    		}
    
    		.loader .loader-inner.box-4 {
    			animation-delay: 0.8s;
    		}
    
    		.loader .loader-inner.box-5 {
    			animation-delay: 1.8s;
    		}
    
    		.loader .loader-inner.box-6 {
    			animation-delay: 2.2s;
    		}
    
    		@-webkit-keyframes loading-1 {
    
    			25%,
    			100% {
    				transform: translateX(3px) rotateY(-180deg);
    			}
    		}
    
    		@keyframes loading-1 {
    
    			25%,
    			100% {
    				transform: translateX(3px) rotateY(-180deg);
    			}
    		}
    	</style>
    </head>
    
    <body>
    	<div class="nav">
    		<a href="./loading1.html" class="current">loading1</a>
    		<a href="./loading2.html">loading2</a>
    		<a href="./loading3.html" >loading3</a>
    		<a href="./loading4.html" >loading4</a>
    		<a href="./loading5.html" >loading5</a>
    	</div>
    	<div class="htmleaf-container">
    		<div class="loader">
    			<div class="loader-inner">
    				<hr>
    				<hr>
    				<hr>
    				<hr>
    				<hr>
    			</div>
    			<div class="loader-inner box box-1">
    				<hr>
    				<hr>
    				<hr>
    				<hr>
    				<hr>
    			</div>
    			<div class="loader-inner box box-2">
    				<hr>
    				<hr>
    				<hr>
    				<hr>
    				<hr>
    			</div>
    			<div class="loader-inner box box-3">
    				<hr>
    				<hr>
    				<hr>
    				<hr>
    				<hr>
    			</div>
    			<div class="loader-inner box box-4">
    				<hr>
    				<hr>
    				<hr>
    				<hr>
    				<hr>
    			</div>
    			<div class="loader-inner box box-5">
    				<hr>
    				<hr>
    				<hr>
    				<hr>
    				<hr>
    			</div>
    			<div class="loader-inner box box-6">
    				<hr>
    				<hr>
    				<hr>
    				<hr>
    				<hr>
    			</div>
    			<div class="loader-inner">
    				<hr>
    				<hr>
    				<hr>
    				<hr>
    				<hr>
    			</div>
    		</div>
    	</div>
    </body>
    
    </html>

     loading2

    <!DOCTYPE html>
    <html lang="zh">
    
    <head>
    	<meta charset="UTF-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>阿玉写loading loading2</title>
    	<style type="text/css">
    		*,
    		*:after,
    		*:before {
    			-webkit-box-sizing: border-box;
    			-moz-box-sizing: border-box;
    			box-sizing: border-box;
    		}
    		html,
    		body {
    			height: 100%;
    			background-color: #3c2f49;
    		}
    		.nav {
    			width: 100%;
    			padding-bottom: 1.2em;
    			position: absolute;
    			z-index: 99;
    			color: white;
    			display: flex;
    			justify-content: center;
    		}
    
    		.nav a {
    			color: #fff;
    			text-decoration: none;
    		}
    		.nav a {
    			display: inline-block;
    			margin: 0.5em;
    			padding: 0.6em 1em;
    			border: 3px solid #fff;
    			font-weight: 700;
    		}
    
    		.nav a:hover {
    			opacity: 0.6;
    			cursor: pointer;
    		}
    
    		.nav a.current {
    			background: #1d7db1;
    			color: #fff;
    		}
    		.htmleaf-container {
    			height: 100%;
    			position: relative;
    			min-height: 200px;
    			display: flex;
    			justify-content: center;
    			align-items: center;
    		}
    
    		.loader {
    			width: 64px;
    			height: 64px;
    			line-height: 64px;
    			border-radius: 50%;
    			border-top: 5px solid #eb6c18;
    			color: #fff;
    			text-align: center;
    			-webkit-animation: 2s loading1 ease-in-out infinite;
    			animation: 2s loading1 ease-in-out infinite;
    		}
    
    		.loader:before,
    		.loader:after {
    			content: "";
    			display: block;
    			width: 64px;
    			height: 64px;
    			border-radius: 50%;
    			position: absolute;
    			top: -5px;
    			left: 0;
    		}
    
    		.loader:before {
    			border-top: 5px solid #c3c659;
    			-webkit-transform: rotate(120deg);
    			transform: rotate(120deg)
    		}
    
    		.loader:after {
    			border-top: 5px solid #b93be6;
    			-webkit-transform: rotate(240deg);
    			transform: rotate(240deg)
    		}
    
    		.loader .loader-inner {
    			font-size: 12px;
    			color: #b93be6;
    			display: block;
    			width: 64px;
    			height: 64px;
    			position: absolute;
    			top: -5px;
    			left: 0;
    			-webkit-animation: 2s loading2 linear infinite;
    			animation: 2s loading2 linear infinite;
    		}
    
    		@-webkit-keyframes loading1 {
    			50% {
    				-webkit-transform: rotate(180deg)
    			}
    
    			100% {
    				-webkit-transform: rotate(360deg)
    			}
    		}
    
    		@keyframes loading1 {
    			50% {
    				-webkit-transform: rotate(180deg);
    				transform: rotate(180deg)
    			}
    
    			100% {
    				-webkit-transform: rotate(360deg);
    				transform: rotate(360deg)
    			}
    		}
    
    		@-webkit-keyframes loading2 {
    			50% {
    				-webkit-transform: rotate(-180deg)
    			}
    
    			100% {
    				-webkit-transform: rotate(-360deg)
    			}
    		}
    
    		@keyframes loading2 {
    			50% {
    				-webkit-transform: rotate(-180deg);
    				transform: rotate(-180deg)
    			}
    
    			100% {
    				-webkit-transform: rotate(-360deg);
    				transform: rotate(-360deg)
    			}
    		}
    	</style>
    </head>
    <body>
    	<div class="nav">
    		<a href="./loading1.html" >loading1</a>
    		<a href="./loading2.html" class="current">loading2</a>
    		<a href="./loading3.html" >loading3</a>
    		<a href="./loading4.html" >loading4</a>
    		<a href="./loading5.html" >loading5</a>
    	</div>
    	<div class="htmleaf-container">
    		<div class="loader">
    			<span class="loader-inner">加载中...</span>
    		</div>
    	</div>
    </body>
    
    </html>

     loading3

    <!DOCTYPE html>
    <html lang="zh">
    
    <head>
        <meta charset="UTF-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>阿玉写loading loading3</title>
    
    	<style type="text/css">
    		*,
    		*:after,
    		*:before {
    			-webkit-box-sizing: border-box;
    			-moz-box-sizing: border-box;
    			box-sizing: border-box;
    		}
    		html,
    		body {
    			height: 100%;
    			padding: 0;
    			margin: 0;
    		}
    	
    		.htmleaf-container {
    			font-size: 12px;
    			height: 100%;
    			position: relative;
    			min-height: 200px;
    		}
    		.htmleaf-container .nav {
    			width: 100%;
    			padding-bottom: 1.2em;
    			position: absolute;
    			z-index: 99;
    			color: white;
    			display: flex;
    			justify-content: center;
    		}
    		
    		.nav {
    			width: 100%;
    			padding-bottom: 1.2em;
    			position: absolute;
    			z-index: 99;
    			color: white;
    			display: flex;
    			justify-content: center;
    			background-color: black;
    		}
    		.nav a {
    			color: #fff;
    			text-decoration: none;
    			
    		}
    		.nav a {
    			display: inline-block;
    			margin: 0.5em;
    			padding: 0.6em 1em;
    			border: 3px solid #fff;
    			font-weight: 700;
    		}
    
    		.nav a:hover {
    			opacity: 0.6;
    			cursor: pointer;
    		}
    
    		.nav a.current {
    			background: #1d7db1;
    			color: #fff;
    		}
    		.loader {
    			position: absolute;
    			left: 50%;
    			top: 50%;
    			transform: translate(-50%, -50%);
    			width: 60px;
    		}
    
    		.loader .my-loading {
    			position: relative;
    			width: 100%;
    			height: 10px;
    			border: 1px solid #30B08F;
    			border-radius: 10px;
    			animation: turn 2s linear 0.85s infinite;
    		}
    
    		.loader .my-loading:before {
    			content: "";
    			display: block;
    			position: absolute;
    			width: 0%;
    			height: 100%;
    			background: #30B08F;
    			box-shadow: 10px 0px 15px 0px #30B08F;
    			animation: load 1s linear infinite;
    		}
    
    		.loader .my-loading-text {
    			width: 100%;
    			position: absolute;
    			top: 10px;
    			color: #30B08F;
    			text-align: center;
    			animation: bounce 1s linear infinite;
    		}
    
    		@keyframes load {
    			0% {
    				width: 0%;
    			}
    
    			87.5%,
    			100% {
    				width: 100%;
    			}
    		}
    
    		@keyframes turn {
    			0% {
    				transform: rotateY(0deg);
    			}
    
    			6.25%,
    			50% {
    				transform: rotateY(180deg);
    			}
    
    			56.25%,
    			100% {
    				transform: rotateY(360deg);
    			}
    		}
    
    		@keyframes bounce {
    
    			0%,
    			100% {
    				top: 10px;
    			}
    
    			12.5% {
    				top: 30px;
    			}
    		}
    	</style>
    </head>
    
    <body>
    	<div class="nav">
    		<a href="./loading1.html" >loading1</a>
    		<a href="./loading2.html" >loading2</a>
    		<a href="./loading3.html" class="current">loading3</a>
    		<a href="./loading4.html" >loading4</a>
    		<a href="./loading5.html" >loading5</a>
    	</div>
    	<div class="htmleaf-container">
    	
    		<div class="loader">
    			<div class="my-loading"></div>
    			<div class="my-loading-text">加载中...</div>
    		</div>
    	</div>
    </body>
    
    </html>

     loading4

    ​
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>阿玉写loading loading4</title>
        <style>
            *{
                margin: 0;
                padding-left: 0;
            }
            body{
                display: flex;
                justify-content: center;
                align-items: center;
                min-height: 100vh;
                background-color: #fff;
            }
            .container{
                position: relative;
                /* -webkit-box-reflect:below 1px liner-gradient(transparent,#0001); */
    
            }
            .nav {
    			width: 100%;
    			padding-bottom: 1.2em;
    			position: absolute;
    			z-index: 99;
                top: 0;
    			color: white;
    			display: flex;
    			justify-content: center;
                background-color: #494a5f;
    		}
    
            .nav a {
    			color: #fff;
    			text-decoration: none;
    		}
    		.nav a {
    			display: inline-block;
    			margin: 0.5em;
    			padding: 0.6em 1em;
    			border: 3px solid #fff;
    			font-weight: 700;
    		}
    
    		.nav a:hover {
    			opacity: 0.6;
    			cursor: pointer;
    		}
    
    		.nav a.current {
    			background: #1d7db1;
    			color: #fff;
    		}
            .container .loader{
                position: relative;
                width: 50px;
                height: 50px;
                border-radius: 50%;
                border:5px solid transparent;
                border-bottom-color:#468cf1;
                border-right-color: #e64e7c;
                transform: rotate(45deg);
                animation:animate 2s ease-in-out infinite;
            }
            @keyframes animate {
                0%{
                    transform:rotate(0deg);
                    border-right-color: #e64e7c;
                    border-bottom-color:#468cf1;
                }
                50%{
                    transform: rotate(90deg);
                    border-right-color: #468cf1;
                    border-bottom-color:#e64e7c;
                }
                100%{
                    transform: rotate(0deg);
                    border-bottom-color:#468cf1;; 
                    border-right-color: #e64e7c;
                }
            }
        
            .container .loader .ball{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border-radius: 50%;
                animation: animateBall 2s ease-in-out infinite;
            }
            @keyframes animateBall {
                0%{
                    transform:rotate(0deg);
    
                }
                50%{
                    transform: rotate(180deg);
                }
                100%{
                    transform: rotate(0deg);
                }
            }
            .container .loader .ball::before{
                content: '';
                position: absolute;
                bottom: 50%;
                right: 2px;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                transform: translateY(-50%);
                animation:animateBallBgColor 1s ease-in-out infinite;
            }
            @keyframes animateBallBgColor {
                0%{
                    background-color:#e64e7c; 
                }
                50%{
                    background-color:#468cf1;
                }
                100%{
                    background-color:#e64e7c; 
                }
            }
        </style>
    </head>
    <body>
                <div class="nav">
    			<a href="./loading1.html" >loading1</a>
    			<a href="./loading2.html" >loading2</a>
    			<a href="./loading3.html" >loading3</a>
    			<a href="./loading4.html" class="current">loading4</a>
                <a href="./loading5.html" >loading5</a>
    		</div>
        <div class="container">
    
            <div class="loader">
                <div class="ball">
    
                </div>
            </div>
        </div>
    </body>
    </html>
    
    ​

    loading5

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    	<meta charset="UTF-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>阿玉写loading loading5</title>
        <style>
            body{
                background-color:#142535 ;
            }
            .nav {
    			width: 100%;
    			padding-bottom: 1.2em;
    			position: absolute;
    			z-index: 99;
                top: 0;
    			color: white;
    			display: flex;
    			justify-content: center;
    		}
    
            .nav a {
    			color: #fff;
    			text-decoration: none;
    		}
    		.nav a {
    			display: inline-block;
    			margin: 0.5em;
    			padding: 0.6em 1em;
    			border: 3px solid #fff;
    			font-weight: 700;
    		}
    
    		.nav a:hover {
    			opacity: 0.6;
    			cursor: pointer;
    		}
    
    		.nav a.current {
    			background: #1d7db1;
    			color: #fff;
    		}
            .loader-box{
                height: 100%;
                width: 100%;
                position: absolute;
                top: 0;
                background-color: rgba(0,0,0,0.5);
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .loader-block{
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-items: center;
            }
            .loader {
                font-size: 8px;
                width: 1em;
                height: 1em;
                border-radius: 50%;
                animation: load-effect 1s infinite linear;
                color: aqua;
            }
            .loading-text{
                color: aqua;
                font-size: 12px;
                padding: 10px;
                height: 24px;
                margin-top: 20px;
            }
            @keyframes load-effect {
                0% {
                    box-shadow:
                        0 -3em 0 .2em aqua,
                        /*上*/
    
                        2em -2em 0 0 aqua,
                        /*右上*/
    
                        3em 0 0 -.5em aqua,
                        /*右*/
    
                        2em 2em 0 -.5em aqua,
                        /*右下*/
    
                        0 3em 0 -.5em aqua,
                        /*下*/
    
                        -2em 2em 0 -.5em aqua,
                        /*左下*/
    
                        -3em 0 0 -.5em aqua,
                        /*左*/
    
                        -2em -2em 0 0 aqua;
                    /*左上*/
                }
    
                12.5% {
                    box-shadow:
                        0 -3em 0 0 aqua,
    
                        2em -2em 0 .2em aqua,
    
                        3em 0 0 0 aqua,
    
                        2em 2em 0 -.5em aqua,
    
                        0 3em 0 -.5em aqua,
    
                        -2em 2em 0 -.5em aqua,
    
                        -3em 0 0 -.5em aqua,
    
                        -2em -2em 0 -.5em aqua;
                }
    
                25% {
                    box-shadow:
    
                        0 -3em 0 -.5em aqua,
    
                        2em -2em 0 0 aqua,
    
                        3em 0 0 .2em aqua,
    
                        2em 2em 0 0 aqua,
    
                        0 3em 0 -.5em aqua,
    
                        -2em 2em 0 -.5em aqua,
    
                        -3em 0 0 -.5em aqua,
    
                        -2em -2em 0 -.5em aqua;
                }
    
                37.5% {
                    box-shadow:
    
                        0 -3em 0 -.5em aqua,
    
                        2em -2em 0 -.5em aqua,
    
                        3em 0 0 0 aqua,
    
                        2em 2em 0 .2em aqua,
    
                        0 3em 0 0 aqua,
    
                        -2em 2em 0 -.5em aqua,
    
                        -3em 0 0 -.5em aqua,
    
                        -2em -2em 0 -.5em aqua;
                }
    
                50% {
                    box-shadow:
    
                        0 -3em 0 -.5em aqua,
    
                        2em -2em 0 -.5em aqua,
    
                        3em 0 0 -.5em aqua,
    
                        2em 2em 0 0 aqua,
    
                        0 3em 0 .2em aqua,
    
                        -2em 2em 0 0 aqua,
    
                        -3em 0 0 -.5em aqua,
    
                        -2em -2em 0 -.5em aqua;
                }
    
                62.5% {
                    box-shadow:
    
                        0 -3em 0 -.5em aqua,
    
                        2em -2em 0 -.5em aqua,
    
                        3em 0 0 -.5em aqua,
    
                        2em 2em 0 -.5em aqua,
    
                        0 3em 0 0 aqua,
    
                        -2em 2em 0 .2em aqua,
    
                        -3em 0 0 0 aqua,
    
                        -2em -2em 0 -.5em aqua;
                }
    
                75% {
                    box-shadow:
                        0 -3em 0 -.5em aqua,
    
                        2em -2em 0 -.5em aqua,
    
                        3em 0 0 -.5em aqua,
    
                        2em 2em 0 -.5em aqua,
    
                        0 3em 0 -.5em aqua,
    
                        -2em 2em 0 0 aqua,
    
                        -3em 0 0 .2em aqua,
    
                        -2em -2em 0 0 aqua;
                }
    
                87.5% {
                    box-shadow:
    
                        0 -3em 0 0 aqua,
    
                        2em -2em 0 -.5em aqua,
    
                        3em 0 0 -.5em aqua,
    
                        2em 2em 0 -.5em aqua,
    
                        0 3em 0 -.5em aqua,
    
                        -2em 2em 0 0 aqua,
    
                        -3em 0 0 0 aqua,
    
                        -2em -2em 0 .2em aqua;
                }
    
                100% {
                    box-shadow:
                        0 -3em 0 .2em aqua,
    
                        2em -2em 0 0 aqua,
    
                        3em 0 0 -.5em aqua,
    
                        2em 2em 0 -.5em aqua,
    
                        0 3em 0 -.5em aqua,
    
                        -2em 2em 0 -.5em aqua,
    
                        -3em 0 0 -.5em aqua,
    
                        -2em -2em 0 0 aqua;
                }
            }
    
            @keyframes flip-wave-0 {
        0% {
            transform: translate3d(0, -16px, 0) rotate(720deg)
        }
    
        10% {
            transform: translate3d(0, 0, 0) rotate(720deg)
        }
    
        100% {
            transform: translate3d(0, 0, 0) rotate(720deg)
        }
    }
    
     .loading-filp  :nth-child(20n+0) {
        display: inline-block;
        animation-duration: 4s;
        animation-name: flip-wave-0;
        animation-iteration-count: infinite
    }
    
    @keyframes flip-wave-1 {
        10% {
            transform: translate3d(0, -16px, 0) rotate(720deg)
        }
    
        15% {
            transform: translate3d(0, 0, 0) rotate(720deg)
        }
    
        100% {
            transform: translate3d(0, 0, 0) rotate(720deg)
        }
    }
      .loading-filp :nth-child(20n+1) {
        display: inline-block;
        animation-duration: 4s;
        animation-name: flip-wave-1;
        animation-iteration-count: infinite
    }
    
    @keyframes flip-wave-2 {
        15% {
            transform: translate3d(0, -16px, 0) rotate(720deg)
        }
    
        20% {
            transform: translate3d(0, 0, 0) rotate(720deg)
        }
    
        100% {
            transform: translate3d(0, 0, 0) rotate(720deg)
        }
    }
    
    .loading-filp :nth-child(20n+2) {
        display: inline-block;
        animation-duration: 4s;
        animation-name: flip-wave-2;
        animation-iteration-count: infinite
    }
    
    @keyframes flip-wave-3 {
        20% {
            transform: translate3d(0, -16px, 0) rotate(720deg)
        }
    
        25% {
            transform: translate3d(0, 0, 0) rotate(720deg)
        }
    
        100% {
            transform: translate3d(0, 0, 0) rotate(720deg)
        }
    }
    
    .loading-filp :nth-child(20n+3) {
        display: inline-block;
        animation-duration: 4s;
        animation-name: flip-wave-3;
        animation-iteration-count: infinite
    }
    
    @keyframes flip-wave-4 {
        25% {
            transform: translate3d(0, -16px, 0) rotate(720deg)
        }
    
        30% {
            transform: translate3d(0, 0, 0) rotate(720deg)
        }
    
        100% {
            transform: translate3d(0, 0, 0) rotate(720deg)
        }
    }
    
    .loading-filp :nth-child(20n+4) {
        display: inline-block;
        animation-duration: 4s;
        animation-name: flip-wave-4;
        animation-iteration-count: infinite
    }
    
    @keyframes flip-wave-5 {
        30% {
            transform: translate3d(0, -16px, 0) rotate(720deg)
        }
    
        35% {
            transform: translate3d(0, 0, 0) rotate(720deg)
        }
    
        100% {
            transform: translate3d(0, 0, 0) rotate(720deg)
        }
    }
    
    .loading-filp :nth-child(20n+5) {
        display: inline-block;
        animation-duration: 4s;
        animation-name: flip-wave-5;
        animation-iteration-count: infinite
    }
    
    @keyframes flip-wave-6 {
        35% {
            transform: translate3d(0, -16px, 0) rotate(720deg)
        }
    
        40% {
            transform: translate3d(0, 0, 0) rotate(720deg)
        }
    
        100% {
            transform: translate3d(0, 0, 0) rotate(720deg)
        }
    }
    
    .loading-filp :nth-child(20n+6) {
        display: inline-block;
        animation-duration: 4s;
        animation-name: flip-wave-6;
        animation-iteration-count: infinite
    }
    
    @keyframes flip-wave-7 {
        40% {
            transform: translate3d(0, -16px, 0) rotate(720deg)
        }
    
        45% {
            transform: translate3d(0, 0, 0) rotate(720deg)
        }
    
        100% {
            transform: translate3d(0, 0, 0) rotate(720deg)
        }
    }
    
    .loading-filp :nth-child(20n+7) {
        display: inline-block;
        animation-duration: 4s;
        animation-name: flip-wave-7;
        animation-iteration-count: infinite
    }
    
    @keyframes flip-wave-8 {
        45% {
            transform: translate3d(0, -16px, 0) rotate(720deg)
        }
    
        50% {
            transform: translate3d(0, 0, 0) rotate(720deg)
        }
    
        100% {
            transform: translate3d(0, 0, 0) rotate(720deg)
        }
    }
    
    .loading-filp :nth-child(20n+8) {
        display: inline-block;
        animation-duration: 4s;
        animation-name: flip-wave-8;
        animation-iteration-count: infinite
    }
    
    @keyframes flip-wave-9 {
        50% {
            transform: translate3d(0, -16px, 0) rotate(720deg)
        }
    
        55% {
            transform: translate3d(0, 0, 0) rotate(720deg)
        }
    
        100% {
            transform: translate3d(0, 0, 0) rotate(720deg)
        }
    }
    
    .loading-filp :nth-child(20n+9) {
        display: inline-block;
        animation-duration: 4s;
        animation-name: flip-wave-9;
        animation-iteration-count: infinite
    }
    
    @keyframes flip-wave-10 {
        55% {
            transform: translate3d(0, -16px, 0) rotate(720deg)
        }
    
        60% {
            transform: translate3d(0, 0, 0) rotate(720deg)
        }
    
        100% {
            transform: translate3d(0, 0, 0) rotate(720deg)
        }
    }
    
    .loading-filp :nth-child(20n+10) {
        display: inline-block;
        animation-duration: 4s;
        animation-name: flip-wave-10;
        animation-iteration-count: infinite
    }
    
    @keyframes flip-wave-11 {
        60% {
            transform: translate3d(0, -16px, 0) rotate(720deg)
        }
    
        65% {
            transform: translate3d(0, 0, 0) rotate(720deg)
        }
    
        100% {
            transform: translate3d(0, 0, 0) rotate(720deg)
        }
    }
    
    .loading-filp :nth-child(20n+11) {
        display: inline-block;
        animation-duration: 4s;
        animation-name: flip-wave-11;
        animation-iteration-count: infinite
    }
    
    @keyframes flip-wave-12 {
        65% {
            transform: translate3d(0, -16px, 0) rotate(720deg)
        }
    
        70% {
            transform: translate3d(0, 0, 0) rotate(720deg)
        }
    
        100% {
            transform: translate3d(0, 0, 0) rotate(720deg)
        }
    }
    
    .loading-filp :nth-child(20n+12) {
        display: inline-block;
        animation-duration: 4s;
        animation-name: flip-wave-12;
        animation-iteration-count: infinite
    }
    
    @keyframes flip-wave-13 {
        70% {
            transform: translate3d(0, -16px, 0) rotate(720deg)
        }
    
        75% {
            transform: translate3d(0, 0, 0) rotate(720deg)
        }
    
        100% {
            transform: translate3d(0, 0, 0) rotate(720deg)
        }
    }
    
    .loading-filp :nth-child(20n+13) {
        display: inline-block;
        animation-duration: 4s;
        animation-name: flip-wave-13;
        animation-iteration-count: infinite
    }
    
    @keyframes flip-wave-14 {
        75% {
            transform: translate3d(0, -16px, 0) rotate(720deg)
        }
    
        80% {
            transform: translate3d(0, 0, 0) rotate(720deg)
        }
    
        100% {
            transform: translate3d(0, 0, 0) rotate(720deg)
        }
    }
    
    .loading-filp :nth-child(20n+14) {
        display: inline-block;
        animation-duration: 4s;
        animation-name: flip-wave-14;
        animation-iteration-count: infinite
    }
    
    @keyframes flip-wave-15 {
        80% {
            transform: translate3d(0, -16px, 0) rotate(720deg)
        }
    
        85% {
            transform: translate3d(0, 0, 0) rotate(720deg)
        }
    
        100% {
            transform: translate3d(0, 0, 0) rotate(720deg)
        }
    }
    
    .loading-filp :nth-child(20n+15) {
        display: inline-block;
        animation-duration: 4s;
        animation-name: flip-wave-15;
        animation-iteration-count: infinite
    }
    
    @keyframes flip-wave-16 {
        85% {
            transform: translate3d(0, -16px, 0) rotate(720deg)
        }
    
        90% {
            transform: translate3d(0, 0, 0) rotate(720deg)
        }
    
        100% {
            transform: translate3d(0, 0, 0) rotate(720deg)
        }
    }
    
    .loading-filp :nth-child(20n+16) {
        display: inline-block;
        animation-duration: 4s;
        animation-name: flip-wave-16;
        animation-iteration-count: infinite
    }
    
    @keyframes flip-wave-17 {
        90% {
            transform: translate3d(0, -16px, 0) rotate(720deg)
        }
    
        95% {
            transform: translate3d(0, 0, 0) rotate(720deg)
        }
    
        100% {
            transform: translate3d(0, 0, 0) rotate(720deg)
        }
    }
    
    .loading-filp :nth-child(20n+17) {
        display: inline-block;
        animation-duration: 4s;
        animation-name: flip-wave-17;
        animation-iteration-count: infinite
    }
    
    @keyframes flip-wave-18 {
        95% {
            transform: translate3d(0, -16px, 0) rotate(720deg)
        }
    
        100% {
            transform: translate3d(0, 0, 0) rotate(720deg)
        }
    
        100% {
            transform: translate3d(0, 0, 0) rotate(720deg)
        }
    }
    
    .loading-filp :nth-child(20n+18) {
        display: inline-block;
        animation-duration: 4s;
        animation-name: flip-wave-18;
        animation-iteration-count: infinite
    }
    
    @keyframes flip-wave-19 {
        100% {
            transform: translate3d(0, -16px, 0) rotate(720deg)
        }
    
        105% {
            transform: translate3d(0, 0, 0) rotate(720deg)
        }
    
        100% {
            transform: translate3d(0, 0, 0) rotate(720deg)
        }
    }
    
    .loading-filp :nth-child(20n+19) {
        display: inline-block;
        animation-duration: 4s;
        animation-name: flip-wave-19;
        animation-iteration-count: infinite
    }
    
        </style>
    </head>
    
    <body>
        <div class="nav">
            <a href="./loading1.html" >loading1</a>
            <a href="./loading2.html" >loading2</a>
            <a href="./loading3.html" >loading3</a>
            <a href="./loading4.html">loading4</a>
            <a href="./loading5.html" class="current">loading5</a>
        </div>
        <div class="loader-box">
            <div class="loader-block">
                <div class="loader">
                </div>
                <div class="loading-text">正在加载中....</div>
            </div>
            </div>
       
      
    </body>
    <script> 
    var n = document.getElementsByClassName('loading-text');
    var loader = document.getElementsByClassName('loader');
    console.log(n)
    let className =""
    className ="loading-filp"
    function getClassName() {
        if(className === 'loading-filp'){
        n[0].classList.remove('loading-bounce')
        }else{
        n[0].classList.remove('loading-filp')
        }
        n[0].classList.add(className)
        changeLoading()
    }
    getClassName()
        function changeLoading () {
            if(!className) return;
        for (var e = 0, t = n.length; e < t; e++) {
            var a = n[e],
                r = a.textContent.trim();
            a.innerHTML = null;
            i(a, r)
        }
    }
        function i(n, e) {
            for (var t in e) {
                var a = document.createElement("span");
                a.innerHTML = e[t] === " " ? "&nbsp;" : e[t];
                n.appendChild(a)
            }
        }
    </script>
    </html>

    展开全文
  • 这是一款基于HTML5/CSS3制作的俄罗斯方块游戏,这款游戏相对简易,外观简介,功能齐全,具有俄罗斯方块的移动、翻转及消除等基本的功能,通过对这款游戏源码的学习可以很大程度上帮助我们提高HTML5游戏开发的技巧,...
  • HTML5+CSS3内置功能按钮提示框是一款功能的HTML5+CSS3弹出提示框,带有小图标,而且可以关闭提示框,可以内置一些功能按钮,比如确定和取消。
  • html5,css3,jquery,js,php帮助文档chm格式合集

    千次下载 热门讨论 2013-03-17 11:08:29
    html5,css3,jquery,js,php帮助文档chm格式合集,对查询很有用!
  • HTML5+CSS3期末考试大题

    万次阅读 多人点赞 2019-01-08 21:24:01
    DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;file&lt;/title&gt; &lt;style&gt; .content{ w

    1.制作一个文件上传效果

    code:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>file</title>
        <style>
            .content{
                width: 520px;
                margin: 20px auto;
            }
            .progress{
                width: 200px;
                height: 30px;
                position: relative;
                background: #f5f5f5;
            }
            .bar{
                height: 100%;
                width: 0px;
                background: #f00;
                position: absolute;
                left: 0;
                top: 0;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <input type="file" id="file" name="file">
            <div class="progress">
                <div class="bar" id="bar">
    
                </div>
            </div>
            <div id="info">
                0%
            </div>
            <input type="submit" id="btn">
            <script>
                var oFile = document.getElementById('file');
                var oBar = document.getElementById('bar');
                var oInfo = document.getElementById('info');
                var oBtn = document.getElementById('btn');
                oBtn.onclick = function () {
                    var fs = oFile.files[0]
                    var reader = new FileReader(fs)
                    // 上传中
                    reader.onprogress = function(e) {
                        // 计算上传的比率
                        oBar.style.width = e.loaded/e.total * 200+'px'
                        oInfo.innerHTML = Math.round((e.loaded/e.total * 200) * 0.5) +'%'
                    }
                    // 上传完成
                    reader.onload = function () {
                        console.log('完成了!')
                    }
                    // 读取文件格式
                    reader.readAsDataURL(fs)
                }
            </script>
        </div>
    </body>
    </html>

    2.利用HTML5中的canvas制作以下效果

    code:

    <!DOCTYPE html>
    <htmls>
    
    	<head>
    		<meta charset="UTF-8">
    		<title>canvas</title>
    	</head>
    	<style>
    
    	</style>
    
    	<body>
    		<div id="canvas-warp">
    			<canvas id="canvas" style=" display: block; margin: 50px auto;">
            1
        </canvas>
    		</div>
    
    		<script>
    			window.onload = function() {
    				var canvas = document.getElementById("canvas");
    				canvas.width = 800;
    				canvas.height = 600;
    				var context = canvas.getContext("2d");
    				context.beginPath();
    				context.arc(100, 70, 50, 0.5 * Math.PI, 1 * Math.PI);
    				context.strokeStyle = "green";
    				context.fillStyle = "white";
    				context.fill();
    				context.stroke();
    
    				context.beginPath();
    				context.arc(100, 70, 50, 1 * Math.PI, 1.5 * Math.PI);
    				context.strokeStyle = "dimgray";
    				context.fillStyle = "white";
    				context.fill();
    				context.stroke();
    
    				context.beginPath();
    				context.arc(100, 70, 50, 1.5 * Math.PI, 2 * Math.PI);
    				context.strokeStyle = "red";
    				context.fillStyle = "white";
    				context.fill();
    				context.stroke();
    
    				context.beginPath();
    				context.arc(100, 70, 50, 2 * Math.PI, 0.5 * Math.PI);
    				context.strokeStyle = "blue";
    				context.fillStyle = "white";
    				context.fill();
    				context.stroke();
    
    			}
    		</script>
    	</body>
    
    	</html>

    3.利用CSS3中 @ key-frames制作以下效果,实现红色div在距离顶部200px处停下来

    图一

    图二

    code:

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title>@ key-frames</title>
    		<style>
    			@-webkit-keyframes demove {
    				0% {
    					left: 0;
    					top: 0;
    				}
    				100% {
    					left: 0px;
    					top: 200px
    				}
    			}
    			
    			.wrap {
    				width: 100px;
    				height: 100px;
    				background: red;
    				position: relative;
    				left: 0;
    				top: 0;
    				-webkit-animation: 2s demove none; /* 是否重复 */
    				animation-fill-mode: forwards;
    			}
    		</style>
    	</head>
    
    	<body>
    		<div class="wrap">
    		</div>
    	</body>
    
    </html>

    4.利用HTML5中的本地存储(localstorage)完成以下要求。(框架不限)

    图一

    图二

    code:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>localstorage</title>
    		<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
    	</head>
    	<body>
    		<div>
    			<h4>用户信息表</h4>
    			<p><input type="text" id="text"/></p>
    			<p><input type="text" id="password"/></p>
    			<button type="button" class="submit">提交</button>
    			<div class="item">
    				
    			</div>
    		</div>
    		<script>
    			var arr = JSON.parse(localStorage.getItem("arrInfo"))||[]
    //			console.log(arr)
    			if(arr.length>0){
    				var str = ""
    				 for (var i=0;i<arr.length;i++) {
    				 	str+="<p>用户名:"+arr[i].text+"</p><p>密码:"+arr[i].password+"</p>"
    				 }
    				 $(".item").append(str)
    			}
    			
    			$(".submit").click(function(){
    				var oText = $("#text").val()
    				var oPas=$("#password").val()
    				
    				var obj={
    					"text":oText,
    					"password":oPas
    				}
    				
    				arr.push(obj)
    				
    				localStorage.setItem("arrInfo", JSON.stringify(arr))
    				var dom = $("<p>用户名:"+oText+"</p><p>密码:"+oPas+"</p>")
    				$(".item").append(dom)
    				$("#text").val("")
    				$("#password").val("")
    			})
    		</script>
    	</body>
    </html>
    

     

    展开全文
  • 响应式web设计html5css3实战 源代码

    热门讨论 2015-02-13 10:20:00
    响应式web设计html5css3实战 源代码 绝对一手!

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,701,135
精华内容 1,080,454
关键字:

css3 html5