CSS3鼠标移入移出图片生成随机动画

HTML5+CSS3鼠标移入移出图片生成随机动画

今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画，我们先看最终效果图（截图为静态效果，做出来可是动态的哟）

左右旋转

上下移动

缩放

由于时间关系我就不一步步解析各段代码所代表含义，我这里就给出一些思路及关键代码：

1、首先使用ul li展现4张图片

本示例中不仅使用了图片，在图片表面还放置了一段“WEB”字样文字，用于与图片实现隐藏或显示效果，故html中每张图片上方加入：

2、CSS控制图片及文字透明度

本示例中一组图片与文字同时放在一个li里面，高度与宽度设置与li一样大，并使用绝对定位固定它们的位置：

默认将隐藏图片，只显示文字，鼠标放入li时显示图片，这里使用opacity透明度属性控制：

3、CSS3自定义动画

本示例中用css3定义了3种动画：

@keyframes rot

/*自定义旋转动画*/

{

0% 20% 40% 60% 80% 100% {

transform-origin: top center;

}

0% {

transform: rotate(0deg)

}

20% {

transform: rotate(-20deg)

}

40% {

transform: rotate(15deg)

}

60% {

transform: rotate(-10deg)

}

80% {

transform: rotate(5deg)

}

100% {

transform: rotate(0deg)

}

}

@keyframes top

/*自定义上下动画*/

{

0% {

top: 0

}

20% {

top: 20px

}

40% {

top: -15px

}

60% {

top: 10px

}

80% {

top: -5px

}

100% {

top: 0px

}

}

@keyframes sca

/*自定义缩放动画*/

{

0% {

transform: scale(1)

}

20% {

transform: scale(1.1)

}

40% {

transform: scale(0.9)

}

60% {

transform: scale(1.05)

}

80% {

transform: scale(0.95)

}

100% {

transform: scale(1)

}

}

使用css执行上述自定义动画：

4、Jquery生成随机动画

当鼠标移入ul li时，使用jquery随机产生上述3种自定义动画，这里使用hover 事件

HTML代码如下：

• WEB
  

• WEB
  

• WEB
  

