分享十个CSS3鼠标滑过文字动画特效

介绍10组基于CSS3的鼠标滑过文字动画特效，有上凸、下凹等文字动画。这些炫酷的CSS3文字效果可以让网页变得更加绚丽。效果图如下：

实现的代码。

html代码：

 <h2 class="headingOuter">
        Push down (shadow effect)</h2>
    <div class="headingWrapper color-bright">
        <a href="" class="header header--pushDown header--shadow" title="HOVER ME">HOVER ME</a>
    </div>
    <div class="headingWrapper">
        <a href="" class="header header--pushDown header--shadow" title="HOVER ME">HOVER ME</a>
    </div>
    <h2 class="headingOuter">
        Raise up (shadow effect)</h2>
    <div class="headingWrapper color-bright">
        <a href="" class="header header--raiseUp header--shadow">HOVER ME</a>
    </div>
    <div class="headingWrapper">
        <a href="" class="header header--raiseUp header--shadow">HOVER ME</a>
    </div>
    <h2 class="headingOuter">
        Push down (merging into page)</h2>
    <div class="headingWrapper color-bright">
        <a href="" class="header header--pushDown">HOVER ME</a>
    </div>
    <div class="headingWrapper">
        <a href="" class="header header--pushDown">HOVER ME</a>
    </div>
    <h2 class="headingOuter">
        Raise up (emerging from page)</h2>
    <div class="headingWrapper color-bright">
        <a href="" class="header header--raiseUp">HOVER ME</a>
    </div>
    <div class="headingWrapper">
        <a href="" class="header header--raiseUp">HOVER ME</a>
    </div>
    <h2 class="headingOuter">
        Raised up (emerging from bg) with pattern</h2>
    <div class="headingWrapper color-bright">
        <a href="#" class="header header--raiseUp header--svg">
            <svg>
                <defs>
                    <lineargradient id="stripedColor" x1="0" x2="0" y1="0%" y2="4%" spreadmethod="repeat">
                        <stop offset="0%" stop-color="#e62915" />
                        <stop offset="50%" stop-color="#e62915" />
                        <stop offset="51%" stop-color="#fff" />
                        <stop offset="99%" stop-color="#fff" />
                        <stop offset="100%" stop-color="#e62915" />
                    </lineargradient>
                </defs>
                <text y="1.2em">Hover Me</text>
            </svg>
        </a>
    </div>
    <div class="headingWrapper">
        <a href="#" class="header header--raiseUp header--svg">
            <svg>
                <defs>
                    <lineargradient id="striped" x1="0" x2="0" y1="0%" y2="4%" spreadmethod="repeat">
                        <stop offset="0%" stop-color="#e62915" />
                        <stop offset="50%" stop-color="#e62915" />
                        <stop offset="51%" stop-color="#fff" />
                        <stop offset="99%" stop-color="#fff" />
                        <stop offset="100%" stop-color="#e62915" />
                    </lineargradient>
                </defs>
                <text y="1.2em">Hover Me</text>
            </svg>
        </a>
    </div>

css3代码：

@charset "UTF-8";
* {
  box-sizing: border-box;
}

body {
  font-size: 62.5%;
}

h1, h2, h3 {
  font-family: ‘PT Sans‘, sans-serif;
  text-transform: uppercase;
}

h1 {
  font-size: 2.4em;
  background-color: #292929;
  text-align: center;
  padding: 20px;
  margin: 0;
  color: #fff;
}
h1 a {
  display: block;
  margin-top: 10px;
  text-transform: none;
  color: #aaa;
  font-size: 16px;
  text-decoration: none;
}

h2 {
  font-size: 1.6em;
  margin: 0;
  padding: 10px;
  border-top: 1px solid #ccc;
}

h3 {
  margin: 0;
  padding: 10px;
}

.headingOuter {
  background: #f1f1f1;
  text-align: center;
  margin-top: 30px;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
}
.headingOuter:first-child {
  margin-top: 0;
}
h1 + .headingOuter {
  margin-top: 10px;
}

.headingWrapper {
  text-align: center;
  background-color: #fff;
  padding: 10px;
}

