最近在做一个css3的滤镜模糊的效果，但是我发现，有些浏览器一点效果都没有，这是浏览器兼容性导致的，怕今后会忘记所以就先写下来，也希望可以帮到需要的小伙伴。 代码如下： div{//设置半透明滤镜效果 opacity: 0.5; filter:alpha(Opacity=50); } 1、filter：对IE设置半透明滤镜效果，filter:alpha( Opacity=50)代表该对象50%半透明，支持IE8及以下浏览器。2、opacity：css3属性，对除IE外所有浏...
注：css3毛玻璃效果应该很多人都知道怎么实现，但是有个问题是图片模糊了之后相当于缩小了，所以颜色深的图片会出现白边，这里说下我参考网上的解决方式吧！ 1、毛玻璃实现方法： CSS3 blur滤镜实现如下测试代码： .blur { -webkit-filter: blur(10px); /* Chrome, Opera */ -moz-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); } 相关HTML代码...
最近工作时研究了一下css3动画和js动画，主要是工作中为了增强页面的趣味性，大家都有意无意的添加了很多动画效果，当然大部分都是css3动画效果，可以gpu加速，这会减少移动端的性能需求。 今天主要说的是蜂窝效果，具体效果大家等下可以运行源码，这里就不放gif图了。 css3的原理很简单，就是通过更改background-size，由于css3中的background中可以设置repeat属性，来使背景图片在x,y方向平铺。一开始先设置background-size:10...
代码如下： h1{color: #3D3D3D;font-size: 200px;text-shadow: 0px -1px 0px #858585, 0px 1px 10px rgba(0, 0, 0, 0.6), 0px 6px 1px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.2), 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 3px 5px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.25), 0px 15px 10px rgba(0, 0, 0, 0.2), 0px 25px 15px rgba(0, 0, 0, 0.15);}文本3D效果！ 效果如下图：
还记得么，在前面也曾实现过“只用css让div动起来”，还记得当时是怎么实现的么，是的，transition，针对的也比较局限，只有旋转角度啊，长宽啊之类的，所以说，与其说是动起来，倒真不如说成是过渡，当然它还有一个局限性，只有当鼠标放上后才可以触发，只是一个样式变成另一个样式，变化也比较单调，而真正的实现动画效果，css3中还有一个非常有效的方法：@keyframes。 首先，要知道它的规范和用法 还记得transition的用法么：...
各位网友，大家好，我是陌上花会开，今天这篇文章，我将手把手教大家如何开发一套纯CSS的折角效果。一如往常，我不提供代码下载，但是我可以保证，只要将教程中的代码复制到本地，绝对百分百获得与我演示的效果一样，希望各位明白我的用意。 好了，直接开始今天的教程吧。首先，我先给大家演示一下今天实战案例的效果： 有人会说这是什么？这就是我们今天的实战开发，我将带领大家开发上图中的右上角折叠效果。 在我讲解完...
4.mootools实现checkbox和radiobox效果 能在支持 FireFox、Chrome、Safari、傲游、搜狗、360浏览器。 源码下载/ 在线演示 5. jquery打钩打叉图标特效 源码下载 / 在线演示 6. 纯CSS3实现的单多选选择框 源码下载 / 在线演示
我们知道，使用Photoshop来调整图像的亮度和对比度，或者将图片转化为灰度等等是很常见的功能。今天我将给大家介绍几个新特性，我们使用CSS来给web图像添加相同的效果。 首先我们先在网页中显示一张图片,html代码如下： CSS3实战开发:使用CSS3实现photoshop的过滤效果 此时运行效果图如下： 下面我给大家介绍相应特性，同时给各位演示应用图片过滤样式之后的效果图。 一、调整图像灰阶度：grayscale，范围为0%-100%...
锁屏效果，也就是将屏幕置于模态，不允许用户触发任何动作，只能解除锁定后才能继续使用，jQueryUI的dialog有模态对话框，这一点不难做到。那么，首先需要在页面中添加一个div层，用于做模态的层： Html代码 其对应的CSS比较简单，主要设置一下z-index属性，值设置的很大即可，就能达到覆盖其余元素的效果，加上opacity淡化一下背景： ...
今天，带来的是纯CSS3打造的效果--绽放的花朵。 先来看效果吧：http://webfront.verynet.cc/pc/flower.html 这是纯CSS3样式打造的效果，关键是采用了animation属性和transform属性。详细请看下面代码。 HTML结构： 1 2 3 4 5 6 7 8 9 CSS样式： 1 2 .div1{ 3 position:absolute; 4 top:300px;left:500px; 5 background:pink;opacity:0.6...
今天，带来的是纯CSS3的效果--图片3D翻转。 请看效果：http://localhost:63342/webfront/PC/rotate.html 这个效果主要还是运用了CSS3的transform变形属性，与上个效果不同的是，这次并不是动画，所以没有采用animation属性，而是采用transition过渡属性。这个属性会将元素在两种效果之间进行切换，并产生一个过渡效果。详情请看代码。 HTML结构： 1 2 3 4 5 ...
今天，带来的是纯CSS3的效果--图片3D翻转。 请看效果：http://webfront.verynet.cc/pc/rotate.html 这个效果主要还是运用了CSS3的transform变形属性，与上个效果不同的是，这次并不是动画，所以没有采用animation属性，而是采用transition过渡属性。这个属性会将元素在两种效果之间进行切换，并产生一个过渡效果。详情请看代码。 HTML结构： 1 2 3 4 5 ...
标签云是博客的标配功能，能够清晰的呈现博客的各个关键词和主题。在这个效果中，您将学习如何使用 CSS3 技术创建一个效果精美的标签云效果。 作为实验项目，使用了 CSS3 渐变，阴影和最重要的的 CSS 变换特性。 效果演示 源码下载
今天要给大家介绍一款纯css3实现的机器人看书动画效果。整个画面完全由css3实现的绘制，没有使用任何图片元素。机器人的眼睛使用了动画元素。我们一起看下效果图： 在线预览 源码下载 实现的代码。 html代码： < HTML > { CSS } ...
有些导航栏背景颜色会设计成渐变的效果，显得更有层次感和质感； CSS3有专门实现这一个效果的属性， -webkit-gradient(linear,0% 0%, 0% 100%, from(#4998FF), to(#4998FF), color-stop(0.5,#4998FF),color-stop(0.5,#1261FF)) webkit内核的safari、 Chrome的Linear Gradients (线性渐变) 基本语法：background-image:-webkit-gradient(type,x1 y1, x2 y2, from(开始颜色值),to(结束颜色值), [color-stop(偏移量小数,停靠颜色...