Skip to content

Commit 358eecc

Browse files
beiyuubeiyuu
committed
fix css3
1 parent 51cd352 commit 358eecc

File tree

1 file changed

+105
-106
lines changed

1 file changed

+105
-106
lines changed

‎_posts/blog/2013-08-24-css3-animation.md‎

Lines changed: 105 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -198,15 +198,15 @@ transition-delay声明了动画延迟开始的时间，很容易理解
198198

199199
<div id="transition1">
200200
#transition1 {<br>
201-
&nbsp;&nbsp;&nbsp;&nbsp;width:350px;<br>
202-
&nbsp;&nbsp;&nbsp;&nbsp;background-color:#1abc9c;<br>
203-
&nbsp;&nbsp;&nbsp;&nbsp;transition-propety:width,background-color;<br>
204-
&nbsp;&nbsp;&nbsp;&nbsp;transition-duration:.5s, 1s;<br>
201+
&nbsp;&nbsp;&nbsp;&nbsp;width:350px;<br>
202+
&nbsp;&nbsp;&nbsp;&nbsp;background-color:#1abc9c;<br>
203+
&nbsp;&nbsp;&nbsp;&nbsp;transition-propety:width,background-color;<br>
204+
&nbsp;&nbsp;&nbsp;&nbsp;transition-duration:.5s, 1s;<br>
205205
}<br>
206206
#transition1:hover {<br>
207-
&nbsp;&nbsp;&nbsp;&nbsp;width:450px;<br>
208-
&nbsp;&nbsp;&nbsp;&nbsp;background-color:#8e44ad;<br>
209-
&nbsp;&nbsp;&nbsp;&nbsp;transition-duration:.5s, 3s;<br>
207+
&nbsp;&nbsp;&nbsp;&nbsp;width:450px;<br>
208+
&nbsp;&nbsp;&nbsp;&nbsp;background-color:#8e44ad;<br>
209+
&nbsp;&nbsp;&nbsp;&nbsp;transition-duration:.5s, 3s;<br>
210210
}<br>
211211
</div>
212212

@@ -305,17 +305,17 @@ animation-direction有四个值：
305305
效果如下：
306306

307307
<div id="translate1">
308-
<div id="trans-inner1">Normal Div</div>
309-
<div id="trans-inner2">transform:tranlated(40px, 40px)</div>
308+
<div id="trans-inner1">Normal Div</div>
309+
<div id="trans-inner2">transform:tranlated(40px, 40px)</div>
310310
</div>
311311

312312
####Rotate
313313

314314
`rotate()`方法可以将元素按照时钟方向旋转，参数可以是`0deg`到`360deg`，也是在x-y轴平面，示例如下：
315315

316316
<div id="rotate1">
317-
<div id="rota-inner1">Normal Div</div>
318-
<div id="rota-inner2">transform:rotate(-30deg)</div>
317+
<div id="rota-inner1">Normal Div</div>
318+
<div id="rota-inner2">transform:rotate(-30deg)</div>
319319
</div>
320320

321321
####Scale
@@ -330,8 +330,8 @@ animation-direction有四个值：
330330
`skew()`方法可以将元素按照指定参数进行扭曲，你需要指定x、y轴的扭曲角度，看示例：
331331

332332
<div id="skew1">
333-
<div id="sk-inner1">Normal Div</div>
334-
<div id="sk-inner2">transform:skew(30deg,0)</div>
333+
<div id="sk-inner1">Normal Div</div>
334+
<div id="sk-inner2">transform:skew(30deg,0)</div>
335335
</div>
336336

337337
####Matrix
@@ -359,41 +359,41 @@ animation-direction有四个值：
359359
来看看例子：
360360

361361
<div class="transform-con">
362-
<div id="trans-3" class="inner">
363-
width:100%;<br>
364-
height:100%;<br>
365-
transform: translateZ(-200px);
366-
</div>
362+
<div id="trans-3" class="inner">
363+
width:100%;<br>
364+
height:100%;<br>
365+
transform: translateZ(-200px);
366+
</div>
367367
</div>
368368

369369
<div class="transform-con">
370-
<div id="trans-31" class="inner">
371-
width:100%;<br>
372-
height:100%;<br>
373-
transform: translateZ(100px);
374-
</div>
370+
<div id="trans-31" class="inner">
371+
width:100%;<br>
372+
height:100%;<br>
373+
transform: translateZ(100px);
374+
</div>
375375
</div>
376376

