艺灵设计

全部文章
×
css3动画教程之画对勾特效

css3动画教程之画对勾特效

css3动画可以实现很多在常人看来是很复杂或者需要js才能完成的特效。下面要分享的这个特效是一个利用css3动画制作的一个画对勾特效,代码虽然简单但实现了最终的效果。当然,对于同一种css3特效,实现的方法可以有多种。喜欢动手的看官可以来尝......

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2017-04-08 - 阅:1075 - 积分:0

css3+js实现手机wap版炫酷旋转式放射特效

css3+js实现手机wap版炫酷旋转式放射特效

  这周在改公司的手机wap网站,其中有一个关于按钮的小特效(其实图片我现在都用iconfont来替代图片)。点击按钮时,几个子栏目旋转的同时以放射状展开。个人感觉还不错,所以分享给看官......

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2016-06-15 - 阅:288 - 积分:0

纯css做的炫酷图片墙特效

纯css做的炫酷图片墙特效

一个用纯css代码实现的炫酷图片墙特效,充分利用了伪对象和伪类来实现,实现的思路值得学习!......

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2014-10-14 - 阅:2115 - 积分:0

妙用伪对象实现3D立方体

妙用伪对象实现3D立方体

前几天发表了2篇关于“3D立方体”的制作方法,两种方法都各有不同。一种是用6个div,效果更加逼真,但不兼容ie;一种是仅用了5个div,利用边框来构造立方体,兼容性更好。今天再来介绍第三种方法,即:妙用伪对象实现3D立方体。......

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2014-07-01 - 阅:767 - 积分:0

纯CSS3属性实现静态3D立方体

纯CSS3属性实现静态3D立方体

昨日闲时用纯CSS3属性写了一个静态的3D立方体,效果图如下:
看上去还像那么回事哈。话说这是第一次写这个,刚开始时感觉有点无从下手,不过最后还是完成了。哈哈,下面就先上源码:......

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2014-06-26 - 阅:626 - 积分:0

css3导航特效之跟随鼠标二

css3导航特效之跟随鼠标二

今天再来分享一款鼠标跟随效果,如下图:......

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2013-12-31 - 阅:1984 - 积分:0

css3导航特效之跟随鼠标一

css3导航特效之跟随鼠标一

好久没有在这版块更新文章了,昨天调休,睡着也没事干,于是忍着寒冷又写了一个导航特效。什么样的效果呢?如下图:......

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2013-12-29 - 阅:2013 - 积分:0

初次尝试实现chrome浏览器的logo

初次尝试实现chrome浏览器的logo

话说学习div这么久了,天天重复着无聊的工作,一点长进都没有。于是,今天洒家开始捣鼓了一个好玩的logo。是什么logo呢?就是洒家经常用的chrome浏览器的logo......

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2013-11-26 - 阅:970 - 积分:0

纯css3做的单重轮播

纯css3做的单重轮播

今天就来介绍一款由纯css3实现的高端洋气上档次的单重轮播特效。你不要怀疑自己的听力有问题,就是纯css3实现的单重轮播效果,可以以假乱真到与js/jq相媲美的地步。相信你已经迫不及待的想一睹笔者说的纯css3实现的轮播特效风采了......

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2013-10-14 - 阅:4993 - 积分:0

鼠标滑过图片显示遮罩层特效集合(16种不同特效任你挑选)

鼠标滑过图片显示遮罩层特效集合(16种不同特效任你挑选)

在网上浏览图片时经常会看到鼠标滑过时出现一层半透明背景的图层遮挡住了图片,给人一种神秘感。笔者称之为遮罩层,以后文章中都以遮罩层代指。
在很久以前,设计师们设计的好看的特效在我们前端“攻城师”的手中都要借助js/jq来进......

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2013-10-10 - 阅:8469 - 积分:0

css3之transition实现有立体感的导航

css3之transition实现有立体感的导航

国庆人家都放假了,我还要苦逼的在公司加班,呜呜。好无聊,来写篇文章发表下,打发这下午无聊的时间。
导航特效有很多种,在以前好看的导航特效都是要靠js,jq之类的来实现,用纯css实现的导航效果很死板。当css3出现后,这一切都被改变了......

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2013-10-02 - 阅:1427 - 积分:0

css3之transition实现仿淘宝底部鼠标滑过动画效果

css3之transition实现仿淘宝底部鼠标滑过动画效果

相信读者对淘宝不陌生吧,其实淘宝上面有许多特效,有js特效,也有css3做的特效。例如进入淘宝【我要逛】页面后会发现页面底部有2个小图标,鼠标滑过时会发生变化。值得注意的是,这个变化是很平和的,可不是一个普通的......

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2013-09-17 - 阅:2962 - 积分:0

css3文本阴影效果

css3文本阴影效果

前面提到过css3中的阴影边框属性,其实在css3中也有文字的阴影属性,即text-shadow.目前时常能够看到一些web前端爱好者的个人博客中使用了阴影文字,下面以实例来进行补充说明.效果图......

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2013-08-04 - 阅:425 - 积分:0

css3边框阴影效果

css3边框阴影效果

网页中的阴影效果给人一种朦胧的感觉,一个设计者在设计页面时经常会用到阴影,圆角,半透明,渐变等效果.而对于好看的效果在网页实现中却显得很棘手.而这些棘手的问题在css3下一切都已经不是问题.下面以本站的阴影效果为例,来分享下关于阴影......

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2013-08-04 - 阅:33654 - 积分:0

css3圆角在网页中的应用

css3圆角在网页中的应用

虽然css3中的圆角属性早已使用开来,但国内还是有大量业界人士不知道怎么用.网页中出现圆角的地方使用圆角图片代替的现象依然很多。其实,圆角没有想像中的那么复杂,下面就来说说css3圆角边框在网页中的应用,......

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2013-08-04 - 阅:507 - 积分:0