【CSS3】纯css3悬停文字线条边框动画特效

最新推荐文章于 2022-09-13 15:48:09 发布
最新推荐文章于 2022-09-13 15:48:09 发布
阅读量2.1k 收藏 11
点赞数 1
分类专栏： CSS 文章标签： css3

演示效果如下：

这里写图片描述

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>按钮悬停动画</title>

<style>
html, body {
  color: white;
  background: #323232;
  font-weight: lighter;
}

h1, h2, h3, h4 {
  font-family: "Oswald";
}

.wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100vw;
  height: 100vh;
}
.wrapper .row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 10px 0;
}
.wrapper h2 {
  font-size: 1.8em;
}

.button {
  position: relative;
  cursor: pointer;
  color: white;
  font-family: "Lato";
  font-size: 1.5em;
  padding: 0.5em 1em 0.65em;
  margin: 0 10px;
}
.button .inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.button:nth-of-type(1):before, .button:nth-of-type(1):after, .button:nth-of-type(1) .inner:before, .button:nth-of-type(1) .inner:after {
  background-color: #ffa726;
}
.button:nth-of-type(2):before, .button:nth-of-type(2):after, .button:nth-of-type(2) .inner:before, .button:nth-of-type(2) .inner:after {
  background-color: #26a69a;
}
.button:nth-of-type(3):before, .button:nth-of-type(3):after, .button:nth-of-type(3) .inner:before, .button:nth-of-type(3) .inner:after {
  background-color: #7e57c2;
}
.button:before, .button:after, .button .inner:before, .button .inner:after {
  position: absolute;
  content: "";
  display: block;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
.button.horizontal:before, .button.horizontal:after, .button.both:before, .button.both:after {
  left: 0;
  width: 100%;
  height: 2px;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
}
.button.horizontal .inner:before, .button.horizontal .inner:after, .button.both .inner:before, .button.both .inner:after {
  top: 0;
  width: 2px;
  height: 100%;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
}
.button.horizontal .inner:before, .button.both .inner:before {
  left: 0;
}
.button.horizontal .inner:after, .button.both .inner:after {
  right: 0;
}
.button.horizontal .inner:hover:before, .button.horizontal .inner:hover:after, .button.both .inner:hover:before, .button.both .inner:hover:after {
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
}
.button.horizontal:before, .button.both:before {
  top: 0;
}
.button.horizontal:after, .button.both:after {
  bottom: 0;
}
.button.horizontal:hover:before, .button.horizontal:hover:after, .button.both:hover:before, .button.both:hover:after {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
}
.button.horizontal:hover .inner:before, .button.horizontal:hover .inner:after, .button.both:hover .inner:before, .button.both:hover .inner:after {
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
}
.button.horizontal.clockwise .inner:before, .button.both.clockwise .inner:before {
  -webkit-transform-origin: top center;
          transform-origin: top center;
}
.button.horizontal.clockwise .inner:after, .button.both.clockwise .inner:after {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}
.button.horizontal.clockwise:before, .button.both.clockwise:before {
  -webkit-transform-origin: right center;
          transform-origin: right center;
}
.button.horizontal.clockwise:after, .button.both.clockwise:after {
  -webkit-transform-origin: left center;
          transform-origin: left center;
}
.button.horizontal.clockwise:hover .inner:before, .button.both.clockwise:hover .inner:before {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}
.button.horizontal.clockwise:hover .inner:after, .button.both.clockwise:hover .inner:after {
  -webkit-transform-origin: top center;
          transform-origin: top center;
}
.button.horizontal.clockwise:hover:before, .button.both.clockwise:hover:before {
  -webkit-transform-origin: left center;
          transform-origin: left center;
}
.button.horizontal.clockwise:hover:after, .button.both.clockwise:hover:after {
  -webkit-transform-origin: right center;
          transform-origin: right center;
}
.button.horizontal.counterclockwise .inner:before, .button.both.counterclockwise .inner:before {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}
.button.horizontal.counterclockwise .inner:after, .button.both.counterclockwise .inner:after {
  -webkit-transform-origin: top center;
          transform-origin: top center;
}
.button.horizontal.counterclockwise:before, .button.both.counterclockwise:before {
  -webkit-transform-origin: left center;
          transform-origin: left center;
}
.button.horizontal.counterclockwise:after, .button.both.counterclockwise:after {
  -webkit-transform-origin: right center;
          transform-origin: right center;
}
.button.horizontal.counterclockwise:hover .inner:before, .button.both.counterclockwise:hover .inner:before {
  -webkit-transform-origin: top center;
          transform-origin: top center;
}
.button.horizontal.counterclockwise:hover .inner:after, .button.both.counterclockwise:hover .inner:after {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}
.button.horizontal.counterclockwise:hover:before, .button.both.counterclockwise:hover:before {
  -webkit-transform-origin: right center;
          transform-origin: right center;
}
.button.horizontal.counterclockwise:hover:after, .button.both.counterclockwise:hover:after {
  -webkit-transform-origin: left center;
          transform-origin: left center;
}
.button.vertical:before, .button.vertical:after {
  top: 0;
  width: 2px;
  height: 100%;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
}
.button.vertical:before {
  left: 0;
}
.button.vertical:after {
  right: 0;
}
.button.vertical:hover:before, .button.vertical:hover:after {
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
}
.button.vertical.clockwise:before {
  -webkit-transform-origin: top center;
          transform-origin: top center;
}
.button.vertical.clockwise:after {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}
.button.vertical.clockwise:hover:before {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}
.button.vertical.clockwise:hover:after {
  -webkit-transform-origin: top center;
          transform-origin: top center;
}
.button.vertical.counterclockwise:before {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}
.button.vertical.counterclockwise:after {
  -webkit-transform-origin: top center;
          transform-origin: top center;
}
.button.vertical.counterclockwise:hover:before {
  -webkit-transform-origin: top center;
          transform-origin: top center;
}
.button.vertical.counterclockwise:hover:after {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}

.codepen-link {
  position: absolute;
  bottom: 30px;
  right: 30px;
  height: 40px;
  width: 40px;
  z-index: 10;
  border-radius: 50%;
  box-sizing: border-box;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/logo.jpg");
  background-position: center center;
  background-size: cover;
  opacity: 0.5;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}
.codepen-link:hover {
  opacity: 0.8;
  box-shadow: 0 0 6px #efefef;
}
</style>
</head>
<body>

<div class="wrapper">
  <h2>Clockwise</h2>
  <div class="row">
    <div class="button clockwise horizontal">Horizontal</div>
    <div class="button clockwise vertical">Vertical</div>
    <div class="button clockwise both">Both
      <div class="inner"></div>
    </div>
  </div>
  <h2>Counter-clockwise</h2>
  <div class="row">
    <div class="button counterclockwise horizontal">Horizontal</div>
    <div class="button counterclockwise vertical">Vertical</div>
    <div class="button counterclockwise both">Both
      <div class="inner"></div>
    </div>
  </div>
</div>

</body>
</html>
邹大叔
关注
专栏目录
纯css鼠标悬停后，边框动画
qq_41046662的博客
06-15 892
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>鼠标悬停边框动画</title> <style> .main{ ...
css3鼠标悬停动画线条边框特效
Mini_小仙女的博客
12-06 1286
鼠标滑过边框动画效果，使用css3结合jquery。 先上效果图： 代码如下： // html <div class="hotflagson"> <img src="images/14477454559904.png" alt="Swarovski施华洛世奇"> <div class="hotmiddle"> <a href="#"&...
纯CSS3炫酷元素边框线条动画特效
12-21
纯CSS3炫酷元素边框线条动画特效 ，自 动 循 环运动。
CSS3悬停图片线条边框动画特效.zip
07-04
CSS3悬停图片线条边框动画特效是一款鼠标经过内容区时，显示边框线条特效。
jQuery/CSS3 图片边框线条变换动画
w1366352655的博客
11-30 363
jQuery/CSS3 图片边框线条变换动画 在线演示 本地下载 posted @ 2018-11-30 23:11 栖息地 阅读(...) 评论(...) 编辑 收藏 ...
css3边框交替动画_10个酷炫图像悬停动画特效「值得收藏」
weixin_36340926的博客
12-30 538
作者：semlinker转发链接：https://mp.weixin.qq.com/s/p0U8sVLtWd78CLc8kM22FQ前言本文小编将给大家介绍10个 图像悬停效果，希望小编精心录制的十个 Gif 动画能让大家眼前一亮，当然更希望这些特效能给大家设计图片悬停效果带来一些 「”灵感“」。感知方向的悬停效果❝示例说明：该示例会根据鼠标移入的方向展示不同的动画效果。示例来源：Noel Del...
纯css3悬停文字线条边框动画特效
09-08
【纯CSS3悬停文字线条边框动画特效】是一种利用CSS3的新特性来实现的交互效果，它在鼠标悬停在文字上时，能够展示出动态的线条边框动画，为网页增添生动有趣的视觉体验。这个特效主要依赖于CSS3的选择器、伪类和动画...
纯CSS3实现的鼠标悬停文字线条边框动画特效源码.zip
最新发布
10-31
这个"纯CSS3实现的鼠标悬停文字线条边框动画特效源码.zip"文件提供了一种创新的方法，通过CSS3来设计文字的动态边框效果，特别是当鼠标悬停在文本上时。这种特效可以增强用户界面的互动性和视觉吸引力，常见于网页...
CSS3悬停图片线条边框动画特效
06-24
不过，这些通常不涉及CSS3的线条边框动画，而是对CSS3动画的扩展。 在提供的压缩包文件"jiaoben5073"中，可能包含了一个示例代码或模板，你可以根据这个代码来学习和实现类似的效果。记得解压并查看其中的HTML和CSS...
纯css实现动态边框的示例代码
11-21
背景 这几天工作中遇到一个交互需求，要求实现一个效果，当鼠标移入一个元素的时候，元素出现一个动态的边框，如图：   动态边框 思路 看到这个效果，我首先想到的是设置元素的border属性，可惜border不能设置长度，无法实现动效。另外一种实现思路是添加四个div来分别实现上下左右的边框效果，虽然可行，但是要添加四个额外元素，有点儿得不偿失的感觉。难道就没有更好的解决方案了… 就在我绞尽脑汁的时候，灵光乍现，为什么不尝试一下用CSS3多背景来模拟边框呢，背景是可以设置长度的，通过修改背景的长度，就可以实现要求的动效。说干就干，赶快从网上搜索一下CSS3背景的相关知识。 CSS3 Backgro
6种炫酷的CSS3按钮边框动画特效
12-13
这是一款效果非常炫酷的CSS3按钮边框动画特效。这组按钮边框动画共有6种不同的效果。当鼠标滑过按钮的时候，按钮的边框会以不同的方式进行各种动画，效果非常的炫酷。
纯CSS3绘制太阳系行星动画运动轨迹
09-08
纯CSS3绘制太阳系行星动画运动轨迹
CSS3鼠标悬停边框线条动画按钮
weixin_33979745的博客
12-02 227
在线演示 本地下载
CSS鼠标悬停div加边框效果
热门推荐
别在熬夜了！
09-23 1万+
css实现鼠标悬停时图片加边框效果 .demo{background:white;margin:0 5px;width:170px;height:170px;} .demo:hover{border:1px red solid;} .demo:hover{width:166px;height:166px;border:2px solid #D94600;}
CSS实现文字压在边线上的效果，fieldset与legend
weixin_30474613的博客
02-22 570
CSS实现文字压在边线上的效果，fieldset与legend 要达到以上的效果，我们可以在一个区域里用背景图片去做，其实在xhtml里有这样的标签可以去用。 插入代码： <fieldset> 域（Defines a fieldset） <legend> 域标题（Defines a title in...
css实现hover边框动画
Rex的博客
09-13 586
css实现hover边框动画
纯css实现鼠标悬停文字的汽泡提示
蘅潇嗜玉
03-20 7243
1 固定样式 <!--标签上加title属性--> <div class="tooltip" title="提示内容"></div> 2 伪类实现 <!--标签上自定义属性--> <td labelTooltip="提示内容">声乐</td> td { position: relative; } td:...
CSS3实现：鼠标悬停按钮边框特效
"一款利用CSS3实现的简单鼠标悬停按钮设计，特点在于按钮边框在鼠标悬停时由间断变为连续。" 在网页设计中，创建吸引人的交互元素可以提升用户体验。本文将介绍如何使用CSS3来制作一款具有独特效果的鼠标悬停按钮。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值