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

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

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

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

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

这个效果我已经放在了“ 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. Java集合中的HashMap类

    jdk1.8.0_144 HashMap作为最常用集合之一,继承自AbstractMap.JDK8的HashMap实现与JDK7不同,新增了红黑树作为底层数据结构,结构变得复杂,效率变得更高.为满足自 ...

  2. linux系统文件系统重要知识介绍

    [root@Asterplus:~]$ls -lhitotal 48K3684713 -rw------- 1 root root 5.9K Jul 1 00:23 anaconda-ks.cfg36 ...

  3. 百度统计&友盟统计

    一.百度统计 登录百度站长统计账号-->管理 --->代码获取-->复制代码,如 <script> var _hmt = _hmt || []; (function() ...

  4. 关系型数据库工作原理-SQL解析(翻译自Coding-Geek文章)

    本文翻译自Coding-Geek文章:< How does a relational database work>.原文链接:http://coding-geek.com/how-data ...

  5. WebStorm配置Vue开发环境

    虽然最新版的前端开发利器WebStorm支持了Vue,但是大部分人的WebStorm依然是默认不支持Vue的老版本(比如之前的我),所以需要手动添加WebStorm对Vue的支持.要想让WebStor ...

  6. mysql 各类操作命令

    1.mysql 命令登陆 形式: mysql -u用户名 -p密码 mysql -uroot -proot 2.mysql 显示数据库 形式: show databases; 3.mysql 进入某一 ...

  7. nodejs mysql 数据查询例子

    1.安装nodejs 2.安装mysql  npm包 地址:https://github.com/felixge/node-mysql npm install mysql 3.相应API查看及调用: ...

  8. 学习java第一章

    本人是一名5年工作的人了,出来社会也比较早,工作经验比起刚刚出社会的大学生要和很多了,知道社会的现实与无奈,我为什么选择想学java昵,肯定受到了朋友的影响的,接下来就讲讲我学习java的过程. 1. ...

  9. Linux 如何使用echo指令向文件写入内容

    0.前言     本文总结如何使用echo命令向文件中写入内容,例如使用echo指令覆盖文件内容,使用echo指令向文件追加内容,使用echo指令往文件中追加制表符.     echo向文件中输出内容 ...

  10. Python中四种样式的99乘法表

    1.常规型. #常规型 i=1 while i<=9: j=1 while j<=i: print(''%d*%d=%2d''%(i,j,i*j),end='') i+=1 #等号只是用来 ...