用CSS画梅花,美轮美奂。
下载地址: 点击下载 效果描述: 看起来图案好像很复杂的样子,其实这里只需要弄懂一个CSS3的属性 一切都迎刃而解了,那就是border-radius属性,后面跟着四个值 分别指 左上角 右上角 右下角 左下角 四个角度的border而已 控制好他们的表现形式,就可以得到本案例中的效果了 发散思维,你可以做出更多...
六边形美轮美奂,尽显独特魅力。
下载地址: 点击下载 效果描述: 最近网上看到一个前端面试题,要求面试者用纯CSS实现一个6边形的效果 乍一看有点乱,但是仔细分析下,其实并没有那么难 将六边形拆开成三部分,左边是一个三角形,中间一个长方形,右侧再来一个三角形,然后再将其定位起来即可 那么就是一个div,内部嵌套三个div即可实现 当然,你也可以省略左右两...
美丽的CSS3图片墙
下载地址: 点击下载 效果描述: 一组纯CSS3实现的图片墙动画效果 不规则排列,带有阴影倒影效果 使用方法: 1、将style.css样式引入到网页中 2、将body中的代码部分拷贝到你需要的地方即可
画出圆形进度条,展示进展。
下载地址: 点击下载 效果描述: 一个很简单易用的canvas画布效果 不断执行的圆形百分比效果 注:不支持低版本浏览器 使用方法: 1、将body中的代码部分拷贝到你需要的地方即可
华丽CSS3立体旋转动画
下载地址: 点击下载 效果描述: 一个非常简洁好看的纯CSS3旋转效果 当鼠标移动到图片上后,会立体式翻转显示隐藏的文字内容 鼠标移走后消失 使用方法: 1、将style.css样式引入到网页中 2、将body中的代码部分拷贝到你需要的地方即可
优美CSS3菊花加载效果
下载地址: 点击下载 效果描述: 现在普通的一个gif菊花loading效果已经很难满足用户的需求了 时间就是成本,如果让用户在等待的时间内可以欣赏到更加好看的loading效果 想必对于用户来说,等待也是一种享受,忠诚度自然会更高 在以前,基本上都是一个默认的GIF动画,多一个http请求不说,用户已经看烦了 今天给大家...
圆形倒计时滚动条,时光荏苒,倒计时不停。
下载地址: 点击下载 效果描述: 一个简单易用的SVG动画,圆形倒计时效果 使用方法: 1、将style.css样式引入到网页中 2、将body中的代码部分拷贝到你需要的地方即可 (适当调整CSS样式以达到你想要的)
微博年度财H5动画特效,感动人心。
下载地址: 点击下载 效果描述: 这是一个完整的H5手机滑屏动画效果,有新浪前端大神一点一点编写完成 想全部使用就别谈了,毕竟这是定制化的东东 但是里面部分小动画效果可以拿出来使用的
舞动的雨伞,感动心弦。
下载地址: 点击下载 效果描述: 今天给大家推荐一个canvas实现的动画效果 大家知道HTML5新增的这个canvas非常强大,结合js可以实现很多非常不错的动画效果 使用方法: 1、将body中的代码部分拷贝过去即可
前端大佬推出移动端滑动骨架,惊艳全场!
下载地址: 点击下载 效果描述: 一个非常简洁易用的移动滑屏插件,当然,它并不依赖任何其他库 使用方法: 1、将两个CSS文件引入到你的网页中 2、将body中的代码部分拷贝过去即可
鼠标触摸,画面翻转。
下载地址: 点击下载 效果描述: 一个纯CSS3实现的鼠标悬停翻转效果,立体式效果非常不错 实现起来也很简单,主要靠CSS3的那一个特殊属性而已 使用方法: 1、将index.html中的样式复制到你的样式表中 2、将body中的代码部分拷贝到你需要的地方即可
竹枝随风舞
下载地址: 点击下载 效果描述: 同样,还是老方法实现的一个CSS3小动画效果 主要是两个随风飘动的竹子效果,不断的摆动,尽可能的接近自然 使用方法: 1、将index.html中的样式复制到你的样式表中 2、将body中的代码部分拷贝到你需要的地方即可
用CSS3呈现Chrome标志
下载地址: 点击下载 效果描述: 之前给大家推荐了一个用CSS3实现的太极旋转的团效果,今天再给大家推荐一个用CSS3实现的谷歌chrome标志的效果。同时,也可以实现自我旋转效果 全程没有使用一点js或者图片,纯html+css代码实现的效果 使用方法: 1、将lanren.css中的样式复制到你的样式表中 2、将bod...
热情飞扬的火箭动画
下载地址: 点击下载 效果描述: 很偶然的一个机会,看到百度fls构建工具官网banner上有一个不断飞舞的火箭效果 感觉非常不错,我第一反应它肯定是纯CSS3制作的,这是直觉,别问我为啥,因为换做是我 我也会用CSS3做啊,虽然麻烦了一些,但是用户体验非常棒 使用方法: 1、将style.css中的样式复制到你的样式表中...
用HTML和CSS3制作旋转的太极图,展现阴阳之美。
下载地址: 点击下载 效果描述: css3大行其道的今天,可以实现很多原本需要图片才能实现的效果 比如今天给大家推荐的这个可以自动旋转的太极图案效果 在CSS2的时代,你能想象的到,只用HTML+CSS就可以实现这种效果么? 使用方法: 1、将index.html中的样式复制到你的样式表中 2、将body中的代码部分拷贝到...
优美的SVG加载按钮
下载地址: 点击下载 效果描述: 一个观赏性较好的svg 实现的loading动画效果 其中调用的CSS、js内容较多,不适合用于实际项目中,所以说比较适合于观赏 且低版本浏览器支持度也不够好,使用方法这里也就不再赘述 使用方法: 1、将style.css中的样式复制到你的样式表中 2、将body中的代码部分拷贝到你需要的...
网页飘雪,点亮冬日情怀。
下载地址: 点击下载 效果描述: 一个很不错的网页下雪效果,其中使用的CSS3代码,雪花一边下飘一边旋转,这样就不会影响雪花底部的网页点击效果了,当然,这必须得在高版本浏览器下才能支持的旋转效果 低版本浏览器照样浏览,只是缺少了雪花旋转效果 使用方法: 引入附件index.html中的CSS样式以及js即可 (注意保持图片...
跳舞的自然之美
下载地址: 点击下载 效果描述: 左右摆动的一棵树,第一反应应该是图片动画做的 但是你错了,这是用纯代码实现的效果,而且不需要js,是不是很赞呢 使用方法: 1、将body中的代码部分拷贝过去 2、将lanren.css样式引入到你的页面即可 (注意:不兼容低版本浏览器哦)
CSS3动画实现的打字效果
下载地址: 点击下载 效果描述: 网页打字效果,相信大家已经见过了,基本上都是基于JS实现的,还比较麻烦 今天特意给大家推荐一个只用CSS3就可以实现的打字效果 使用方法: 将head中的样式应用到你需要显示的文字上即可 (注意:不兼容低版本浏览器哦)
用CSS3 after实现标题hover效果
下载地址: 点击下载 效果描述: 我们知道,当鼠标悬停在图片或者文字上的时候,会有一行文字说明悬停显示出来 这行文字都是默认的效果,有一天你的客户跟你说,哎呀,这个这么丑,能不能美化一下呢 你一听,艾玛这个是系统默认的,我咋更换嘛。客户又不退步,这个时候你心里那个憋屈啊,可咋整呢? 莫要慌,实现方法有很大,今天懒人哥哥就教...