1.在需要移动的对象上加上a标签,并定义CSS

<a><img src="/skin/images/ico-weixin.png" /><span>微信平台</span></a>

2、定义CSS

#solution a{
-webkit-transition:all 1s ease ;
-moz-transition:all 1s ease ;
-o-transition:all 1s ease ;
transition:all 1s ease ;
}
#solution a:hover{
padding-right:10px;
}

  

CSS3实现文字过渡移动的更多相关文章

  1. IE下实现类似CSS3 text-shadow文字阴影的几种方法

    IE下实现类似CSS3 text-shadow文字阴影的几种方法 一.开始的擦边话 为了测试IE9浏览器,下午晃晃荡荡把系统换成window7的了.果然,正如网上所传言的一样,IE9浏览器确实不支持C ...

  2. 基于css3的文字3D翻转特效

    一款基于css3的文字3D翻转特效.这款特效当鼠标经过文字的时候3D翻转显示阴影.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="compo ...

  3. CSS3火焰文字特效制作教程

    原文:CSS3火焰文字特效制作教程 用一句很俗气的话概括这两天的情况就是:“最近很忙”,虽然手头上有不少很酷的HTML5和CSS3资源,但确实没时间将它们的实现过程写成教程分享给大家.今天刚完成了一个 ...

  4. jquery使用CSS3实现文字动画效果插件Textillate.js

    Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...

  5. CSS3实现文字折纸效果

    CSS3实现文字折纸效果 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <title></tit ...

  6. 重新想,重新看——CSS3变形,过渡与动画①

    学习CSS3,觉得最难记忆的部分除了flex特性之外,就要属变形,过渡和动画部分了.作为初学者,总有种犯懒的心理,想着既然IE8浏览器都不完全支持CSS动画属性,还要考虑浏览器兼容问题,那么就不那么着 ...

  7. 纯css3艺术文字样式效果代码

    效果:http://hovertree.com/texiao/css3/1/ 本效果主要使用text-shadow实现.参考:http://hovertree.com/h/bjaf/css3_text ...

  8. 用CSS3实现文字描边

    CSS3作为新兴的前端技术可以实现很多复杂变化的效果,比如文字描边. 这里主要用到text-shadow属性,顾名思义就是为文字加上阴影效果.例: text-shadow:10px 5px 2px # ...

  9. CSS3的文字阴影—text-shadow

    text-shadow还没有出现时,大家在网页设计中阴影一般都是用photoshop做成图片,现在有了css3可以直接使用text-shadow属性来指定阴影. 这个属性可以有两个作用,产生阴影和模糊 ...

随机推荐

  1. 通过泛型来简化findViewById

    我们一般写findViewById都要加个强制转换,感觉很麻烦,现在你可以在你的BaseActivity中写入如下方法: @SuppressWarnings(“unchecked”) public f ...

  2. Material Designer的低版本兼容实现(十四)—— CardView

    今天说的又是一个5.0中才有的新控件——CardView(卡片视图).这个东东其实我们早就见过了,无论是微博还是人人客户端,它都有出现.通常我们都是通过自定义一个背景图片,然后通过给layout进行设 ...

  3. Orchard之模版开发

    生成新模版之后(参看:Orchard之生成新模板),紧接着就是模版开发了. 一:开发必备之 Shape Tracing 到了这一步,非常依赖一个工具,当然,它也是 Orchard 项目本身的一个 Mo ...

  4. Asp.Net 管道事件注册/HttpApplication事件注册

    一.HttpApplication简介 在HttpRuntime创建了HttpContext对象之后,HttpRuntime将随后创建一个用于处理请求的对象,这个对象的类型为HttpApplicati ...

  5. 简明 MongoDB 入门教程

    MongoDB 是免费开源的跨平台 NoSQL 数据库,命名源于英文单词 humongous,意思是「巨大无比」,可见开发组对 MongoDB 的定位.与关系型数据库不同,MongoDB 的数据以类似 ...

  6. 相关性系数及其python实现

    参考文献: 1.python 皮尔森相关系数 https://www.cnblogs.com/lxnz/p/7098954.html 2.统计学之三大相关性系数(pearson.spearman.ke ...

  7. MySql清空所有表数据【慎用】

    CREATE PROCEDURE `up_truncate_all_table`() BEGIN ; ); DECLARE cur1 CURSOR FOR SELECT table_name from ...

  8. Chart:ECharts

    ylbtech-Chart:ECharts ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome, ...

  9. JS Replace() 高级用法(转)

    在很多项目中,我们经常需要使用JS,在页面前面对前台的某些元素做做修改,js 的replace()方法就必不可少. 经常使用"ABCABCabc".replace("A& ...

  10. TOJ 1220 填数字游戏 / 深搜

    填数字游戏 时间限制(普通/Java):1000MS/10000MS     运行内存限制:65536KByte 描述 有个小游戏,让你填写以下方框,要求: a1+a2+a3+M=b1+b2+b3+M ...