css3相册图片3D旋转显示特效,经验分享

经验分享:CSS浮动(float,clear)通俗讲解,floatclear

很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程。

  前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家。

简述jQuery ajax的执行顺序,jqueryajax

jQuery中的Ajax的async默认是true(异步请求),如果想一个Ajax执行完后再执行另一个Ajax,
需要把async=false即可.

代码如下:

function TestAjax()
{
 var UserName = $("#txtUserName").val();
 $.ajax({
  url:"AjaxCheckUserName.htm",
  async:false,
  success:function(data){
   alert(data);
  }
 });
 alert('Test');
 $.ajax({
  url:"AjaxHandler.ashx",
  async:false,
  data:"UserName=" + UserName,
  success:function(data){
   $("#divAjax").html(data);
  },
  error:function(msg){
   alert(msg.responseText);
  }
 });
}

接着看下jquery $.ajax各个事件执行顺序

执行顺序如下:

1.ajaxStart(全局事件)

2.beforeSend

3.ajaxSend(全局事件)

4.success

5.ajaxSuccess(全局事件)

6.error

7.ajaxError (全局事件)

8.complete

9.ajaxComplete(全局事件)

10.ajaxStop(全局事件)

css3相册图片3D旋转展示特效,css3相册3d特效

查看效果:

本效果用css3的animation实现动画

定义和用法
animation 属性是一个简写属性,用于设置六个动画属性:
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
注释:请始终规定 animation-duration 属性,否则时长为
0,就不会播放动画了。

默认值: none 0 ease 0 1 normal
继承性: no
版本: CSS3
JavaScript 语法: object.style.animation=”movehovertree 5s infinite”

语法
animation: name duration timing-function delay iteration-count
direction;

animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。

示例:

 

图片 1

图片旋转代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3女神来袭 - 何问起</title>
<style>
body {
margin: 0;
background: #000;
}

#wrap {
width: 300px;
height: 400px;
position: relative;
margin: 100px auto;
-webkit-perspective: 3000px;
-moz-perspective: 3000px;
-ms-transform: perspective(3000px);
-ms-perspective: 3000px;
}

#head {
width: 100%;
height: 100%;
position: absolute;
-webkit-transform-style: preserve-3d;
-webkit-animation: donghua 15s linear 0s infinite;
-moz-transform-style: preserve-3d;
-moz-animation: donghua 15s linear 0s infinite;
-ms-transform-style: preserve-3d;
-ms-animation: donghua 25s linear 0s infinite;
}

#head div {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 400px;
border: 1px solid red;
text-align: center;
line-height: 100px;
}

#head div:nth-child(1) {
-webkit-transform: rotateY(0deg) translateZ(400px);
-moz-transform: rotateY(0deg) translateZ(400px);
-ms-transform: rotateY(0deg) translateZ(400px);
background: url(http://www.bkjia.com/uploads/allimg/160106/163Q95307-0.jpg);
background-size: cover;
}

#head div:nth-child(2) {
-webkit-transform: rotateY(36deg) translateZ(500px);
-moz-transform: rotateY(36deg) translateZ(500px);
-ms-transform: rotateY(36deg) translateZ(500px);
background: url(http://hovertree.com/texiao/css/14/hovertreepic/02.jpg);
background-size: cover;
}

#head div:nth-child(3) {
-webkit-transform: rotateY(72deg) translateZ(400px);
-moz-transform: rotateY(72deg) translateZ(400px);
-ms-transform: rotateY(72deg) translateZ(400px);
background: url(http://cms.hovertree.com/hvtimg/201511/9rour12a.jpg);
background-size: cover;
}

#head div:nth-child(4) {
-webkit-transform: rotateY(108deg) translateZ(500px);
-moz-transform: rotateY(108deg) translateZ(500px);
-ms-transform: rotateY(108deg) translateZ(500px);
background: url(http://hovertree.com/texiao/css/14/hovertreepic/04.jpg);
background-size: cover;
}

