`

鼠标触发,从左到右渐变

阅读更多

 

 鼠标触发之后,从左到右渐变颜色

<!DOCTYPE html>
<html>
<head>
    <title>MyHtml</title>
    <meta charset="utf-8">
    <style type="text/css">
    	.box{
	      position: relative;
	    }
	    .animate{
	      color: #ed6868;
	      position: absolute;
	      top: 0;
	      left: 0;
	      font-size: 30px;
	      border-bottom:2px solid pink;
	    }
	    .animate:hover::before{
	      max-width: 100%;
	    }
	    .animate::before{
	      height: 40px;
	      position: absolute;
	      top: 0;
	      left: 0;
	      font-size: 30px;
	      overflow: hidden; 
	      max-width: 0;
	      color: #000;
	      content: attr(data-hover);
	      border-bottom:2px solid orange;
	      -webkit-transition: max-width 0.5s;
	      -moz-transition: max-width 0.5s;
	      transition: max-width 0.5s;
	    }
    </style>
</head>
<body>
 <div class="box">
    <a data-hover="公司简介" class="animate">公司简介</a>
  </div>
</body>
</html>

 

 

 

 

 

 

 

 

 

.

分享到:
评论

相关推荐

    Unity 判断鼠标悬浮在UI或3D物体上触发各种效果Demo

    Unity3D Demo,实现了 当鼠标进入离开3D物体的判断方法,及鼠标进入离开UI的判断方法,及鼠标进入UI后出现UI逐帧渐变效果

    JS实现点击登录弹出窗口同时背景色渐变动画效果

    主要介绍了JS实现点击登录弹出窗口同时背景色渐变动画效果,涉及JavaScript基于鼠标事件及时间函数定时触发形成渐变动画的相关技巧,需要的朋友可以参考下

    JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)

    主要介绍了JS+CSS实现鼠标经过弹出一个DIV框的实现方法,带缓冲渐变动画效果,涉及鼠标事件的响应及结合时间函数定时触发形成动画渐变效果的相关技巧,需要的朋友可以参考下

    NGUI 3.9.7 最新版

    unity最好用的GUI工具 -新:“去对撞机事件”选项...-修复:UIButton不再触发其OnClick通知从右和鼠标中键点击。 ——修复,修复时间0吞世代无法正常推进他们的时间。 -修复:长按提示修复不能正常显示在触摸屏的一半时间。

    Silverlight2.0功能展示Demo源码

    左,上,右,下) Tag - 保存一些额外的信息(System.Object类型) 9、Silverlight(11) - 2.0动画之ColorAnimation, DoubleAnimation, PointAnimation, 内插关键帧动画 介绍 Silverlight 2.0 动画: ColorAnimation - ...

    AXURE9最新版,小版本号3646,序列号可用(win版本)

    1. 调色板增加了渐变色的灵活调整,支持线性渐变和径向渐变,增加HSV拾取器的新颜色选择器。 2. 页面样式新增移动端尺寸,包含了安卓与IOS主流机型尺寸。 3. 画布取消了滚动栏(可能有些同学不适应了),增加负屏...

    css入门笔记

    取值:left左 right右 top上 bottom下 px (%)少用 取值:auto 则内容居中 2、外边距margin 6、背景颜色 1.背景色 属性:background: 取值:颜色 2.背景图片 属性:background-image:url(); 取值:url() ...

    CSS3发电机「CSS3 Generator」-crx插件

    一个方便的生成器,为您的所有CSS3需要从浏览器内部。 CSS3 Generator是一个方便的扩展,它将创建CSS所需的代码。 当前,它会为以下CSS3属性生成跨浏览器的代码(尽可能):-文本阴影-新建,现在可以添加多个阴影-...

    天乙智能图形SmartGraphX部件

    事件触发动作机制,可以表现图形间复杂运动变化的逻辑关系。 支持不规则形状选择焦点的显示。 支持图形画面的超级连接,便于切换。 支持位图文件(Bitmap)背景,多种背景显示方式。 开放型设计,使用ActiveX...

    天乙智能图形

    事件触发动作机制,可以表现图形间复杂运动变化的逻辑关系。 支持不规则形状选择焦点的显示。 支持图形画面的超级连接,便于切换。 支持位图文件(Bitmap)背景,多种背景显示方式。 开放型设计,使用ActiveX...

    CSS3中Transition动画属性用法详解

    这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。” transition属性的值包括以下四个:  •transition-property: 指定对HTML元素的哪个css属性进行过渡渐变...

    Visual C++编程技巧精选500例.pdf

    039 如何从文件对话框中获取文件扩展名? 040 如何从文件对话框中获取文件标题? 041 如何获取文件对话框选择的多个文件? 042 如何在程序启动时弹出文件打开对话框? 第4章 标题栏与菜单栏 043 如何获取标题栏高度? 044...

    易语言 茶凉专用模块

    子程序 到任意进制, 文本型, 公开, 可以将从二进制到三十六进制的数值随意进行转换(返回转换后的文本) .参数 被转换文本, 文本型, , 欲被转换的文本(不可以转换负数以及小数) .参数 被转换进制, 整数型, , 被转换...

    易语言程序免安装版下载

    修改BUG:矢量动画支持库中的“矢量编辑框”组件在光标位于组件右下角时按右光标键进入下一行会导致显示错误。 10. 修改BUG:矢量动画支持库中的“矢量编辑框”组件在光标位于组件左上角时按左光标键进入前一行...

    Visual C++编程技巧精选集 光盘

    5.如何使消息提示框的标题右对齐 6.如何在消息提示框中绘制表格 7.如何在消息提示框中设置图标 8.如何在消息提示框中显示问号图标 9.如何在消息提示框中设置按钮 10.如何在消息提示框中显示“是”、“否”按钮 11....

    Dreamweaver 扩展

    StyleApplier 表格的鼠标触发效果 checkform 表单验证插件 Realplayer 嵌入网页Real播放器插件 BannerImageBuilder 创建多图片随机显示 CloseCW 方便的插入一个关闭当前页面的按钮,可以选择按钮、图片、或者文字3种...

    JavaScript应用177例

    11.4.htm 从右至左排列的文字 11.5.htm 古汉语文字排版 11.6.htm 蒙古族文字排版 第12章(\cha12) 12.1.htm 文档颜色设置 12.2.htm 上次修改时间 12.3....

    C#编程经验技巧宝典

    58 &lt;br&gt;0081 文本中首字母改为大写 59 &lt;br&gt;0082 C#随机数的产生 59 &lt;br&gt;0083 身份证从15位升至18位算法 60 &lt;br&gt;0084 十进制数转二进制数的算法 60 &lt;br&gt;0085 十进制数转八进制数的算法 61...

Global site tag (gtag.js) - Google Analytics