.header {
  display: inline-block;
  text-align: center;
  font-family: ‘Francois One‘, Helvetica, Arial, sans-serif;
  font-size: 96px;
  color: #e7e7e7;
  text-decoration: none;
  text-shadow: 1.5px 1.5px 0 #cac6c5, -1.5px -1.5px 0 #cac6c5, -1.5px -1.5px 0 #cac6c5, -1.5px 1.5px 0 #cac6c5, 1.5px -1.5px 0 #cac6c5;
  transition: all 400ms ease-in-out;
}

.header--pushDown {
  text-shadow: 1.5px 1.5px 0 #333, 0px 1.5px 0 #333, -1.5px -1.5px 0 #333, -1.5px -1.5px 0 #333, -1.5px 1.5px 0 #333, 1.5px -1.5px 0 #333, 0.77782px 0.77782px 0 #aaaaaa, 1.55563px 1.55563px 0 #aaaaaa, 2.33345px 2.33345px 0 #aaaaaa, 3.11127px 3.11127px 0 #aaaaaa, 3.88909px 3.88909px 0 #aaaaaa, 4.6669px 4.6669px 0 #aaaaaa, 5.44472px 5.44472px 0 #aaaaaa, 6.22254px 6.22254px 0 #aaaaaa, 7.00036px 7.00036px 0 #aaaaaa, 7.77817px 7.77817px 0 #aaaaaa;
}
.header--pushDown:hover {
  transform: translate(9px, 9px);
  text-shadow: 1.5px 1.5px 0 #cac6c5, -1.5px -1.5px 0 #cac6c5, -1.5px -1.5px 0 #cac6c5, -1.5px 1.5px 0 #cac6c5, 1.5px -1.5px 0 #cac6c5;
}

.header--raiseUp:hover {
  transform: translate(-9px, -9px);
  text-shadow: 1.5px 1.5px 0 #333, 0px 1.5px 0 #333, -1.5px -1.5px 0 #333, -1.5px -1.5px 0 #333, -1.5px 1.5px 0 #333, 1.5px -1.5px 0 #333, 0.77782px 0.77782px 0 #aaaaaa, 1.55563px 1.55563px 0 #aaaaaa, 2.33345px 2.33345px 0 #aaaaaa, 3.11127px 3.11127px 0 #aaaaaa, 3.88909px 3.88909px 0 #aaaaaa, 4.6669px 4.6669px 0 #aaaaaa, 5.44472px 5.44472px 0 #aaaaaa, 6.22254px 6.22254px 0 #aaaaaa, 7.00036px 7.00036px 0 #aaaaaa, 7.77817px 7.77817px 0 #aaaaaa;
}

.header--shadow:hover {
  transform: translate(5px, 0);
}
.header--shadow.header--raiseUp:hover {
  transform: translate(-5px, 0);
}

.color-bright {
  background-color: #ebaca5;
}
.color-bright .header {
  color: #f89bb4;
  text-shadow: 1.5px 1.5px 0 #d38076, -1.5px -1.5px 0 #d38076, -1.5px -1.5px 0 #d38076, -1.5px 1.5px 0 #d38076, 1.5px -1.5px 0 #d38076;
}
.color-bright .header--pushDown {
  text-shadow: 1.5px 1.5px 0 #fff, 0px 1.5px 0 #fff, -1.5px -1.5px 0 #fff, -1.5px -1.5px 0 #fff, -1.5px 1.5px 0 #fff, 1.5px -1.5px 0 #fff, 0.77782px 0.77782px 0 #e62915, 1.55563px 1.55563px 0 #e62915, 2.33345px 2.33345px 0 #e62915, 3.11127px 3.11127px 0 #e62915, 3.88909px 3.88909px 0 #e62915, 4.6669px 4.6669px 0 #e62915, 5.44472px 5.44472px 0 #e62915, 6.22254px 6.22254px 0 #e62915, 7.00036px 7.00036px 0 #e62915, 7.77817px 7.77817px 0 #e62915;
}
.color-bright .header--pushDown:hover {
  text-shadow: 1.5px 1.5px 0 #d38076, -1.5px -1.5px 0 #d38076, -1.5px -1.5px 0 #d38076, -1.5px 1.5px 0 #d38076, 1.5px -1.5px 0 #d38076;
}
.color-bright .header--raiseUp:hover {
  text-shadow: 1.5px 1.5px 0 #fff, 0px 1.5px 0 #fff, -1.5px -1.5px 0 #fff, -1.5px -1.5px 0 #fff, -1.5px 1.5px 0 #fff, 1.5px -1.5px 0 #fff, 0.77782px 0.77782px 0 #e62915, 1.55563px 1.55563px 0 #e62915, 2.33345px 2.33345px 0 #e62915, 3.11127px 3.11127px 0 #e62915, 3.88909px 3.88909px 0 #e62915, 4.6669px 4.6669px 0 #e62915, 5.44472px 5.44472px 0 #e62915, 6.22254px 6.22254px 0 #e62915, 7.00036px 7.00036px 0 #e62915, 7.77817px 7.77817px 0 #e62915;
}