377377
<div class="transform-con">
378-
<div id="rotate-31" class="inner">
379-
width:100%;<br>
380-
height:100%;<br>
381-
transform: rotateX(45deg);
382-
</div>
378+
<div id="rotate-31" class="inner">
379+
width:100%;<br>
380+
height:100%;<br>
381+
transform: rotateX(45deg);
382+
</div>
383383
</div>
384384
<div class="transform-con">
385-
<div id="rotate-32" class="inner">
386-
width:100%;<br>
387-
height:100%;<br>
388-
transform: rotateY(45deg);
389-
</div>
385+
<div id="rotate-32" class="inner">
386+
width:100%;<br>
387+
height:100%;<br>
388+
transform: rotateY(45deg);
389+
</div>
390390
</div>
391391
<div class="transform-con">
392-
<div id="rotate-33" class="inner">
393-
width:100%;<br>
394-
height:100%;<br>
395-
transform: rotateZ(45deg);
396-
</div>
392+
<div id="rotate-33" class="inner">
393+
width:100%;<br>
394+
height:100%;<br>
395+
transform: rotateZ(45deg);
396+
</div>
397397
</div>
398398

399399
任何有3D变换的元素，不论最后只是做了2D的变换，或者什么都没做`translate3d(0,0,0)`，都会触发浏览器去计算。不过，以后会更新优化也不一定。
@@ -412,17 +412,16 @@ animation-direction有四个值：
412412
transform: perspective( 400px ) rotateY(45deg);
413413
}
414414

415-
416415
<div class="pers-con" id="pers-red">
417-
<div class="item">&nbsp;</div>
418-
<div class="item">&nbsp;</div>
419-
<div class="item">&nbsp;</div>
420-
<div class="item">&nbsp;</div>
421-
<div class="item">&nbsp;</div>
422-
<div class="item">&nbsp;</div>
423-
<div class="item">&nbsp;</div>
424-
<div class="item">&nbsp;</div>
425-
<div class="item">&nbsp;</div>
416+
<div class="item">&nbsp;</div>
417+
<div class="item">&nbsp;</div>
418+
<div class="item">&nbsp;</div>
419+
<div class="item">&nbsp;</div>
420+
<div class="item">&nbsp;</div>
421+
<div class="item">&nbsp;</div>
422+
<div class="item">&nbsp;</div>
423+
<div class="item">&nbsp;</div>
424+
<div class="item">&nbsp;</div>
426425
</div>
427426

428427
#pers-blue {
@@ -435,15 +434,15 @@ animation-direction有四个值：
435434
}
436435

437436
<div class="pers-con" id="pers-blue">
438-
<div class="item">&nbsp;</div>
439-
<div class="item">&nbsp;</div>
440-
<div class="item">&nbsp;</div>
441-
<div class="item">&nbsp;</div>
442-
<div class="item">&nbsp;</div>
443-
<div class="item">&nbsp;</div>
444-
<div class="item">&nbsp;</div>
445-
<div class="item">&nbsp;</div>
446-
<div class="item">&nbsp;</div>
437+
<div class="item">&nbsp;</div>
438+
<div class="item">&nbsp;</div>
439+
<div class="item">&nbsp;</div>
440+
<div class="item">&nbsp;</div>
441+
<div class="item">&nbsp;</div>
442+
<div class="item">&nbsp;</div>
443+
<div class="item">&nbsp;</div>
444+
<div class="item">&nbsp;</div>
445+
<div class="item">&nbsp;</div>
447446
</div>
448447

449448
上面这两种写法，都触发了元素的3D行为，函数型的写法`transform:perspective(400px)`适用于单个元素，会对每一个元素做3D视图的变换，而`perspective:400px`的写法，需写在父元素上，然后以父元素的视角，对多个子元素进行3D变换，多个子元素共享同一个3D空间，可以自己打开console修改感受一下。
@@ -456,22 +455,22 @@ animation-direction有四个值：
456455
perspective-orgin: 20% 70%;
457456

458457
这个是默认值的`perspective-orign:50% 50%`：
459-
<!--<div id="transform1">-->
460-
<!--<div class="inner">-->
461-
<!--<img src="http://lorempixel.com/150/150/city" alt="Nature">-->
462-
<!--<img src="http://lorempixel.com/150/150/food" alt="Nature">-->
463-
<!--<img src="http://lorempixel.com/150/150/people" alt="Nature">-->
464-
<!--</div>-->
465-
<!--</div>-->
458+
<div id="transform1">
459+
<div class="inner">
460+
<img src="http://lorempixel.com/150/150/city" alt="Nature">
461+
<img src="http://lorempixel.com/150/150/food" alt="Nature">
462+
<img src="http://lorempixel.com/150/150/people" alt="Nature">
463+
</div>
464+
</div>
466465

467466
这个是`perspective-orgin: 0% 50%;`
468-
<!--<div id="transform1" sytle="-webkit-perspective-origin:0% 50%;perspective-origin:0% 50%">-->
469-
<!--<div class="inner">-->
470-
<!--<img src="http://lorempixel.com/150/150/nature" alt="Nature">-->
471-
<!--<img src="http://lorempixel.com/150/150/animals" alt="Nature">-->
472-
<!--<img src="http://lorempixel.com/150/150/abstract" alt="Nature">-->
473-
<!--</div>-->
474-
<!--</div>-->
467+
<div id="transform1" sytle="-webkit-perspective-origin:0% 50%;perspective-origin:0% 50%">
468+
<div class="inner">
469+
<img src="http://lorempixel.com/150/150/nature" alt="Nature">
470+
<img src="http://lorempixel.com/150/150/animals" alt="Nature">
471+
<img src="http://lorempixel.com/150/150/abstract" alt="Nature">
472+
</div>
473+
</div>
475474

