CSS3实现文字过渡移动

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;
}

  

时间: 2024-07-28 15:30:44

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

CSS3的文字阴影—text-shadow

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3的文字阴影-text-shadow</title> <style> body{margin: 0;padding: 100px;} .example{ background: #666666; width: 440px; padding:

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

一款基于css3的文字3D翻转特效.这款特效当鼠标经过文字的时候3D翻转显示阴影.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="component"> <ul class="grid"> <li> <div class="codrops-header"> <h1> Animated Opening Type</h1> </d

CSS3制作文字半透明倒影效果

/*------------------ITEYE 祈祷幸福(http://qidaoxingfu.iteye.com)原创 转载请注明-----------------*/ 效果如图.Ps.背景线条是背景图勒,和本文效果无关... html代码如下: Html代码   <div class="content"> <h3 title="专业技能">专业技能</h3> <div class="next"&g

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

Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效果应该于网页中的任何文字. Textillate 下载        案例演示 使用方法 引入核心文件 <link href="assets/animate.css" rel="stylesheet"> <script src="http:/

使用CSS3创建文字颜色渐变(CSS3 Text Gradient)

考虑一下,如何在网页中达到类似以下文字渐变的效果? 传统的实现中,是用一副透明渐变的图片覆盖在文字上.具体实现方式可参考 http://www.qianduan.net/css-gradient-text-effect.html .这种方式优点是图片可控,所以可实现很复杂的渐变效果,但是缺点是图片渐变色必须与背景色一致,同时损失了鼠标点击.文字选择等事件. 改进的方法可以使用 CSS3 的背景渐变 -webkit-gradient ,用一个背景渐变的 DIV 代替图片.下面是实现效果示例,相比以

【CSS3】transition过渡

一.transition CSS3的过渡功能就像是一种黄油,可以让CSS的一些变化变得平滑.因为原生的CSS过渡在客户端需要处理的资源要比用JavaScript和Flash少的多,所以才会更平滑. transition的属性 属性可以分开写,也可以放在一起写,比如下面的代码,图片的宽高本来都是15px,想要让它1秒的时间内过渡到宽高为450px,通过:hover来触发,那么代码就可以如下: img{ height:15px; width:15px; transition: 1s 1s heigh

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

效果:http://hovertree.com/texiao/css3/1/ 本效果主要使用text-shadow实现.参考:http://hovertree.com/h/bjaf/css3_text_effect.htm 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>超炫CSS3文字特效集锦DEMO演示 - 何问起</title>

IE下类似css3 Text-shadow文字阴影的几种方法

一:ie9不支持css3的text-shadow属性: 二:glow滤镜下的文字阴影效果 Filter:glow(color=black,strength=5); 实现效果就是5像素扩散大小的黑色光晕.但是效果不经人意,当换成灰色时候就会有毛边. 三: MotionBlur的滤镜下的文字阴影效果     filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=5, direction=145); 用中文释义就是:145度方向上5像

重新想,重新看——CSS3变形,过渡与动画③

这一篇主要谈谈CSS3的过渡属性. 过渡属性被设计的十分通俗易懂,属性写法为transition,有四个子属性: <transition-property> 表示需要过渡的属性[必须](本质上,transition对元素的该属性上加了一个监听器,一旦发现属性值变动,则开启'过渡'开关,令该属性的值开始过渡.)其下的值有以下三种类型: none all 表示该元素所有可过渡属性均监听: <single-transition-property> 所需监听的单个属性(如需监听多个属性则需