今天给大家带来一款纯css3实现的鼠标悬停动画按钮。这款按钮鼠标经过前以正方形的形式，当鼠标经过的时候以动画的形式变成圆形。效果图如下： 在线预览 源码下载 实现的代码。 html代码： css3代码： body { background-color: #333; } div { width: 200px; height: 200px; margin: 0 auto; } ...
在2014年的圣诞节，爱编程小编给大家分分享一款纯css3实现的雪人动画特效。该实例实现一个雪人跳动的特效，效果图如下： 在线预览 源码下载 实现的代码。 html代码： lolwut-@rsmswlln css代码： body { background: ...
本文中要实现的一个纯CSS3的图片展示特效，以前只能用JavaScript实现，可想而知会受到多方面的限制，特别是性能。而今天我们将用简单的CSS3代码实现，你会发现它的动画效果在现代浏览器的帮助下无比的顺滑。观看演示HTML代码通过上的演示，估计你已经能猜到，它的HTML结果应该是一个父元素里包含多个子元素，没错：这里用的是一个ol和其子元素li。 CSS代码CSS代码要实现的动作就是当鼠标悬停时让宽度发生变化。 非常简...
页面的结构非常简单 其中，header和footer是根据某种条件动态选择引入的。换言之，header和footer的高度可能会变化。 遇到的问题是，当content中的内容很少的时候，div的高度会比较小，那么在比较大的屏幕上footer就会出现在很高的位置。 这个太难看了。 请问，怎么写css能够使得当屏幕比较大的时候，footer也出现在屏幕的底部，就像baidu首页那样的效果。 回复讨论(解决方案) 可以将footer { posi...
之前为大家带来了很多加载动画。 基于prefixfree.js的进度加载条 ，基于jquery带百分比的响应式进度加载条。今天给大家分享一款纯css3实现的条纹加载条。带有响应式的效果。效果图如下 ： 在线预览 源码下载 实现的代码。 html代码： css3代码： .warning { position: relative; background-color: #6DA807; border: 1px solid #6DA807; border-radius: 10px; box-sha...
之前给大家带了很多款进度加载条，今天再给大家分享一款纯css3实现的动画加载特效。效果图如下： 在线预览 源码下载 实现的代码。 html代码： 15 css3代码： body { background: #252527;}.wrap { width:200px;...
今天给大家分享30款css3实现的鼠标经过图片显示描述特效，鼠标经过这些图片的时候以非常炫的方式显示图片的描述。为保证最佳的效果，请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。 在线预览 源码下载 实现的代码。 html代码： Hover Effect Ideas An inspirational collection of subtle hover effects Set 1 ...
学习来源:慕课网http://www.imooc.com/view/240 先看效果图↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ HTML结构 1 2 3 4 Shadow Effect 5 6 7 8 9 10 11 CSS样式(省略了各浏览器前缀) 1 /*通用类*/ 2 body { font-family: Arial; font-size: 20px;} 3 body,ul {margin: 0; padding: 0; list-style: none;} 4 .wrap {width:70%; he...
之前大大家分享了很多款加载条。今天给大家带来一款纯css3实现的动画加载条。 这款加载条适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。效果图如下： 在线预览 源码下载 实现的代码。 html代码： Loading bar css3代码： body { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", ...
之前给大家分享了很多css3实现的按钮特效。今天给大家分享9款基于CSS3 Transitions实现的鼠标经过图标悬停特效。这款特效适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。效果图如下： 在线预览 源码下载 实现的代码。 html代码： Mobile Desktop Partners Support Security css3代码： .hi-icon-effect-6 .hi-icon { box-shadow...
1、纯CSS3实现人物摇头动画 这次我们要来分享一款超级可爱的纯CSS3人物摇头动画，初始化的时候人物的各个部位是利用CSS3动画效果拼接而成，接下来就是人物听音乐的场景，一边听音乐一边摇着脑袋，十分陶醉的样子，周围还会出现跳动的音符动画。 在线演示 源码下载 2、CSS3 Loading进度条加载动画特效 3款绚丽风格 今天我要分享一款更加炫酷的CSS3进度条加载动画特效，该动画特效有3个不同的风格，注意，IE6，7，8是不...
效果图如下↓↓↓↓↓ (知识点见代码注释) HTML 1 2 3 4 5 CSS3实现鼠标悬停显示消息提示框 6 7 8 9 10 11 12 13 14 15 Home16 17 18 19 20 21 22 23 24 About me2...
CSS3 实现RSS图标 body{ padding:50px 0 0 0 } span.feed-box{ display:block; width:100px; height:100px; margin:0 auto; background:#F9A004; box-shadow: 1px 1px 0 #C27C03, 2px 2px 0 #C27C03, 3px 3px 0 #C27C03; -moz-box-shadow: 1px 1px 0 #C27C03, 2px 2px 0 #C27C03, 3px 3px 0 #C27C03; -webkit-box-shadow: 1px 1px 0 #C27C03, 2px 2px 0 #C27C03, 3px 3px 0 #C27C03;...
首先，“回到顶部”、“用户反馈”这两个按钮是通过定位放在左下角上。 （1）“回到顶部”的按钮只有当滚动条有出现下滑时才出现 （2）“用户反馈”按钮，用户刚打开时会抖动一下，引起用户的注意，然后才定住。 我的实现做法 首先，这两个按钮我都使用定位的方式定位在右下角适合的位置上。然后， 一、"回到顶部" 1、因为如果我们没有滚动鼠标，“按钮”没有出现，所以，我首先是把按钮隐藏起来的display：none，然后...
.gist { width:220px; height:130px; background-image: url(2.jpg); background-repeat:no-repeat; border:5px solid green; background-position:50% 50%; transition:background-position 2s; -moz-transition:background-position 2s; /* Firefox 4 */ -webkit-transition:background-position 2s; /* Safari and Chrome */ -o-transition:background-position 2s; /* Opera */}.gist:hover { ...