#head div:nth-child(5) {
-webkit-transform: rotateY(144deg) translateZ(400px);
-moz-transform: rotateY(144deg) translateZ(400px);
-ms-transform: rotateY(144deg) translateZ(400px);
background: url(http://hovertree.com/texiao/css/14/hovertreepic/05.jpg);
background-size: cover;
}

#head div:nth-child(6) {
-webkit-transform: rotateY(180deg) translateZ(500px);
-moz-transform: rotateY(180deg) translateZ(500px);
-ms-transform: rotateY(180deg) translateZ(500px);
background: url(http://hovertree.com/texiao/css/14/hovertreepic/06.jpg);
background-size: cover;
}

#head div:nth-child(7) {
-webkit-transform: rotateY(216deg) translateZ(400px);
-moz-transform: rotateY(216deg) translateZ(400px);
-ms-transform: rotateY(216deg) translateZ(400px);
background: url(http://hovertree.com/texiao/css/14/hovertreepic/07.jpg);
background-size: cover;
}

#head div:nth-child(8) {
-webkit-transform: rotateY(252deg) translateZ(500px);
-moz-transform: rotateY(252deg) translateZ(500px);
-ms-transform: rotateY(252deg) translateZ(500px);
background: url(http://hovertree.com/texiao/css/14/hovertreepic/08.jpg);
background-size: cover;
}

#head div:nth-child(9) {
-webkit-transform: rotateY(288deg) translateZ(400px);
-moz-transform: rotateY(288deg) translateZ(400px);
-ms-transform: rotateY(288deg) translateZ(400px);
background: url(http://hovertree.com/hvtimg/201511/6j9j6tk5.png);
background-size: cover;
}

#head div:nth-child(10) {
-webkit-transform: rotateY(324deg) translateZ(500px);
-moz-transform: rotateY(324deg) translateZ(500px);
-ms-transform: rotateY(324deg) translateZ(500px);
background: url(http://cms.hovertree.com/hvtimg/201512/wfevf6yh.jpg);
background-size: cover;
}

@-webkit-keyframes donghua {
0% {
transform: rotateX(5deg) rotateY(360deg);
}

50% {
transform: rotateX(-5deg) rotateY(180deg);
}

100% {
transform: rotateX(5deg) rotateY(0deg);
}
}

@-moz-keyframes donghua {
0% {
transform: rotateY(10deg) rotateY(0deg);
}

50% {
transform: rotateY(-10deg) rotateY(180deg);
}

100% {
transform: rotateY(10deg) rotateY(360deg);
}
}

@-ms-keyframes donghua {
0% {
transform: rotateY(10deg) rotateY(0deg);
}

50% {
transform: rotateY(-10deg) rotateY(180deg);
}

100% {
transform: rotateY(10deg) rotateY(360deg);
}
}a{color:white}
</style>
</head>
<body>

<div id="wrap">
<div id="head">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div><div style="margin:0px auto;text-align:center;width:736px">
<h2>图片立体旋转</h2><a href="http://hovertree.com/">首页</a> <a href="http://hovertree.com/texiao/">特效</a>
<a href="http://hovertree.com/h/bjaf/a6598spx.htm">原文</a>
  <a href="http://hovertree.com/texiao/css/14/1.htm">Demo 2</a></div>
</body>
</html>

更多: 

查看效果:
本效果用css3的animation实现动画 定义和用法 animation 属性…

  写在前面的话:

  由于CSS内容比较多,小菜没有精力从头到尾讲一遍,只能有针对性的讲解。

  如果读者理解CSS盒子模型,但对于浮动不理解,那么这篇文章可以帮助你。

  小菜水平有限,本文仅仅是入门教程,不当之处请谅解!

  本文以div元素布局为例。

您可能感兴趣的文章:

  • jquery $.ajax各个事件执行顺序
  • Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
  • jquery中ajax函数执行顺序问题之如何设置同步
  • jquery中的ajax如何返回结果而非回调方式即为同顺序执行
  • Jquery $.ajax函数外的一段代码的执行顺序

ajax的执行顺序,jqueryajax
jQuery中的Ajax的async默认是true(异步请求),如果想一个Ajax执行完后再执行另一个Ajax,
需要把async=false即可….

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签:
网站地图xml地图