css3
-
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…
-
CSS3按钮鼠标悬浮实现光圈效果
这篇文章运用实例代码给大家介绍了利用css3如何实现按钮鼠标悬浮光圈效果，有需要的朋友们可以参考学习，下面来一起看看吧。 1 、HTML相关知识点 HTML(超文本标记语言)是网页的核心、首先你要学会，不要害怕，HTML很容易学习的，刚开始多记多练，但是到最后还是要自己深入专研，简单的入门是很快…
-
CSS3把图片变成灰色模式的实例
这篇文章给大家分享了如何利用css3把图片变成灰色模式的效果，实现起来很简单，有需要的朋友们可以参考借鉴。 实例代码： 代码如下: .gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: g…
-
CSS3中nth-child与nth-of-type的区别
css3中nth-child与nth-of-type的区别其实很简单：:nth-of-type为什么要叫:nth-of-type？因为它是以”type”来区分的。也就是说：ele:nth-of-type(n)是指父元素下第n个ele元素， 而ele:nth-child(n)是…
