css3
-
CSS3实现时间轴效果方法
最近打开电脑就能看到极客学院什么新用户vip免费一个月，就进去看看咯，这里就不说它的课程怎么滴了，里面实战路径图页面看到了这个效果： 有点像时间轴的赶脚，而且每一块鼠标悬浮上去也有下拉效果展开介绍截图信息，就感觉效果还不错。但感觉这种效果貌似对于动态添加不是很灵活，因为高度不像宽度可以灵活的自适应…
-
CSS3实现可爱的小黄人动画示例代码
每次看到css3动画就心痒痒想试一下，记得一个多月前看了白树哥哥的一篇博客，突然开窍，于是拿他提供的demo试了一下，感觉很棒！下图为demo提供的动画帧设计稿。 自己也想说搞一个DIY的动画出来，可是，会PS不一定会设计啊，我搞不出一套动画设计稿出来啊【抓狂】….于是乎，去了站酷网找找素材，我果然…
-
CSS3制作缩略图的详细过程分析
我们使用 border 属性来创建缩略图，具体内容如下 img { border: 1px solid #ddd; border-radius: 4px; padding: 5px; } 缩略图我们使用 border 属性来创建缩略图。@@##@@ 缩略图如何作为连接？ a { display: i…
-
CSS3实现iPhone滑动解锁功能代码示例
该效果的主要实现思路是给文字添加渐变的背景，然后对背景进行裁剪，按文字裁剪（目前只有webkit内核浏览器支持该属性），最后给背景添加动画，即改变背景的位置，背景动画效果如下（gif录制时有卡顿，代码实现时不卡）： 最终效果如下所示： 全部代码如下： p{ width:50%; margin:0 a…
-
css3动画效果总结分析
css3的动画功能有以下三种: 1、transition(过度属性)2、animation(动画属性)3、transform(2D/3D转换属性) 下面逐一进行介绍我的理解： 1、transition: 如-webkit-transition:color 1s; 立即学习“前端免费学习笔记（深入）”…
-
纯CSS3鼠标滑过图片遮罩层动画特效
简要教程 这是一款使用纯css3制作的鼠标滑过图片遮罩层动画特效。该特效中，当鼠标滑过或悬停在图片上面时，会在图片上出现遮罩层动画，展示出图片的描述信息和链接图标按钮。 使用方法 在页面中引入bootstrap样式文件和font-awesome字体图标文件。 HTML结构 该特效的HTML结构如…
-
css3的过滤效果的简单示例
下面小编就为大家带来一篇css3的过滤效果简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧 上面的图片就是css3新特性的滤镜效果，学会了这些那么我们这群爱美爱帅的大web是不是就可以完美的用代码实现照片美化了捏~~ 好，咱们先把照片后面的白框实现， #p1{ …
-
如何用CSS3做星体
制作原理：在我的上一篇随笔中有详细的说明，由于这个方法制作的球，比较耗性能，就只做了3个小球，效果大家可以试验。 * { padding: 0; margin: 0; }body { background-color: black; }.taiYang { width: 80px; height:…
-
CSS3实现文字波浪线效果
前言 css的设计之巧妙，实现之精妙，细细寻味，其妙非凡，妙不可言。这波浪线，取巧的运用了linear-gradient属性，合角度、颜色、位置于一体，配合background-size，background-repeat，化一为多，平滑过渡。哇，这最后的效果太巧秒了！尘世间没有词来形容了…… …
-
利用纯CSS3实现tab选项卡切换示例
先来看看效果图 CSS3伪类target利用target的特性，可以实现纯css的tab效果切换 示例代码如下 代码如下: .tabmenu{ position:absolute; top:-28px; left:144px; margin:0px; } .tabmenu li{ display:i…
