偶然的机会发现的这个东东

这几天做公司的官网 老板突然说出了一个外国网站 我就顺手搜了

并没有发现他说的高科技 但是一个东西深深地吸引了我

就是我下面要说的动画  这个好像不能放视频 我就简单的描述一下吧

比如 这个效果 鼠标触发之后 从左到右渐变颜色

这个效果我已经放在了“ jquery插件库 ” 如果你想看效果 可以直接去这个网站查看

网址：http://www.jq22.com/webqd4197

直接上代码

html代码

css代码

如果你完成了上面两步 那么恭喜你你成功的完成了这个动画

本文原创 转载请注明出处 谢谢！

css3动画 一行字鼠标触发 hover 从左到右颜色渐变的更多相关文章

  1. css3动画（transition）属性探讨

    在webapp引用开发中经常会用到css3动画效果,下面我们就一起探讨一下这个属性的使用. 在哪里定义动画效果? css3动画一般通过鼠标事件或者说状态定义动画,通常我们可以用CSS中伪类和js中的鼠 ...

  2. [转]WebKit CSS3 动画基础

    前几天在Qzone上看到css3动画,非常神奇,所以也学习了一下.首先看看效果http://www.css88.com/demo/css3_Animation/ 很悲剧的是css3动画现在只有WebK ...

  3. 学习笔记 第十四章 使用CSS3动画

    第14章   使用CSS3动画 [学习重点] 设计2D动画 设计3D动画 设计过渡动画 设计帧动画 能够使用CSS3动画功能设计页面特效样式 14.1  设计2D动画 CSS2D Transform表 ...

  4. css3的背景颜色渐变@线性渐变

    背景颜色渐变之线性渐变 语法形式: firefox浏览器 background:-moz-linear-gradient(position/deg,startColor,endColor); oper ...

  5. CSS3实现背景颜色渐变

    CSS3渐变色生成网站:http://gradients.glrzad.com/ 本文参考:前端设计之用CSS3做线性渐变效果http://webskys.com/css3/10.html 在CSS3 ...

  6. 鼠标悬停css3动画效果

    下载Demo 效果预览 html: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  7. 5个基于css3超炫的鼠标滑动按钮动画

    今天给大家分享5个基于css3超炫的鼠标滑动按钮动画.这5个按钮鼠标经过的时候有超炫的动画效果.这5个按钮适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之 ...

  8. 举重若轻流水行云，前端纯CSS3实现质感非凡的图片Logo鼠标悬停(hover)光泽一闪而过的光影特效

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_197 喜欢看电影的朋友肯定会注意到一个有趣的细节,就是电影出品方一定会在片头的Logo环节做一个小特效:暗影流动之间光泽一闪而过, ...

  9. CSS3 动画触发事件

    @keyframes mymove { 0% {top:0px; left:0px; background:red;} 25% {top:0px; left:100px; background:blu ...

随机推荐

  1. [BZOJ4291] [PA2015] Kieszonkowe

    Description 给定n个数,请从中选出若干个数,使得总和为偶数,请最大化这个总和.  Input 第一行包含一个正整数n(1<=n<=1000000). 第二行包含n个正整数a_1 ...

  2. AngularJS中Model和Controller传值问题

    最近由于工作原因,开始写点前端的东西.前两天刚开始了解AngularJS这门技术,当然,新手免不了会爬坑! 今天分享一篇关于--> 模型传参给Controller的实例: 需求: 具体是  首先 ...

  3. Python模块之hashlib模块、logging模块

    一.hashlib模块 hashlib模块介绍:hashlib这个模块提供了摘要算法,例如 MD5.hsa1 摘要算法又称为哈希算法,它是通过一个函数,把任意长度的数据转换为一个长度固定的数据串,这个 ...

  4. Injection of autowired dependencies failed

    error:org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'mainCo ...

  5. Scala编程快速入门系列（二）

    目    录 一.Scala概述 二.Scala数据类型 三.Scala函数 四.Scala集合 五.Scala伴生对象 六.Scala trait 七.Actor 八.隐式转换与隐式参数 九.Sca ...

  6. Java equals() 和hashCode()方法详解

    Java的Object类中定义了equals方法,Object类中的equals方法源代码如下,从源代码中可以看出Object类中的equals方法是用来返回判断两个对象是否指向同一个对象(引用地址) ...

  7. mui实现切换选项卡

    mui切换选项卡头目对应选项内容是webAPP应用最多的功能 引入mui文件: 引入mui-segmented-control类实现顶部头目: 引入mui-content-padded类加入各选项卡内 ...

  8. openstack中的环境准备

    openstack中环境准备基于Ubuntu系统 author:headsen chen   2017-10-13  11:51:50 个人原创,转载请注明作者,出处. 6 apt-get insta ...

  9. linux学习之路－－（四）文件，目录管理

    1.mkdir:创建空目录 -p: -v:verbose mkdir -pv /mnt/test/x/m  /mnt/test/y mkdir -pv /mnt/test/{x/m,y} 命令行展开: ...

  10. PHP教程-防止网站被刷票的小技巧

    在Web开发中,投票模块会经常出现.这样就使得防止刷票,成了至关重要的技术.以下是兄弟连教育www.itxdl.cn总结的一些防止刷票方法: 1. IP限制 这是使用的最多,也是最广泛,不可少的刷票限 ...