css3 transition的应用

css3 的transition：允许css属性值在一定的时间区内平滑的过渡。

transition-property：变换延续的时间

transition-duration：在延续时间段

transition-timing-function：变换速度变化

transition-delay：变化延迟时间

a：{all 0.5s ease-in 1s；}这里的四个值分别对应上面的四个属性。

* {margin:0;padding:0;}
ul{width:300px;}
ul:after {clear:both;display:block;content:".";height:0;visibility:hidden;font-size:0;line-height:0;}
ul li{list-style:none;font-size:12px;color:#069;border:1px solid #CBCBCB;background-color:#E5E5E5;border-radius:3px;box-shadow:1px 1px 0 #96969D;width:280px;height:30px;margin-bottom:20px;}
li a{position:relative;width:230px;height:30px;padding-left:25px;display:block;}
li a img{position:absolute;top:6px;left:5px;border:0 none;display:block;}
li a span, li a strong{position:absolute;top:0;left:25px;opacity:1;
-webkit-transition:all 800ms linear;
-moz-transition:all 800ms linear;
-o-transition:all 800ms linear;line-height:30px;width:240px;}
li a strong{top:30px;opacity:0;}
li a:hover{color:#FF6500;_background-color:#E5E5E5;font-weight:bolder;}
li a:hover strong{top:0;opacity:1;}
li a:hover span{top:-30px;opacity:0;}

<div>
<ul><li><a href="http://www.cnblogs.com/web-sheena"><span>sheena的博客1</span><strong>看看效果如何</strong></a></li><li><a href="http://www.cnblogs.com/web-sheena"><span>sheena的博客2</span><strong>看看效果如何</strong></a></li><li><a href="http://www.cnblogs.com/web-sheena"><span>sheena的博客3</span><strong>看看效果如何</strong></a></li>
</ul>
</div>

　　原理就是利用定位的相对a标签的距离的不同，结合transition的平滑过渡，和显示隐藏，实现动态的文字替换的过程。

转载于:https://www.cnblogs.com/web-sheena/archive/2012/07/09/2582545.html

css3 transition的应用相关推荐

悬停渐变特效html,CSS3 transition属性实现hover渐变动画效果
CSS3 transition属性实现hover渐变动画效果我们知道许多网页动态特效都是由FLASH或JQUERY之类的JS特效库实现的实际上现在CSS3也能实现很多类似效果了,只是在各种浏览器中兼 ...
CSS3 Transition介绍
CSS3提供了一种全新的方式来定义CSS属性改变时的过渡效果,通常在:hover.:focus的条件下触发.过去,为了实现这种平滑的过渡效果,我们需要借助于Flash技术,现在只需要简单的使用CSS3 ...
css动画走马灯5秒,css3 transition 和 animation实现走马灯
这段时间在做一个App,H5的开发.页面上有公告以走马灯的形式显示出来. 在开始直接用的marquee标签,后来发现在ios客户端,走马灯移动不够平滑,有抖动现象. 对于有强迫症的我而言是无法忍受的 ...
css通知页面,CSS3 transition 实现通知消息轮播条
Vue 版本,拷贝到文件即可使用 {{ item }} export default { data () { return { // 开启动画 isAnimated: false, // 轮播数据 d ...
[ISUX译转]CSS3 transition规范的实际使用经验
本篇文章主要讲述CSS3 transition规范和在不同浏览器之间的使用差异,关于具体解决方法或如何规避问题的意见可以参考另一篇非常有见地的文章,"All You Need to Know ...
css3 transition uncover (揭开效果)
一.构建页面页面构建思路和前一篇差不多.请移步<css3 transition effect(Flip翻转效果)> 由于flip存在翻转时候的效果,需要设置背面情况下不显示的CSS,但是 ...
css设置元素抛物线,CSS3 transition 实现抛物线动画
您的位置: 富录-前端开发|web技术博客 > HTML&&CSS > CSS3 transition 实现抛物线动画 CSS3 transition 实现抛物线动画发布 ...
CSS3 transition实现手风琴效果
CSS3 transition实现手风琴效果最近在项目中遇到了一个需求,需要完成一个手风琴效果的展示,最后通过CSS3 transition实现了这个效果,下面就分享下实现方法. 效果首先看下效果 ...
css3 transition 和 animation实现走马灯
这段时间在做一个App,H5的开发.页面上有公告以走马灯的形式显示出来. 在开始直接用的marquee标签,后来发现在ios客户端,走马灯移动不够平滑,有抖动现象. 对于有强迫症的我而言是无法忍受的 ...

css3 transition的应用

css3 transition的应用相关推荐

最新文章

热门文章