CSS3倒影效果

比较简单的倒影效果 <pre><div class="box-reflect"><img src="https://www.baidu.com/img/bd_logo1.png" alt="" height="200"/></div> .box-reflect { margin: 210px auto; width: 200px;}.box-reflect img { -wekb…

实际上还有很多CSS新属性并未包含进CSS3官方标准中.-webkit-box-reflect属性就是以谷歌浏览器为代表的Webkit渲染引擎独有的特征.-webkit-box-reflect的作用是让图片出现倒影. 如果一个图片,我们想要给其增加倒影,做法如下: html: <img src="images/7.jpg"/> css样式: img{ -webkit-box-reflect: below; } 效果: 如果希望倒影和图片之间有空隙可是设置css样式: img…

CSS3制作文字半透明倒影效果

效果如图.Ps.背景线条是背景图勒,和本文效果无关... html代码如下: <div class="content"> <h3 title="专业技能">专业技能</h3> <div class="next"></div> </div> 有两种实现方式: 1.box-reflect (属性详情见http://css.doyoe.com/…

css3 box-reflect 倒影效果

语法: box-reflect:包括3个值. 1. direction 定义方向,取值包括 above . below . left . right. above: 指定倒影在对象的上边 below: 指定倒影在对象的下边 left: 指定倒影在对象的左边 right: 指定倒影在对象的右边 2. offset定义反射偏移的距离,取值包括数值或百分比,其中百分比根据对象的尺寸进行确定.默认为0.用长度值来定义倒影与对象之间的间隔.可以为负值.用百分比来定义倒影与对象之间的间隔.可以为负值. 3.…

HTML5/CSS3实现图片倒影效果

在线演示本地下载…

三分钟学会用 js + css3 打造酷炫3D相册

之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的js初学者感受到学习的乐趣.我会尽可能讲得详细,不需要你对css和js有多么高深的理解,你也可以跟着一步步做出来.如果你是为了讨女票开心,那么也完全可以把图片换成对方的照片,在某个特别的时刻给对方一个惊喜哦 ~ css3的强大使得网页的展示变得空前得丰富起来,再配合简单的js代码,就可以实现这个效果.…

css3+jquery制作3d旋转相册

首先来看一下今天的炫酷效果: 首先分析一下这张图片: 1.每张图片都有倒影 2.这11张图片呈圆形均匀排列 3.可旋转,上下移动(当然这是效果做出来以后,图片是分析不出来的) 那下面就开始吧. 一.准备新建三个文件夹分别命名为css,js,img分别存放demo.css,jquery.js.demo.js,11张示例图片.新建demo.html将demo.css,jquery.js,demo.js引入. 二.图片倒影制作 <div id="wrap"> <img s…

CSS3图片倒影技术实现及原理

CSS3图片倒影技术实现及原理目前为止我们已经探讨了很多CSS3中的新功能和新特征.除了上面这些,实际上还有很多CSS新属性并未包含进CSS3官方标准中,像谷歌浏览器或火狐浏览器等都会利用CSS的浏览器引擎前缀(Vendor Prefix)来实现很多自定义的CSS功能.-webkit-box-reflect属性就是以谷歌浏览器为代表的Webkit渲染引擎独有的特征.-webkit-box-reflect的作用是让图片出现倒影. 实现倒影的基本语法实现倒影的基本语法非常的直观,假设我们想给下面…

GJM ：JS + CSS3 打造炫酷3D相册 [转载]

感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经作者同意必须保留此段声明!如有问题请联系我,侵立删,谢谢! 我的博客:http://www.cnblogs.com/GJM6/ - 传送门:[点击前往] 中秋主题的3D旋转相册如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的js初学者…

CSS3必须要知道的10个顶级命令

1.边框圆角(Border Radiuas) 这个是我们在平常很常用的吧,以前我在用div圆角的时候,特别特别的痛苦,不管是用CSS来画圆角,还是用图片来画圆角都不那么容易,但是现在好了,在CSS3中,直接只需要如下面饿代码,就能做出美轮美奂的圆角效果了~~~ #box1 { border: 1px solid #699; /* for Mozilla Firefox */ -moz-border-radius: 20px; /* for Safari & Google Chrome */ -w…

css3 倒影

说起倒影效果,在传统网页中,我们只能使用photoshop进行事先将倒影设计好,然后导入到网页中,这样不但耗费资源,也阻碍了开发的效率.而 css3新增了Reflections板块,css Reflections允许css设计倒影. 目前, css Reflections仅获得webkit引擎的支持,我们只能够在Chrome和Safari浏览器中测试,相信以后会普及的. css3的box-reflect属性,可以使我们进行图片.文字等的倒影设计,具体语法: 语法: box-reflect:…

CSS3 必须要知道的10 个顶级命令

来源:http://www.cnblogs.com/damonlan/archive/2012/04/23/2465569.html 作者:浪迹天涯 1.边框圆角(Border Radiuas) 这个是我们在平常很常用的吧,以前我在用div圆角的时候,特别特别的痛苦,不管是用CSS来画圆角,还是用图片来画圆角都不那么容易,但是现在好了,在CSS3中,直接只需要如下面饿代码,就能做出美轮美奂的圆角效果了~~~ #box1 { border: 1px solid #699; /* for Mozil…

一张图教会CSS3倒影

分享示例图片在CSS3之前,想要实现示例图片这样的一个倒影效果一般只能通过处理图片的方式,而CSS3问世之后,想要实现这样的效果变得非常简单,只需一个CSS3属性就可以轻松实现了. 这就是今天所要提到的box-reflect属性. 咱们先看看W3C给出的box-reflect语法: box-reflect:none | <direction> <offset>? <mask-box-image>? (?代表可缺省,也就是后俩属性可有可无)<direction&…

css3组件实战--绚丽效果篇

代码地址如下:http://www.demodashi.com/demo/11656.html 一.3D风景动态骰子在线演示 1.css3D.动画基础知识预备 2.创建一个3D场景先放置一个.box的div父容器,在box里放置一个.dice的div,然后在其里面放置6个div,分别表示骰子的6个面. <div class="box"> <div class="dice"> <div class="surface fron…

CSS3中制作倒影box-reflect

目前仅在Chrome.Safari和Opera浏览器下支持 box-reflect:none | <direction> <offset>? <mask-box-image>? 由于此属性并不是W3C标准属性,在具体使用之时,还是需要添加浏览器的私有属性,根据浏览器的兼容性,使用box-reflect时需要添加-webkit和前缀: -webkit-box-reflect:none | <direction> <offset>? <mask…

IT兄弟连 HTML5教程 CSS3属性特效倒影

在Web制作中,有些时候需要实现一些倒影的效果.在传统网页中,我们只能使用photoshop事先将倒影设计好,然后导入到网页中,这样不但耗费资源,也阻碍了开发效率.而CSS新增了Reflections板块,CSS Reflections允许设计倒影,目前,CSS Reflections仅获得webkit引擎的支持,我们只能够在Chrome和Safari浏览器中测试.CSS3的box-reflect属性,使我们可以对图片.文字等进行倒影设计,具体语法: box-reflect: none | <d…

CSS3实用指南初读笔记

1.7.1 浏览器前缀当一个浏览器实现了一个新的属性.值或者选择器,而这个特性还不是处于候选推荐标准状态的时候,在属性前面会添加一个前缀以便于它的渲染引擎识别. CSS属性的浏览器前缀: 前缀渲染引擎使用该引擎的浏览器 -khtml- KHTML konqueror -ms- Trident Internet -moz- …

纯CSS3实现的一些酷炫效果

之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看下页面结构: <body> <div class="container">  <div class="face">  <div class="hair&…

CSS3 border-radius边框圆角

在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 1. 介绍 1.1 圆角属性 CSS3提供了5种圆角属性: border-radius :同时设置4个边框的圆角样式. border-top-left-radius :设置左上角边框的圆角样式. border-top-right-radius :设置右上角边框的圆角样式. border-bottom…

CSS3 3D立方体效果－transform也不过如此

CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立方体的效果实例来深入了解css3的transform属性,下面是这个实例的截图,加上动画还能旋转起来哟,是不是很酷炫?换上你喜欢的女生的照片,就可以大胆的撩妹了,哈哈!想要查看demo,请点击这里,3D transform立方体效果初识transform 顾名思义:变换.就可以想到它可以做很多很多…

使用CSS3实现一个3D相册

CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一个用CSS3实现的立方体实例,详细讲解了3D旋转和transform等属性. 本文再来利用CSS3属性来编写一个实例,话不多说,先直接看看效果.3D相册实例DEMO 因为前面已经讲解过一些属性的用法,此篇文章不再赘述,只记录这个实例的编码过程.项目代码已上传至github,项目代码github地址…

Web大前端时代之：HTML5+CSS3入门系列

准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTDotNet/ 思维导图(不断更新): 图片:http://dnt.dkill.net/DNT/HTML5/index.jpg 源码:http://dnt.dkill.net/DNT/HTML5/h5.zip 在线文档:http://dnt.dkill.net/DNT/HTML5 00.Web大前端时…

07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/dunitian/LoTHTML5/tree/master/LoTHTML5/4.HTML5定位定位类型 IP 定位优点任何位置都可用在服务器端处理缺点不精确,一般精确到城市运算代价大,可能出错代理的时候就可能定位出错了 GPS定位优点定位精准缺点定位时间长,耗电量大室内效果不好需要…

前端制作动画的几种方式（css3，js）

制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式. 1.css的transition. 语法: transition: property duration timing-function delay; property:填写需要变化的css属性如:width,line-height,font-size,color等; duration:完成过渡效果需要的时间(…