css3 a标签效果

来源：互联网发布：linux 修改mac地址编辑：程序博客网时间：2024/06/05 09:08

在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>

0 0