请选择 进入手机版 | 继续访问电脑版

分享一些超炫的Hover效果

发表于 2016-05-29 18:17 显示全部楼层 27 500

本帖最后由 大版主 于 2016-5-30 00:04 编辑

                                                           0                                                           


0.gif


代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background: #e8e0da;
}
section{
width: 300px;
margin: 100px auto;
}
/* 设置字体大小,并且相对定位 */
.link {
position: relative;
font-size: 8em;
color: #9e9ba4;
display: inline-block;
}

/* 鼠标悬停时时字体的效果 */
.link--kukuri {
font-weight: bold;
overflow: hidden;
color: #c5c2b8;
}

.link--kukuri:hover {
color: #c5c2b8;
}


/* 鼠标没移上之前的默认效果 */
.link--kukuri::after {
content: '';   /* 在::after ::before 中一定要写content,就算是为空也要写 */
position: absolute;
height: 16px;
width: 100%;
top: 50%;
margin-top: -8px;
right: 0;
background: #F9F9F9;
-webkit-transform: translate3d(-100%,0,0);
transform: translate3d(-100%,0,0);
-webkit-transition: -webkit-transform 0.4s; /* 兼容chrome和Safari */
transition: transform 0.4s;   
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1); /* 兼容chrome和Safari */
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

/* 设置成三维图形,并且X轴偏移 */
.link--kukuri:hover::after {
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
}


.link--kukuri::before {
content: attr(data-letters); /* 悬停时显示的字样,在HTML中设置了 */
position: absolute;
z-index: 2; /* 因为悬停效果要遮盖住默认效果,所以设置了z-index */
overflow: hidden;
color: #424242;
white-space: nowrap;
width: 0%;
-webkit-transition: width 0.4s 0.3s;
transition: width 0.4s 0.3s; /* 动画执行所需的时间 */
}

.link--kukuri:hover::before {
width: 100%;
}
</style>
</head>
<body>
<section>
<p class="link link--kukuri" data-letters="KUKURI">KUKURI</p>
</section>>
</body>
</html>



                                                           1                                                           


1.gif


代码如下:


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background: #dcdcdc;
}

/* 注意这里是没有高的,因为下面span定位在section的bottom:0; */
section{
width: 360px;
margin: 100px auto;
position: relative;
}


.link--takiri {
font-style: italic;
font-family: 'Playfair Display', serif;
font-weight: bold;
font-size: 7em;
padding: 0 10px 20px;
-webkit-transition: color 0.5s;
transition: color 0.5s;
}

.link--takiri:hover {
color: #1e1a1b;
}

.link--takiri::before {
content: '';
position: absolute;
height: 36px;
width: 120%;
top: 50%; /* 让它在整个盒子居中的手法,先top给50%然后再mgt负值,这个值是盒子高度的一半 */
margin-top: -18px; /* 让它在整个盒子居中的手法 */
left: -10%;
z-index: -1; /* 为了不遮住默认效果 */
background: #F9F9F9;
-webkit-transform: rotate3d(0,0,1,45deg) scale3d(0,1,1);    /* 鼠标悬停过程的角度以及缩放 */
transform: rotate3d(0,0,1,45deg) scale3d(0,1,1);
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}

.link--takiri:hover::before {
-webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
}

.link--takiri span {
font-size: 20%;
position: absolute;
right: 15px;
color: #e53369;
bottom: 0;
opacity: 0; /* 默认先隐藏,opacity代表透明度,1是不透明,0是全透明,注意是没有带单位的 */
-webkit-transform: translate3d(-10px,-10px,0);
transform: translate3d(-10px,-10px,0);
-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;  /* 这里是透明转换之间所用的时间 */
transition: transform 0.5s, opacity 0.5s;
}

.link--takiri:hover span {
opacity: 1; /* 鼠标悬停的时候显示 */
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

/* 一些属性原因基本上一个都有说过,有不懂的童鞋留言问吧 */

</style>
</head>
<body>
<section>
<p class="link link--takiri">Takiri <span>Where do you want to be?</span></p>
</section>>
</body>
</html>


                                                           2                                                           


3.gif


代码如下:


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background: #576b67;
}