svg {
  line-height: 1.2;
  width: 410px;
  height: 1.5em;
}

.header--svg text,
.header--svg stop {
  transition: all 350ms ease-in-out;
}
.header--svg text {
  text-transform: uppercase;
  fill: url(#striped);
  text-shadow: 1.5px 1.5px 0 #cac6c5, -1.5px -1.5px 0 #cac6c5, -1.5px -1.5px 0 #cac6c5, -1.5px 1.5px 0 #cac6c5, 1.5px -1.5px 0 #cac6c5;
}
.header--svg:hover text {
  text-shadow: 1.5px 1.5px 0 #333, 0px 1.5px 0 #333, -1.5px -1.5px 0 #333, -1.5px -1.5px 0 #333, -1.5px 1.5px 0 #333, 1.5px -1.5px 0 #333, 0.77782px 0.77782px 0 #aaaaaa, 1.55563px 1.55563px 0 #aaaaaa, 2.33345px 2.33345px 0 #aaaaaa, 3.11127px 3.11127px 0 #aaaaaa, 3.88909px 3.88909px 0 #aaaaaa, 4.6669px 4.6669px 0 #aaaaaa, 5.44472px 5.44472px 0 #aaaaaa, 6.22254px 6.22254px 0 #aaaaaa, 7.00036px 7.00036px 0 #aaaaaa, 7.77817px 7.77817px 0 #aaaaaa;
}
.header--svg stop {
  stop-color: #e7e7e7;
}
.header--svg:hover stop {
  stop-color: #fff;
}
.header--svg:hover stop:nth-child(2), .header--svg:hover stop:nth-child(3) {
  stop-color: #d38076;
}

.color-bright .header--svg text {
  fill: url(#stripedColor);
  text-shadow: 1.5px 1.5px 0 #d38076, -1.5px -1.5px 0 #d38076, -1.5px -1.5px 0 #d38076, -1.5px 1.5px 0 #d38076, 1.5px -1.5px 0 #d38076;
}
.color-bright .header--svg:hover text {
  text-shadow: 1.5px 1.5px 0 #fff, 0px 1.5px 0 #fff, -1.5px -1.5px 0 #fff, -1.5px -1.5px 0 #fff, -1.5px 1.5px 0 #fff, 1.5px -1.5px 0 #fff, 0.77782px 0.77782px 0 #e62915, 1.55563px 1.55563px 0 #e62915, 2.33345px 2.33345px 0 #e62915, 3.11127px 3.11127px 0 #e62915, 3.88909px 3.88909px 0 #e62915, 4.6669px 4.6669px 0 #e62915, 5.44472px 5.44472px 0 #e62915, 6.22254px 6.22254px 0 #e62915, 7.00036px 7.00036px 0 #e62915, 7.77817px 7.77817px 0 #e62915;
}
.color-bright stop {
  stop-color: #f89bb4;
}
.color-bright .header--svg:hover stop:nth-child(2), .color-bright .header--svg:hover stop:nth-child(3) {
  stop-color: #ed5751;
}

via：http://www.w2bc.com/Article/18183

时间： 2024-10-10 00:02:36

分享十个CSS3鼠标滑过文字动画特效的相关文章

10大炫酷的HTML5文字动画特效欣赏

文字是网页中最基本的元素,在CSS2.0时代,我们只能在网页上展示静态的文字,只能改变他的大小和颜色,显得枯燥无味.随着HTML5的发展,现在网页中的文字样式变得越来越丰富了,甚至出现了文字动画,HTML5和CSS3的强大之处就在于此.本文分享的10款炫酷的HTML5文字动画特效非常不错,一起来看看吧. 1.HTML5 Canvas粒子效果文字动画特效之前我们分享过很多超酷的文字特效,其中也有利用HTML5和CSS3的.今天我们要来分享一款基于HTML5 Canvas的文字特效,输入框中输入想

炫酷CSS3鼠标滑过图片标题文字动画特效

这是一款使用CSS3制作的鼠标滑过图片标题文字动画特效.该特效在鼠标滑过图片的时候,会展现遮罩层,并在遮罩层上以旋转的方式使图片描述文字逐一展现. 在线预览源码下载使用方法 HTML结构 DEMO中使用bootstrap的网格系统来进行布局.整个图片放置在一个.box容器中,它里面的.box-content是图片的描述文本层. <div class="box"> <img src="img/1.jpg" /> <div clas

css3鼠标滑过图片文字动画特效

在线预览源码下载 css3鼠标滑过图片文字动画特效是一款常用的5种纯css3实现的鼠标滑过图片动画效果.悬停效果有:1.鼠标悬停图片变大文字消失.2.鼠标悬停文字消失.3.鼠标悬停整体旋转.4.鼠标悬停整体旋转放大.5.鼠标悬停整体上升加入前端爱好者QQ群(123235875) 点击加群,共同交流进度!

12种炫酷的CSS3鼠标滑过图片遮罩层动画特效

InContent是一款效果非常炫酷的CSS3鼠标滑过图片遮罩层动画特效.这组特效共有12种不同的鼠标滑过图片效果,分为滑动.旋转和翻转3大类.它可以在支持CSS3 transition和transform属性的现代浏览器中正常工作. 在线预览源码下载使用方法使用该CSS3鼠标滑过图片遮罩层动画特效需要在页面中引入由SASS编译的sass-compiled.css文件或由LESS编译的less-compiled.css文件. <link rel="stylesheet"

CSS3鼠标滑过动画线条边框特效

基于CSS属性animation动画制作,效果流畅弹性十足效果展示 http://hovertree.com/texiao/css3/32/ 源码下载:http://hovertree.com/h/bjaf/fo1jlmhi.htm 效果图如下: 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="renderer" co

CSS3实战开发: 手把手教大家实战开发鼠标划过图片动画特效

各位网友大家好,我是陌上花会开,当然大家也可以叫我陌陌.今天这篇文章,我将手把手带领大家实战开发一个鼠标划过图片时的动画特效.在这里我不会给大家提供案例的源码下载,但是本人可以保证,只要大家跟着我的思路,一步步将代码复制到本地,一定会得到同样的运行效果.希望大家明白我的用心.好了不废话,直接进入今天的主题吧. 在今天这个案例里,我准备3个素材,一张背景图,两张风景图片.这个大家可以到网上自行下载. 在写代码之前,我先给大家展示一下,动画特效的效果图. 鼠标花过前: 当鼠标划过图片时,图片将逐渐变

分享web前端七款HTML5 Loading动画特效集锦

以前我们大部分的Loading动画都是利用gif图片实现的,这种图片实现Loading动画的方法虽然也很不错,但是作为HTML5开发者来说,如果能利用HTML5和CSS3实现这些超酷的Loading动画,那将是一件非常痛快的事情. 1.HTML5 Canvas发光Loading动画之前我们分享过很多基于CSS3的Loading动画效果,相信大家都很喜欢.今天我们要来分享一款基于HTML5 Canvas的发光Loading加载动画特效.Loading旋转图标是在canvas画布上绘制的,整个lo

一款jquery和css3实现的卡通人物动画特效

之前为大家分享了很多jquery和css3的动画实例.今天给大家带来一款非常炫的jquery和css3实现的卡通人物动画特效.效果图如下: 在线预览源码下载实现的代码. html代码: <div class="wrapper"> <div class="border-circle" id="one"> </div> <div class="border-circle" id=&

基于jQ+CSS3页面滚动内容元素动画特效

今天给大家分享一款基于jQ+CSS3页面滚动内容元素动画特效.这是一款基于jQuery+CSS3实现的页面滚动代码.该实例适用于适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器. 在线预览源码下载实现的代码. html代码: <div class="htmleaf-container"> <div class="container"> <h2 class