下面小编就为大家带来一篇css3的过滤效果简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧上面的图片就是css3新特性的滤镜效果，学会了这些那么我们这群爱美爱帅的大web是不是就可以完美的用代码实现照片美化了捏~~好，咱们先把照片后面的白框实现，<style> #p1{ /*给p定义宽高和颜色*/ width: 200px; height: 250px; background: white; /* 内填充距离照片为15px ，文字居中*...
前言前段时间在工作中正好需要这个功能，但是找了很多都不能完美的实现，所以在此就自己做了一个固定表头的方法，主要用到了css3中的translate和一小段js代码，下面来一起看看吧。效果如下：感觉是不是很和谐，而且代码也少，不足的是IE9以下不支持translate属性，但现在也没多少要考滤IE9以下的兼容了吧，做前端老兼顾低版本的浏览器难免会让自己束手束脚。。。。下面来看下代码吧HTML<p class="box"><table><thead><tr><th>1</th...
CSS3在hover下的几种效果代码分享，CSS3在鼠标经过时的几种效果集锦效果一：360旋转 修改rotate(旋转度数)* { transition:All 0.4s ease-in-out; -webkit-transition:All 0.4s ease-in-out; -moz-transition:All 0.4s ease-in-out; -o-transition:All 0.4s ease-in-out; }*:hover { transform:rotate(360deg); -webkit-transform:rotate(360deg); -moz-transform:rotate(360d...
这篇文章运用实例代码给大家介绍了利用CSS3如何实现按钮鼠标悬浮光圈效果，有需要的朋友们可以参考学习，下面来一起看看吧。1 、HTML相关知识点 HTML(超文本标记语言)是网页的核心、首先你要学会，不要害怕，HTML很容易学习的，刚开始多记多练，但是到最后还是要自己深入专研，简单的入门是很快，但学好HTML是成为Web开发人员的基本条件。2、CSS3相关知识点 通过使用 CSS 来提升工作效率！在我们的 CSS 教程中，学到如何使用 ...
前言css的设计之巧妙，实现之精妙，细细寻味，其妙非凡，妙不可言。这波浪线，取巧的运用了linear-gradient属性，合角度、颜色、位置于一体，配合background-size，background-repeat，化一为多，平滑过渡。哇，这最后的效果太巧秒了！尘世间没有词来形容了…… 实现方法语法：linear-gradient(direction, color-stop 1, color-stop 2,……）简单用法：background-image: linear-gradient(red, transparent);增加角度，linear-...
本文介绍了Css3新特性应用之视觉效果，具体有单侧阴影、不规则投影、染色体效果、毛玻璃效果、折角效果，具体实现如下：一、单侧阴影1、box-shadow属性的应用，格式：h-shadow v-shadow blur spread color inset属性取值介绍 h-sahdow：水平阴影的位置，允许负值①v-shadow：垂直阴影的位置，允许负值②blur：模糊距离③spread：阴影的尺寸，扩张距离，可以为负数④color：阴影的颜色⑤inset/outset：内部或者外部阴影2、阴影的扩张...
本篇文章主要介绍了CSS3打造百度贴吧的3D翻牌效果示例，非常具有实用价值，有想去的可以了解一下。今天给大家带来一个CSS3制作的翻牌效果，就是鼠标移到元素上，感觉可以看到元素背后的信息。大家如果制作考验记忆力的连连看、扑克类的游戏神马的，甚至给女朋友写一些话语，放在使用该实例制作的相册之后都可以尝试下，哈~效果图：实例用到的一些CSS3的新属性：a、-webkit-perspective: 800px;perspective （透视，视角）：属性定义...
实现如图所示的动画效果：预载动画一：双旋圈在两个不同方向旋转的圆圈。我们对内圈的转速定义了一个CSS代码，即内圈比外圈的速率快2倍。实现如图所示：html代码：<body style="background: #ffb83c;"><p id="preloader-1"><span></span><span></span></p></body>css代码：#preloader-1{position: relative; }#preloader-1 span{position: absolute;border:8px solid #fff;border-top:8px solid transparent;border-radius: 999px;...
这篇文章主要介绍了基于CSS3制作立体效果导航菜单的相关资料,需要的朋友可以参考下 先给大家展示效果图，效果如下： 源代码： CSS Code复制内容到剪贴板<style> .keleyi-com-nav{ width:px; height: px; font:bold /px Arial; text-align:center; margin:px auto ; border-radius: px; } .keleyi-com-nav a{display: inline-block; -webkit-transition: all .s ease-in; -moz-transit...
效果图如下：实例代码如下：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <title>css3给按钮添加背景渐变动画</title> <!-- @author：SM @email:sm0210@qq.com @desc： css3给按钮添加背景渐变动画 --> <style type="text/css"> button { color:#FFF; font-size:16px; outline:none; width:300px; hei...
兼容性既然是CSS3的属性，我们当然要来看看兼容性：http://caniuse.com/css-reflections/embed接下来，我们来了解box-reflect如何使用？语法如下： -webkit-box-reflect：none | <direction> <offset>? <mask-box-image>?box-reflect:none | <direction> <offset>? <mask-box-image>?属性说明：none：此值为默认值，表示无倒影；direction：生成倒影的方向above：指定倒影在对象的上边 below：指定倒影在对象的下边 left：指定倒影...
这篇文章主要介绍了css3加js做一个简单的3D行星运转效果实例代码,效果非常炫酷，有想去的可以了解一下。前几天在园子里看到一篇关于CSS3D行星运转的文章，感觉这个效果也太酷炫了，于是自己也就心血来潮的来尝试的做了一下。因为懒得去用什么插件了，于是就原生的JS写，效果有点粗超，还有一些地方处理的不是很好，如果有好的建议万望留言告知，不胜感谢。好了不说废话了，下面附上代码。HTML部分<p class="path-Saturn"><p id="Sa...
@-moz-keyframes tada{0%{-moz-transform:scale(1);}10%,20%{-moz-transform:scale(0.9) rotate(-3deg);}30%,50%,70%,90%{-moz-transform:scale(1.2) rotate(3deg);}40%,60%,80%{-moz-transform:scale(1.2) rotate(-3deg);}100%{-moz-transform:scale(1) rotate(0);}}@-webkit-keyframes tada{0%{-webkit-transform:scale(1);}10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);}30%,50%,70%,90%{-webkit-transform:scale(1.2) ...
前言H5站点需要IOS滑动按钮的效果,想了想似乎CSS3能搞起,就折腾出来了...挺简单的..请看注释效果代码<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS3模拟IOS开关</title> <style type="text/css" media="screen"> /* ========================================================================== 设置根元素字体大小 ========================================================================== *...
鼠标悬停，图片360度旋转效果：代码：<style> .rotate-demo { width: 220px; height: 220px; margin: 0 auto; background: no-repeat url("images/author.jpg") left top; -webkit-background-size: 220px 220px; -moz-background-size: 220px 220px; background-size: 220px 220px; -webkit-border-radius: 110px; b...