section{
width: 580px;
margin: 100px auto;
position: relative;
}


.link--surinami {
font-family: 'Playfair Display', serif;
font-size: 9em;
color: #3A4945;
}

.link--surinami::before,
.link--surinami::after {
content: '';
width: 100%;
height: 3px;
z-index: -1;
background: #3A4945;
position: absolute;
-webkit-transform: scale3d(0,1,1);
transform: scale3d(0,1,1);
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}

.link--surinami::before {
right: 0;
top: 0;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}

.link--surinami::after {
left: 0;
bottom: 0;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}

.link--surinami:hover::before,
.link--surinami:hover::after {
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
}

.link--surinami span {
position: relative;
-webkit-transition: color 0.5s;
transition: color 0.5s;
}

.link--surinami span::before,
.link--surinami span::after {
position: absolute;
color: #fff;
opacity: 0;
-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
transition: transform 0.5s, opacity 0.5s;
}

.link--surinami span::before {
content: attr(data-letters-l);
left: 0;
-webkit-transform: translate3d(-5px,0,0);
transform: translate3d(-5px,0,0);
}

.link--surinami span::after {
content: attr(data-letters-r);
right: 0;
-webkit-transform: translate3d(5px,0,0);
transform: translate3d(5px,0,0);
}

.link--surinami:hover span::before,
.link--surinami:hover span::after {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}


/* 刚做完作业,这个用途的备注就不写了,准备回去洗洗睡了→_→ */


</style>
</head>
<body>
<section>
<p class="link link--surinami"><span data-letters-l="SURI" data-letters-r="NAMI">SURINAMI</span></p>
</section>>
</body>
</html>



各位看官,如果觉得还不错的话点下下方的评分啊...

果然是明天有空再更啊,刚过0点就更了...做完作业写一个备注没多写就发出来了..晚上再补备注

评分

参与人数 3学分 +2 学币 +3 收起 理由
zi藤 + 1 赞一个!
Joe + 1 + 1 很给力!
xushuduo + 1 + 1 赞一个!

查看全部评分

回复 使用道具
举报

楼主大大,第一个事例中<p>标签中的data-letters这个属性是什么意思呢?

回复 支持 反对 使用道具
举报
无戒

发表于 02-25 01:59 显示全部楼层

回复 支持 反对 使用道具
举报
淡蓝心情

发表于 02-24 11:14 显示全部楼层

回复 支持 反对 使用道具
举报
sup

发表于 02-24 04:46 显示全部楼层

回复 支持 反对 使用道具
举报
愚人花园

发表于 02-24 04:44 显示全部楼层

必须给个赞!

回复 支持 反对 使用道具
举报
腐女大作战

发表于 02-24 02:48 显示全部楼层

回复 支持 反对 使用道具
举报
寒雪飘影

发表于 02-23 15:08 显示全部楼层

无需回复的,我们保持沉默,如需回复的,就回21个字!

回复 支持 反对 使用道具
举报
我不想静静

发表于 02-23 14:16 显示全部楼层

观后纵想法再多,也不如一句回复实在!

回复 支持 反对 使用道具
举报
Eileen

发表于 02-23 03:39 显示全部楼层

回复 支持 反对 使用道具
举报
123下一页

发表新文章
大版主

超级版主

200

学分

4239

学币

5458

积分

超级版主

Rank: 8Rank: 8

积分
5458

签到之王勋章关注小码哥教育公众号关注新浪微博小码哥一周年勋章活动达人勋章小码哥版主勋章前100注册用户勋章意见领袖勋章论坛荣誉内测勋章小码哥网页UI学员勋章论坛百帖达成勋章真土豪勋章勋章签到周冠军勋章签到月冠军勋章签到超新星勋章小码哥周年庆杯子小码哥周年庆纪念勋章小码哥周年庆手机壳小码哥周年庆鼠标垫小码哥周年庆T恤

Ta的主页 发消息
精华帖排行榜

精彩推荐

  • 关注小码哥教育