• CSS代码如下：

  Jquery代码如下：

  注意事项：需要引入jquery文件，可以自行选择jquery版本

  好了，今天分享就到这里，以后还有更多哟，请大家一起来交流下

  CSS3关键帧动画

  CSS3关键帧动画 本文转载自创美优品，转载就保留此信息。我决定探索该地区的CSS3关键帧动画。的想法很简单-创造一种虚拟明信片。我住在巴黎，所以很明显我给你我的问候，从巴黎:)

  下载源文件 （。psd文件） 明信片从巴黎的。zip 1.9MB CSS3的动画支持：Chrome浏览器2 +，Safari 4的+，火狐5 +，iOS的Safari浏览器3.2和 Android 2.1系统+（源碎杂志）。 我们将3个要素：云中的动画（有三个层次的云），旋转法尔灯和艾菲尔铁塔闪闪发光。 的HTML结构其实很简单：

  Bonne Nuit PARIS !

  by PeHaa, Paris 2011

  我们将使用下面的图片（我将讨论一点点波光粼粼的效果），让我们先来完成的CSS样式表：

  动画云

  web前端培训教程：CSS3 的动画效果

  海文国际https://www.360docs.net/doc/a37298100.html, web前端培训教程：CSS3 的动画效果 本章主要探讨HTML5 中CSS3 的动画效果，可以通过类似Flash 那样的关键帧模式控制运行。 一．动画简介 CSS3 提供了类似Flash 关键帧控制的动画效果，通过animation 属性实现。那么之前的transition 属性只能通过指定属性的初始状态和结束状态来实现动画效果，有一定的局限性。 animation 实现动画效果主要由两个部分组成： 1.通过类似Flash 动画中的关键帧声明一个动画； 2.在animation 属性中调用关键帧声明的动画。 CSS3 提供的animation 是一个复合属性，它包含了很多子属性。如下表所示：

  海文国际https://www.360docs.net/doc/a37298100.html, 除了这9 个属性之外，动画效果还有一个重要的属性，就是关键帧属性： @keyframes。 它的作用是声明一个动画，然后在animation 调用关键帧声明的动画。 //基本格式，“name”可自定义 @keyframes name { /*...*/ } 二．属性详解 在讲解动画属性之前，先创建一个基本的样式。 //一个div 元素

  我是HTML5

  海文国际https://www.360docs.net/doc/a37298100.html, //设置CSS div { width: 200px; height: 200px; background-color: white; border: 1px solid green; } 1.@keyframes //创建动画的第一步，先声明一个动画关键帧。 @keyframesmyani { 0% { background-color: white; margin-left:0px; } 50% { background-color: black; margin-left:100px; } 100% { background-color: white; margin-left:0px;

  10款让人惊叹的html5动画效果

  10款让人惊叹的html5动画效果 这里介绍10款让人叹为观止的html5动画效果 1、15种html5+css3图片堆叠图片展示特效 这是一款html5和css3制作的图片堆叠图片展示特效，就像一幅扑克牌堆叠在一起，最开始只能看到一张，点击按钮后就会展开成几张，非常有意思。 2、html5 svg+css3制作图片边框运动动画效果

  一款使用html5 svg技术制作的图片边框运动动画效果，鼠标移动到图片上时，便会有几条线绕着边框运动，共有4种不同的效果。建议使用Firefox或Chrome浏览器观看。 3、21种html5+css3鼠标悬停hover超链接导航条动画效果 利用css3 transition属性制作的21种不同的鼠标悬停效果。当鼠标hover或悬停在超链接上时，

  会触发各种动画效果。每种动画效果都十分独特，可用于网站导航。 4、18种基于html5 svg和css3的神奇超链接动画效果 普通的超链接效果是鼠标放上去出现一条下划线，本插件异想天开的使用html5 svg和css3打造出18种很神奇的超链接动画效果。每种超链接动画效果都有它的独到之处。 5、html5+css3网格图片3d翻转Loading页面切换效果

  这是一个图片html5和css3制作的3d翻转Loading页面切换效果。在页面上以网格的形式展示所有的页面缩略图，当点击了缩略图片后，图片进行3d翻转，然后加载相应的页面内容。 6、12种利用html5+css3打造的消息提示框效果 这是12种风格各异的弹出消息提示框效果，使用html5和css3 animation属性制作，有各种旋转、翻转、伸展特效。效果非常华丽。

  CSS3主要知识点总结+HTML5新标签(图文版)分析

  总结+HTML5新增标签 目录： 1 2 3 4 5 6 7 8 分享2014-4-1 HTML5上课笔记

  1）边框 ① border-colors 相关属性border-top-colors border-right-colors border-bottom-colors border-left-colors ② border-image ： stretch 拉伸方式来填充边框背景图| repeat 平铺图片碰到边界时超出截断 | round 平铺，图片会工具边框的尺寸动态调整图片大小直至刚好铺满整个边框 ③ border-radius 相关属性border-radius: 1-4 length | % / 1 border-radius数值为合模型的一半就变成圆，记住：不是相对于合模型的width（如：965x1611），而是整个框才是 结果就显示的不是正圆，所以border-radius:300px; 才能显示正圆，加上border的值 '/'前面表示水平方向，后面表示垂直方向。每个方向都可以用1~4个值，缩写的规则遵循“左上开始，顺时针旋转/只能写一个 2）阴影 1.文本阴影 text-shadow（不需要判断浏览器） text-shadow:2px 3px 2px #000; 文字阴影的结构是按照以下顺序：X--偏移，Y--偏移，模糊，和颜色; text-shadow:-2px -3px 2px rgba(0, 118, 160, .25); 设置为负值，X -偏移阴影转移到左侧。设置为负值偏移Y -转移阴影顶端。颜色可以用RGBA值。 text-shadow:0px 1px 0px #fff,0px -p1x 0px #000； 文字阴影的列表（以逗号分隔）,1px的顶部和底部1px的阴影。 text-shadow：水平偏移量垂直偏移量阴影模糊值颜色， 水平偏移量垂直偏移量阴影模糊值颜色；（多个阴影用，隔开） eg： .con2 p { font-size: 90px; color:#fff;

  css3动画效果总结

  CSS3添加了几个动画效果的属性，通过设置这些属性，可以做出一些简单 的动画效果而不需要再去借助 JavaScript 。CSS3动画的属性主要分为三类: transform 、 transition 以及 animation 。 transform rotate 设置元素顺时针旋转的角度，用法是: transform: rotate(x); 参数x 必须是以deg 结尾的角度数或0,可为负数表示反向 scale 设置元素放大或缩小的倍数，用法包括: transform: skewX(a); 元素 x 方向逆时针倾斜角度 a ，y 方向不变 transform: scale(a); 元素x 和y 方向均缩放a 倍 transform: scale(a, b); transform: scaleX(a); transform: scaleY(b); 元素x 方向缩放 元素x 方向缩放 元素y 方向缩放 a 倍，y 方向缩放b 倍 a 倍，y 方向不变 b 倍，x 方向不变 translate 设置元素的位移，用法为: transform: translate(a, b); transform: translateX(a); transform: translateY(b); 元素x 方向位移a ，y 方向位移b 元素x 方向位移a ，y 方向不变 元素y 方向位移b ，x 方向不变 skew 设置元素倾斜的角度，用法包括: transform: skew(a, b); 斜角度b 元素x 方向逆时针倾斜角度 a ，y 方向顺时针倾

  transform: skewY(b); 元素y 方向顺时针倾斜角度b ，想方向不变 以上的参数均必须是以deg 结尾的角度数或0，可为负数表示反向。matrix 设置元素的变形矩阵，因为矩阵变形过于复杂，暂略。 origin 设置元素的悬挂点，用法包括：transform-origin: a b; 元素的悬挂点为(a, b) 元素的悬挂点即为它旋转和倾斜时的中心点。取值中的a、b 可以是长度值、以%结尾的百分比或者left 、top 、right 、bottom 四个值。 transition transition-property 指定transition效果作用的CSS属性，其值是CSS属性名。 transition-duration 动画效果持续的时间，其值为以s结尾的秒数。 transition-timing-function 指定元素状态的变化速率函数，其取值基于贝赛尔曲线函数，详情如下所示：transition-delay 动画效果推迟开始执行的时间，其值为以s结尾的秒数。 CSS3动画的生命周期如下图所示，从中可以清楚的看出duration和delay之间的关系： animation CSS3中真正的动画属性是animation，而前面的transform 和transition都只是对DOM元素的变形或者是状态的过渡。实际上，CSS3所支持的动画效果 只是填充动画，也就是说先设定整个动画生命周期中的几个关键状态 （key frame，关键帧），然后动画将自行计算并模拟关键帧之间的过渡。那么在

  css3实现动画效果常用方法

  css3实现动画效果常用方法 早期在web中要实现动画效果，都是依赖于JavaScript或flash来完成，但在css3中新增加了一个新的模块transition，它可以通过一些简单的css事件来触发元素的外观变化，让效果显得更加细腻。简单来说，就是通过鼠标的单击、获得焦点、被点击、或对元素任何改变中触发，并平滑地以动画效果改变css属性值 在css中创建简单的过渡效果可以从以下几个步骤来实现： （1）在默认样式中声明元素的初始状态样式 （2）声明过渡元素最终状态样式，比如悬浮状态 （3）在默认样式中通过添加过渡函数，添加一些不同的样式 1、css变形属性 transform属性的基本语法如下： translate(): 移动元素，可以根据X轴和Y轴坐标重新定位元素位置。在此基础上有两个扩展函数translateX()和translateY(); scale():缩小或方法元素，可以使用元素尺寸发生变化，在此基础上用两个扩展函数scaleX()和scaleY(); rotate(): 旋转元素，其参数值为旋转的角度值（360deg） skwe();让元素倾斜。在此基础上有两个扩展函数skewX()和skewY() matrix():定义矩阵变形，基于X轴和Y轴 2、过渡属性transition 过渡属性是一个复合属性，主要包括以下几个属性 transition-property:指定过渡或动态模拟的css属性（CSS属性名称） transition-duration:指定完成过渡所需的时间（持续时间） transition-timing-function:指定过渡函数（缓动函数） transition-delay:指定开始出现的延迟时间（改变元素属性值后多长时间开始执行） transition的优点在于简单易用，但是它有几个很大的局限。 （1）transition需要事件触发，所以没法在网页加载时自动发生。 （2）transition是一次性的，不能重复发生，除非一再触发。 （3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。 （4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。 3、animation动画 animation-name属性主要用来调用@keyframes定义好的动画

  css3动画效果总结

  css3动画效果总结 scale(a); 元素x和y方向均缩放a倍transform: scale(a, b); 元素x方向缩放a倍，y方向缩放b倍transform: scaleX(a); 元素x方向缩放a倍，y方向不变transform: scaleY(b); 元素y方向缩放b倍，x方向不变translate设置元素的位移，用法为：transform: translate(a, b); 元素x方向 位移a，y方向位移btransform: translateX(a); 元素x方向位移a，y方向不变transform: translateY(b); 元素y方向位移b，x方向不变skew设置元素倾斜的角度，用法包括：transform: skew(a, b); 元素x方向逆时针倾斜角度a，y方向顺时针倾斜角度btransform: skewX(a); 元素x方向逆时针倾斜角度a，y方向不变transform: skewY(b); 元素y方向顺时针倾斜角度b，想方向不变以上的参数均必须是以deg结尾的角度数或0，可为负数表示反向。matrix设置元素的变形矩阵，因为矩阵变形过于复杂，暂略。origin设置元素的悬挂点，用法包括：transform-origin: a b; 元素的悬挂点为(a, b)元素的悬挂点即为它旋转和倾斜时的中心点。取值中的a、b可以是长度值、以%结尾的百分比或者left、top、right、bottom四个值。transitiontransition-property指定transition效果作用的CSS属性，其值是CSS属性名。transition-duration动画效果持续的时间，其值为以s结尾的秒数。transition-timing-function指定元素状态的变化速率

  HTML5动画特效

  超级惊艳 10款HTML5动画特效推荐 2014-07-04 09:52 超人 html5tricks 字号：T | T 今天我们要来推荐 10 款超级惊艳的 HTML5 动画特效，有一些是基于 CSS3 和 jQuery 的，比较实用，特别是前几个 HTML5 动画，简直酷毙了，现在将它们分享给大家，也许你能用到这些 HTML5 动画和 jQuery 应用。 AD：2014WOT全球软件技术峰会北京站课程视频发布 11月21日-22日与WOT技术大会相约深圳现在抢票 今天我们要来推荐 10 款超级惊艳的 HTML5 动画特效，有一些是基于 CSS3 和 jQuery 的，比较实用，特别是前几个 HTML5 动画，简直酷毙了，现在将它们分享给大家，也许你能用到这些 HTML5 动画和 jQuery 应用。 1、HTML5 Canvas 发光 Loading 动画 之前我们分享过很多基于 CSS3 的 Loading 动画效果，相信大家都很喜欢。今天我们要来分享一款基于 HTML5 Canvas 的发光Loading 加载动画特效。Loading 旋转图标是在 canvas 画布上绘制的，整个 loading 动画是发光 3D 的视觉效果，HTML5 非常强大。 在线演示源码下载 2、jQuery 球状放大镜特效插件

  今天我们要来分享一款基于 jQuery 的放大镜特效插件，和其他放大镜不同的是，这款 jQuery 放大镜插件是球状的，看上去有 3D 的视觉效果。当你把鼠标滑过页面上的文字时，即会出现很酷的球状放大镜，来放大当前区域的文字。并且以球心为中心点向外文字逐渐变小，这就产生了立体感。 在线演示源码下载 3、HTML5 Canvas 粒子模拟效果 这是一款利用 HTML5 Canvas 模拟出来的 30000 个粒子动画，当你用鼠标在 canvas 画布上移动时，鼠标周围的一些粒子就会跟着你移动，并形成一定的图案，就像你在玩沙画一样，效果非常不错。这里，我们应用了一些 HTML5 的特性，让这个粒子动画显得相当动感。

  CSS动画实例：10个有关五角星的动画特效

  CSS动画实例：10个有关五角星的动画特效 设页面中有

  ，若定义. star的样式规则如下： .star { position: absolute; display: block; width:0px; height:0px; left:calc(50% - 50px); top:calc(50% - 23px); border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom:35px solid red; transform:rotate(35deg); } .star:before { content: ''; position: absolute; width: 0px; height: 0px; top: -22.5px; left: -31.25px; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 40px solid red; transform: rotate(-35deg); } .star:after { content: ''; position: absolute; width: 0px; height: 0px; top: 1.5px; left: -52.5px; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 35px solid red; transform:rotate(-70deg); }

  CSS动画实例：一颗躁动的心

  CSS动画实例：一颗躁动的心 在页面中放置一个类名为container的层作为盛放心心的容器，在该层中再定义一个名为heart的子层，HTML代码描述如下：

  分别为container和heart定义CSS样式规则如下： .container { margin: 0 auto; width: 300px; height:300px; position: relative; display:flex; justify-content:center; align-items:center; background-image: radial-gradient(#FFC0CB, #FF8888); border: 4px solid rgba(255, 0, 0, 0.9); border-radius: 10%; } .heart { width: 100px; height: 100px; background-color: #FF6347; position: relative; animation:beat .6s infinite ease-in; } .heart:before, .heart:after { content:""; position: absolute; width: 100px; height: 100px; background-color: #FF6347; border-radius: 50%; } .heart:before { left: 50px; }

  CSS3动画属性Transition

  今天我们接着一起来看CSS3动画属性中的一个属性Transition 。 W3C 标准中对css3的transition 这是样描述的：“css 的transition 允许css 的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS 的属性值。” 下面我们同样从其最语法和属性值开始一步一步来学习transition 的具体使用 语法： 1 transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]* transition 主要包含四个属性值：执行变换的属性：transition-property,变换延续的时间：transition-duration,在延续时间 段，变换的速率变化 transition-timing-function,变换延迟时间transition-delay 。下面分别来看这四个属性值 一、transition-property: 语法： 1 t ransition-property ： none | all | [ ] [ ',' ]* transition- property 是用来指定当元素其中一个属性改变时执行transition 效果，其主要有以下几个值：none(没有属性改变)；all （所有属性改 变）这个也是其默认值；indent （元素属性名）。当其值为none 时，transition 马上停止执行，当指定为all 时，则元素产生任何属性值变 化时都将执行transition 效果，ident 是可以指定元素的某一个属性值。其对应的类型如下： 1、color: 通过红、绿、蓝和透明度组件变换（每个数值处理）如： background-color,border-color,color,outline-color 等css 属性； 2、 length: 真实的数字 如：word-spacing,width,vertical- align,top,right,bottom,left,padding,outline-width,margin,min-width,mi n- height,max-width,max-height,line-height,height,border-width,border- spacing,background-position 等属性； 3、percentage:真实的数字 如： word-spacing,width,vertical-align,top,right,bottom,left,min-width,min - height,max-width,max-height,line-height,height,background-position 等属性；

  CSS3 动画属性

  CSS3 动画属性（Animation） 属性描述CSS @keyframes规定动画。 3 3 animation所有动画属性的简写属性，除了animation-play-state 属 性。 animation-name规定@keyframes 动画的名称。 3 animation-duration规定动画完成一个周期所花费的秒或毫秒。 3 animation-timing-function规定动画的速度曲线。 3 animation-delay规定动画何时开始。 3 animation-iteration-count规定动画被播放的次数。 3 animation-direction规定动画是否在下一周期逆向地播放。 3 animation-play-state规定动画是否正在运行或暂停。 3 animation-fill-mode规定对象动画时间之外的状态。 3 CSS 背景属性（Background） 属性描述CSS background在一个声明中设置所有的背景属性。 1 background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。 1 background-color设置元素的背景颜色。 1 background-image设置元素的背景图像。 1 background-position设置背景图像的开始位置。 1 background-repeat设置是否及如何重复背景图像。 1 background-clip规定背景的绘制区域。 3 background-origin规定背景图片的定位区域。 3 background-size规定背景图片的尺寸。 3 CSS 边框属性（Border 和Outline）

  CSS3 transition实现超酷图片墙动画效果

  CSS3 transition实现超酷图片墙动画效果 有了CSS3，实现效果就是这么简单。加群四一八加上三五五最后五三一了解更多web实战知识。 功能介绍web前端的技术学习(html,css,js)每天进步一小步，人生进步一大步！ 工具/原料 电脑 坚持和耐心 方法/步骤 1 一、前面的感慨以前也陆陆续续试过CSS3的一些特性，文字投影，多边框等。但都是试试而已，知道有这么回事。今天，见到了一个新玩意，transition，认认真真的试了一下，经过，我懵了，我呆了，我傻了，半天说不出话来，这…这…unbelievable，amazing，太神奇了，太不可思议了，几行简单的CSS，如此炫酷的动画效果，flash都不及的动画效果，我真是难以表达我的心情。 下面由浅入深，使用纯CSS，一步一步实现图片墙动画效果。这里，必须要先说明一下：对于对于此transition效果，IE6,IE7,IE8浏览器可以回家过元旦节了，这里没有它们的事情，Firefox3虽然平时表现不错，这里也没有它的事情。这个效果最拿手的是chrome2浏览器，Safari4，也就是webkit家族，这里Firefox3.5勉强凑合，有盒阴影和旋转效果，但是没有动画。所以，下文陆续提供的demo页面仅适用于chrome浏览器和Safari浏览器，部分适用于Firefox3.5+，IE纯粹的观众。 2 二、基础练习–实现旋转与盒投影效果在CSS3中，实现旋转效果需要用到transform属性中的rotate属性；实现盒阴影效果需要使用box-shadow属性。具体参见下面的示例代码。-webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); transform:rotate(10deg); -webkit-box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); -moz-box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); 上面代码部分，首先应该知道的是webkit表示webkit核心的浏览器，是其私有属性，作用

  CSS动画实例：六边形

  CSS动画实例：六边形 设页面中有

  ，若定义. hexagon的样式规则如下：.hexagon { top:50px; left:50px; position: absolute; width: 40px; height: 23px; background-color: #f0f; } .hexagon::before { content: ""; position: absolute; top: -11.5px; left: 0; width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 11.5px solid #f0f; } .hexagon::after { content: ""; position: absolute; top: 23px; left: 0; width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 11.5px solid #f0f; } 可在页面中绘制出如图1所示的六边形。 图1 六边形

  下面将多个如图1所示的六边形作为基本动画元素，为它们定义关键帧，使这些六边形产生动画效果。 1．淡入淡出的六边形 在页面中放置7个六边形，这7个六边形按上下两行各两个，中间一行三个的方式镶嵌在一起，定义关键帧，使得这7个六边形依次淡入淡出。 编写的HTML文件如下。 2 页分割符

  在对象之后插入页分割符
  page-break-after:always page-break-after:always page-break-after:always page-break-after:always 3 插入页分割符