476475
####transform-style
477476
这个参数用来共享父元素的3D空间，这样说起来有些抽象，下面第一个翻卡片的例子中会讲到。
@@ -544,10 +543,10 @@ backface-visibility 属性可用于隐藏内容的背面。默认情况下，背
544543
当`#card1`添加了`.flipped`的样式，`#card1`以Y轴旋转了180度，这时候`.front`转到了背面，而`.back`从背面转到了前面，所以就完成了切换。这一段需要仔细的想一想。好了，看看下面的实例，点击即可翻转：
545544

546545
<div id="cardflip">
547-
<div id="card1">
548-
<div class="front">1</div>
549-
<div class="back">2</div>
550-
</div>
546+
<div id="card1">
547+
<div class="front">1</div>
548+
<div class="back">2</div>
549+
</div>
551550
</div>
552551

553552
我们再给这个翻转加一些偏移的效果，看起来会不那么生硬。这就用到了`transform-origin`，这个参数：
@@ -563,10 +562,10 @@ backface-visibility 属性可用于隐藏内容的背面。默认情况下，背
563562
可以在console里面去掉`#card1.flipped`的`translate`帮助理解。
564563

565564
<div id="cardflip1">
566-
<div id="card2">
567-
<div class="front">1</div>
568-
<div class="back">2</div>
569-
</div>
565+
<div id="card2">
566+
<div class="front">1</div>
567+
<div class="back">2</div>
568+
</div>
570569
</div>
571570

572571
这里有一点需要注意，当元素在z轴上有了位移，或者朝向负角度旋转，会导致元素在页面上无法被鼠标点击到，想像一下3D空间，这个元素已经位于整个页面平面的**里面**，所以无法触及了。
@@ -635,23 +634,23 @@ backface-visibility 属性可用于隐藏内容的背面。默认情况下，背
635634
#cube { transition: transform 1s; }
636635

637636
<section id="cube-con">
638-
<div id="cube">
639-
<figure class="front">1</figure>
640-
<figure class="back">2</figure>
641-
<figure class="right">3</figure>
642-
<figure class="left">4</figure>
643-
<figure class="top">5</figure>
644-
<figure class="bottom">6</figure>
645-
</div>
637+
<div id="cube">
638+
<figure class="front">1</figure>
639+
<figure class="back">2</figure>
640+
<figure class="right">3</figure>
641+
<figure class="left">4</figure>
642+
<figure class="top">5</figure>
643+
<figure class="bottom">6</figure>
644+
</div>
646645
</section>
647646

648647
<div id="cube-btn">
649-
<button data-class="show-front">Show Front</button>
650-
<button data-class="show-back">Show Back</button>
651-
<button data-class="show-right">Show Right</button>
652-
<button data-class="show-left">Show Left</button>
653-
<button data-class="show-top">Show Top</button>
654-
<button data-class="show-bottom">Show Bottom</button>
648+
<button data-class="show-front">Show Front</button>
649+
<button data-class="show-back">Show Back</button>
650+
<button data-class="show-right">Show Right</button>
651+
<button data-class="show-left">Show Left</button>
652+
<button data-class="show-top">Show Top</button>
653+
<button data-class="show-bottom">Show Bottom</button>
655654
</div>
656655

657656

@@ -781,21 +780,21 @@ js代码如下：
781780
});
782781

783782
<section id="caro-con">
784-
<div id="carousel">
785-
<figure>1</figure>
786-
<figure>2</figure>
787-
<figure>3</figure>
788-
<figure>4</figure>
789-
<figure>5</figure>
790-
<figure>6</figure>
791-
<figure>7</figure>
792-
<figure>8</figure>
793-
<figure>9</figure>
794-
</div>
783+
<div id="carousel">
784+
<figure>1</figure>
785+
<figure>2</figure>
786+
<figure>3</figure>
787+
<figure>4</figure>
788+
<figure>5</figure>
789+
<figure>6</figure>
790+
<figure>7</figure>
791+
<figure>8</figure>
792+
<figure>9</figure>
793+
</div>
795794
</section>
796795
<div id="car-btn">
797-
<button id="car-pre">&lt; Prev</button>
798-
<button id="car-next">Next &gt;</button>
796+
<button id="car-pre">&lt; Prev</button>
797+
<button id="car-next">Next &gt;</button>
799798
</div>
800799

801800
##结语

0 commit comments

Comments
 (0)