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

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

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

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

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

这个效果我已经放在了“ 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. [CQOI2009]dance跳舞

    每个人拆成两个点,一个表示接受喜欢的,一个表示不接受喜欢的,(男yes,男no,女yes,女no) 男yes->男no,容量为k:女no->女yes,容量为k 男女喜欢,则男yes-> ...

  2. 服务器 Disk full

    General error: 1021 Disk full (/tmp/#sql_24a3_0.MAI); waiting for someone to free some space... (err ...

  3. body里面的onload和window.onload的区别

    区别:body里面的onload是在“页面加载完成后执行的动作” window里面的onload是在“页面加载时执行的动作” 例子:在html页面中有一个大图片,想要在图片显示出来后提示一个消息框“图 ...

  4. Python解析Yahoo的XML格式的天气预报数据

    以下是Yahoo天气预报接口xml格式数据: <rss xmlns:yweather="http://xml.weather.yahoo.com/ns/rss/1.0" xm ...

  5. The method queryForMap(String, Object...) from the type JdbcTemplate refers to the missing type DataAccessException

    Add spring-tx jar of your spring version to your classpath.

  6. videojs双击全屏幕观看，videojs动态加载视频

    前段时间闲来无事弄了弄video.js,感觉蛮好玩,能应用到各个应用端,自己在最后玩耍的时候,需要注意的只剩下两方面了,1,动态加载播放视频内容2,双击全屏观看, var urlRoad = &quo ...

  7. Python基础-week01

    本节内容摘要:http://www.cnblogs.com/Jame-mei Python介绍 Python是怎么样的语言? Python 2 or 3? 安装 Hello World程序 变量 用户 ...

  8. 原生拖拽js利用localstorage保存位置

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. jsp的两种跳转方式和区别

    1.forward跳转: 服务器端跳转,地址栏不改变: 执行到跳转语句后马上无条件跳转,之后的代码不再执行(跳转之前一定要释放全部资源): request设置的属性在跳转后的页面仍可以使用: 使用&l ...

  10. 笔记：Maven 依赖及配置详解

    dependencies 配置节,主要用于配置项目依赖的其他包,其子节点 dependency 用来配置具体依赖包,有groupId.artifactId.version.scope等子节点来说明,配 ...