当前位置:首页 > 开发 > Web前端 > Html5 > 正文

CSS3+HTML5特效2 - 翻转效果

发表于: 2015-11-13   作者:互联网   来源:转载   浏览次数:
摘要: 先看效果,鼠标移上去看看。 back front       1. 本实例需要以下元素     a. 容器BOX     b. 默认显示元素FRONT     c. 翻转显示元素BACK 2. 容器BOX的Height为200px,Width为200px; 1 .box2

先看效果,鼠标移上去看看。

back
front

 

 

 

1. 本实例需要以下元素

    a. 容器BOX

    b. 默认显示元素FRONT

    c. 翻转显示元素BACK

CSS3+HTML5特效2 - 翻转效果

2. 容器BOX的Height为200px,Width为200px;

1 .box2{

2   position: relative;

3   top: 20px;

4   left: 20px;

5   width: 200px;

6   height: 200px;

7   border: 1px solid #ccc;

8   overflow: hidden;

9 }

 

3. 默认显示和翻转显示的元素Height为100%,Width为100%,Css中包含翻转效果动画代码;

 1 .front2{

 2   position: absolute;

 3   top: 0px;

 4   left: 0px;

 5   width: 100%;

 6   height: 100%;

 7   background: #ff0000;

 8   -webkit-transform: scaleX(1);

 9   transform: scaleX(1);

10   -webkit-transition:1s 1s all ease;

11   transition:1s 1s all ease;

12 }

13 .back2{

14   position: absolute;

15   top: 0px;

16   left: 0px;

17   width: 100%;

18   height: 100%;

19   background: #00ff00;

20   -webkit-transform: scaleX(0);

21   transform: scaleX(0);

22   -webkit-transition:1s all ease;

23   transition:1s all ease;

24 }

 

4. 增加鼠标移入效果;

 1 .box2:hover .front2{

 2   -webkit-transform: scaleX(0);

 3   transform: scaleX(0);

 4   -webkit-transition:1s all ease;

 5   transition:1s all ease;

 6 }

 7 .box2:hover .back2{

 8   -webkit-transform: scaleX(1);

 9   transform: scaleX(1);

10   -webkit-transition:1s 1s all ease;

11   transition:1s 1s all ease;

12 }

 

5. HTML页面内容;

1 <div class="box2">

2   <div class="back2">back</div>

3   <div class="front2">front</div>

4 </div>

 

存在的问题:当鼠标移入后,迅速将鼠标移出,翻转效果还会继续,直到完成为止。

CSS3+HTML5特效2 - 翻转效果

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
经过上面的测试,现在对原先程序进行一些改造可以创建出不错的效果,你会发现每次改动一些参数很多
今晚抽点时间记录一下coverFlow效果。前几天修改了一个coverFlow的效果的代码。看到coverFlow效果有
点击图中的星星开始翻转 源码: import android.content.Context; import android.content.res.Typed
点击图中的星星开始翻转 源码: import android.content.Context; import android.content.res.Typed
简单的demo,屏幕上下滑动翻转View,类似Android Chrome的效果 代码很简单,扩展一X轴旋转的动画Rot
点击图中的星星开始翻转 源码: import android.content.Context; import android.content.res.Typed
今天向大家分享一款可以翻转网格元素的3d特效,当你点击网格中的图片元素时,该元素就会进行翻转并
iPad版腾讯视频翻转显示影片详情动画,path里也用到这个动画,用户点击列表上面某张缩略图片,图片
flash特效原理:图片滑动放大效果(1) http://blog.csdn.net/hero82748274/archive/2009/10/22/47153
原文: CSS3+HTML5特效8 - 顶部和右侧固定,左侧随窗口变化的布局 效果演示 实现原理 使用3个div(一
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号