未注册过用户可以点击直接登录哦！
使用注册邮箱登录
选择画板...
你已经成功采集到
&|关闭窗口 上传我的文档
 下载
 收藏
所有文档均可在线免费浏览，需要的朋友请看好是否是自己需要的文档。所有资料来源于网络,仅供大家参考学习,版权归原作者。若有侵权，敬请及时告知，同时请务必提供文档名称和文档地址，本人会及时删除侵权文档。
 下载此文档
正在努力加载中...
CSS3鼠标移入移出图片生成随机动画
下载积分：1588
内容提示：CSS3鼠标移入移出图片生成随机动画
文档格式：DOC|
浏览次数：17|
上传日期： 21:18:42|
文档星级：
全文阅读已结束，如果下载本文需要使用
 1588 积分
下载此文档
该用户还上传了这些文档
CSS3鼠标移入移出图片生成随机动画
官方公共微信CSS3 - 鼠标移入移出时改变样式
时间： 17:17:47
&&&& 阅读：429
&&&& 评论：
&&&& 收藏：0
标签：1，使用伪类实现样式切换伪类是CSS2.1时出现的新特性，让许多原本需要JavaScript才能做出来的效果使用CSS就能实现。比如实现下面的鼠标悬停效果，只要为:hover伪类应用一组新样式即可。当访客鼠标移动到按钮上面时，浏览器会自动为按钮应用这新样式。12&style&.slickButton&{&&&&color:&&&&&font-weight:&&&&&padding:&10&&&&border:&solid&1px&&&&&background:&&&&&cursor:&}&.slickButton:hover&{&&&&color:&&&&&background:&}&&button&class="slickButton"&&/button&2，使用CSS3的过渡功能实现颜色过渡直接使用伪类虽然实现了样式的改变，但由于没有过渡效果会显得很生硬。以前如果要实现过渡，就需要借助第三方的js框架来实现。现在只需要使用CSS3的过渡（transition）功能，就可以从一组样式平滑的切换到另一组样式。（1）背景色过渡变化下面鼠标移入后，按钮背景色会慢慢地变成黄色。鼠标离开，过渡效果又会发生，颜色恢复到初始状态。12&style&.slickButton&{&&&&color:&&&&&font-weight:&&&&&padding:&10&&&&border:&solid&1px&&&&&background:&&&&&cursor:&&&&&transition:&background&0.5s;&&&&-webkit-transition:&background&0.5s;}&.slickButton:hover&{&&&&color:&&&&&background:&}&/style&&&button&class="slickButton"&&/button&（2）背景色，文字都需要过渡效果上面样例看到虽然背景色实现了过渡，文字颜色还是直接改变的。要实现多个样式的过渡，只需使用逗号作为分隔符，同时制定多个样式属性即可。&style&.slickButton&{&&&&color:&&&&&font-weight:&&&&&padding:&10&&&&border:&solid&1px&&&&&background:&&&&&cursor:&&&&&transition:&background&0.5s,&color&0.5s;&&&&-webkit-transition:&background&0.5s,&color&0.5s;}&.slickButton:hover&{&&&&color:&&&&&background:&}&/style&&&button&class="slickButton"&&/button&（3）过渡所有样式如果想要过渡所有的样式，并且希望所有过渡都同步完成，可以在指定属性名的地方填&all。12transition:&all&0.5s;-webkit-transition:&all&0.5s;3，更多的过渡效果（1）淡入淡出通过修改&opacity&属性改变透明度，从而实现图像的淡入淡出。1&style&.slickButton2&{&&&&color:&&&&&font-weight:&&&&&padding:&10&&&&border:&solid&1px&&&&&background:&&&&&cursor:&&&&&opacity:&0.5;&&&&transition:&opacity&0.5s;&&&&-webkit-transition:&opacity&0.5s;}&.slickButton2:hover&{&&&&opacity:&1;}&&button&class="slickButton2"&&/button&（2）阴影（投影）效果使用&box-shadow&属性可以为任何盒子元素添加阴影，从而制作出漂亮的悬停效果。&style&.slickButton3&{&&&&color:&&&&&font-weight:&&&&&padding:&10&&&&border:&solid&1px&&&&&background:&&&&&cursor:&&&&&&&&transition:&box-shadow&0.5s;&&&&-webkit-transition:&box-shadow&0.5s;}&.slickButton3:hover&{&&&&box-shadow:5px&5px&10px&}&/style&&button&class="slickButton3"&&/button&（3）发光效果同样利用&box-shadow&属性可以实现发光效果，只不过把阴影偏移量设为0。8&style&.slickButton4&{&&&&color:&&&&&font-weight:&&&&&padding:&10&&&&border:&solid&1px&&&&&background:&&&&&cursor:&&&&&&&&transition:&box-shadow&0.5s;&&&&-webkit-transition:&box-shadow&0.5s;}&.slickButton4:hover&{&&&&box-shadow:0px&0px&20px&}&/style&&button&class="slickButton4"&&/button&4，下面样式不值得使用过渡效果对于内边距（padding）、外边距（margin）和字体大小（font-size）。如果应用由于浏览器要重新计算布局大小或文本提示，这样过渡会消耗更多电量，同时可能导致响应迟钝和卡壳。如果想要移动、放大、缩小元素，那么最好使用变形技术。标签：
&&国之画&&&& &&
版权所有 京ICP备号-2
迷上了代码！Hover.css纯CSS3鼠标滑过特效动画库
当前位置： >
> Hover.css纯CSS3鼠标滑过特效动画库
Hover.css是一款效果很酷的纯CSS3鼠标滑过特效动画库。Hover.css支持的元素包括超链接、按钮、logos、SVG和图片等。当鼠标滑过元素时有背景颜色变化效果、图标变化效果、阴影、抖动、旋转、折角等107种特效。
浏览器兼容性
Hover.css是一款非常简单实用的纯CSS3鼠标滑过特效动画库。有100多种效果可以选择，包括：2D动画、背景动画、边框动画、图标动画、发光渐变、阴影、对话框、折角等100多种特效。
首先你需要将hover.css加入到HTML文档的头部。
&link href="css/hover.css" rel="stylesheet" media="all"&
现在假设你需要为一个按钮添加hover效果。
&a href="#" class="button"&Checkout&/a&
display: inline-
padding: 1
background-color: #79BD9A;
text-decoration:
现在你需要找到你效果要添加的鼠标滑过效果的class名称，然后将它加入到按钮的class中即可。
&a href="#" class="button hvr-float"&Checkout&/a&
使用FontAwesome来制作图标动画效果
Hover.css使用来制作它的图标效果。要使用这些图标，首先要引入FontAwesome文件。
&link href="///font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all"&
Hover.css的图标是通过元素的:before伪元素添加到元素上的。下面是一个图标向前运动的例子(代码中没有添加浏览器前缀)：
.hvr-icon-forward:before {
content: "\f138";
padding: 0 1
font-family: FontA
transform: translateZ(0);
transition-duration: 0.1s;
transition-property:
transition-timing-function: ease-
上面的代码的关键点是font-family 和 content 的声明。font-family: FontAwesome告诉浏览器你想为伪元素使用FontAwesome字体，content 则表示是哪一个图标。所以，如果你想改变图标，就修改content 中的内容。可以查看来查找你需要的图标。
如果你不想修改Hover.css文件，你可以通过覆盖的方法来实现图标的修改自定义一个CSS文件，在Hover.css文件之后引入，文件中添加要修改的内容：
.hvr-icon-forward:before {
content: "\f001";
深入了解Hover.css中的一些hack技术
所有的hover.css效果都使用一些不影响效果的CSS属性来制作，有时候你可能会需要去修改这些CSS属性，下面来看一下一些特殊的地方。
display: inline-block
每一种效果要正常工作需要设置一个dispaly属性。默认情况下，Hover.css将所有的元素都设置为display: inline-block。你可以根据需要将它修改为display: block或display: inline。如果你使用的元素已经有了dispaly属性，那么效果中的display不会覆盖你原有的display。
transform: translateZ(0)
transform: translateZ(0)是一个总所周知的“性能hack”。它通常和CSS3 transforms一起使用来提高移动手机和平板的transforms 效果。
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
当在移动手机和平板上观察CSS3 transformed效果时，边缘有时看起来有锯齿状或稍有不同的颜色。通过使用box-shadow: 0 0 1px rgba(0, 0, 0, 0)，可以为元素使用透明的阴影效果，这样会使边部看起来十分的平滑。
更多的信息请参考：
本文版权属于jQuery之家，转载请注明出处：
您已经顶过了哦！