您的位置：首页 > Web前端 > CSS

css3 a标签效果

2017-03-24 22:01 169 查看

在https://tympanus.net/Development/CreativeLinkEffects/#cl-effect-5看到一些不错的标签hover效果，自己试着实现了几个（本人菜鸟一枚）

预览

主要使用::after、::before伪元素实现，比较麻烦的是第三个CSS3d效果，要设置的比较多。

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
html,body{
height: 100%;
width: 100%;
font-family: 'Raleway', sans-serif;
}
*{
padding: 0;
margin: 0;
}
.item{
width: 100%;
height: 120px;
text-align: center;
}
.item:nth-child(odd){
background-color: #0e83cd;
}
.item:nth-child(even){
background-color: #435a6b;
}
.title{
font-size: 25px;
position: absolute;
line-height: 100px;
left: 50px;
}
*[id^="a"]{
color: white;
font-size: 1.5em;
cursor: pointer;
width: 150px;
height: 40px;
line-height: 40px;
margin-top: 30px;
position: absolute;
display: inline-block;
}
/*
* 效果1
*/
#a1::before{
content: "[";
margin-right: 0;
opacity: 0;
transition: margin-right 0.3s, opacity 0.2s;
}
#a1::after{
content: "]";
margin-left: 0;
opacity: 0;
transition: margin-left 0.3s, opacity 0.2s;
}
#a1:hover::before{
opacity: 1;
margin-right: 20px;
}
#a1:hover::after{
opacity: 1;
margin-left: 20px;
}
/*
* 效果2
*/
#a2{
position: absolute;
}
#a2::after{
margin-top: -10px;
opacity: 0;
position: absolute;
top: 100%;
left: 0;
content: "";
width: 100%;
height: 5px;
background-color: #0E83CD;
transition: margin-top 0.3s, opacity 0.2s;
}
#a2:hover::after{
margin-top: 0;
opacity: 1;
}
/*
* 效果3
*/
.item:last-child{
/**
* 注意设置css3d的：perspective、transform-style
*/
perspective: 1000px;
-webkit-perspective: 1000px;
}
.item #container{
position: absolute;
left: 50%;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform: rotateX(0deg) translate3d(0,0,0);
-webkit-transform: rotateX(0deg) translate3d(0,0,0);
/*origin是以元素自身大小为基础，要注意父元素与子元素的空间位置关系*/
/*此处和hover都需要设置origin，因为失去hover后，也是一个3d变换*/
transform-origin: 0 50px 0;
-webkit-transform-origin: 0 50px 0;
transition: transform 0.3s;
-webkit-transition: -webkit-transform 0.3s;
}
#a3{
position: absolute;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
background-color: #435a6b;
transform: translate3d(0,0,20px);
-webkit-transform: translate3d(0,0,20px);
}
#a3::after{
content: "Link";
position: absolute;
top: 100%;
left: 0;
background-color: gray;
width: 100%;
height: 100%;
transform: rotateX(-90deg);
-webkit-transform: rotateX(-90deg);
transform-origin: top;
-webkit-transform-origin: top;
}
#container:hover{
transform: rotateX(90deg) translate3d(0,0,0);
-webkit-transform: rotateX(90deg) translate3d(0,0,0);
/*origin是以元素自身大小为基础，要注意父元素与子元素的空间位置关系*/
transform-origin: 0 50px 0;
-webkit-transform-origin: 0 50px 0;
}
/**
* 效果4
*/
#a4{
overflow: hidden;
}
#a4>span{
display: block;/*inline不能设置margin*/
margin-top:0px;
opacity: 1;
transition: margin-top 0.3s;
}
#a4:hover>span{
margin-top: -40px;
}
#a4>span::after{
position: absolute;
top: 100%;
width: 100%;
left: 0;
margin-top: -10px;
content: "Link";
font-weight: bolder;
transition: margin-top 0.3s, opacity 0.2s;
}
#a4:hover>span::after{
margin-top: -40px;
}
</style>
</head>
<body>
<div class="item">
<div class="title"><span>1</span></div>
<a id="a1">Link</a>
</div>
<div class="item">
<div class="title"><span>2</span></div>
<a id="a2">Link</a>
</div>
<div class="item">
<div class="title"><span>3</span></div>
<div>
<div id="container"><a id="a3">Link</a></div>
</div>
</div>
<div class="item">
<div class="title"><span>4</span></div>
<a id="a4"><span>Link</span></a>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css hover

相关文章推荐

新的分享

章节导航