首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS3 倒影

除了刚刚提到的这些CSS3属性之外,还有一个高逼格的效果 —— 倒影。 本文主要内容 1. CSS3 倒影简介 2. CSS3 倒影语法 3. CSS3 倒影基本用法 1....(原图)的上方; below:表示生成的倒影在对象(原图)的下方; left:表示生成的倒影在对象(原图)的左侧; right:表示生成的倒影在对象(原图)的右侧; offset:用来设置生成倒影与对象...CSS3 倒影基本用法 3.1 图片倒影: 下面的示例定义一个简单的倒影样式,倒影的位置我们可以根据实际情况来设置,此处倒影为图片下方。效果图如下: ?...接下来继续进行改进,设计CSS3渐变倒影,通过渐变遮罩逐渐盖住下面的倒影,制作出渐隐效果。...3.4 文字倒影 当然,我们除了可以通过图片设置倒影,也可以为网页上的任何对象设置倒影,下面做个文字本倒影的例子。 ?

1.1K60

android 实现倒影

文章中出现的Gallery 已经不再适用,替代方法请看我的另一篇文章http://blog.csdn.net/xiangzhihong8/article/details/51120460 不过对于文章中说的倒影的原理是可以借鉴的...myGallery.java: import android.content.Context;   import android.graphics.Camera;   import android.graphics.Matrix...,用过PhotoShop的都知道添加倒影就是将原有图片倒置,设置渐变式的显示,再将其放在原图片下面就行了,这里的方法也是一样 在为Gallery添加图片的同时,为每个图片添加倒影,需要在Adapter... matrix = new Matrix();               matrix.preScale(1, -1); // 实现图片的反转             Bitmap reflectionImage... = Bitmap.createBitmap(originalImage, 0,                       height / 2, width, height / 2, matrix

1.4K50
您找到你想要的搜索结果了吗?
是的
没有找到

Android 滑动效果进阶篇(六)—— 倒影效果

倒影绘制 ImageAdapter继承自BaseAdapter,详细实现可见 Android 滑动效果入门篇(二)—— Gallery 这里重点介绍倒影原理及实现 倒影原理: 倒影效果是主要由原图+间距...+倒影三部分组成,高度大约为原图的3/2(原图为1、倒影为1/2) 原图,就是我们看到了最开始的图片 间距,是原图与倒影之间的间隙,如:reflectionGap = 4; 倒影,是原图下半部分1/2高度...,通过矩阵变换matrix.preScale(1, -1); 获取倒立图片,然后再加上线性遮罩和阴影实现 倒影实现: /** 反射倒影 */ public boolean createReflectedImages...matrix = new Matrix(); matrix.preScale(1, -1); // 图片矩阵变换(从低部向顶部的倒影) Bitmap reflectionImage =...Bitmap.createBitmap(originalImage, 0, height/2, width, height/2, matrix, false); // 截取原图下半部分 Bitmap

1.5K10

Android Matrix

Matrix的数学原理 在Android中,如果你用Matrix进行过图像处理,那么一定知道Matrix这个类。Android中的Matrix是一个3 x 3的矩阵,其内容如下: ?...Matrix的对图像的处理可分为四类基本变换: Translate 平移变换 Rotate 旋转变换 Scale 缩放变换 Skew...实际中当然不能完全按照字面上的说法去理解Matrix。同时,在Android的文档中,未见到用Matrix进行透视变换的相关说明,所以本文也不讨论这方面的问题。...其中 set用于设置Matrix中的值。 pre是先乘,因为矩阵的乘法不满足交换律,因此先乘、后乘必须要严格区分。先乘相当于矩阵运算中的右乘。...对称变换 除了上面讲到的4中基本变换外,事实上,我们还可以利用Matrix,进行对称变换。所谓对称变换,就是经过变化后的图像和原图像是关于某个对称轴是对称的。比如,某点 ? 经过对称变换后得到 ?

1.6K40

-webkit-box-reflect镜像倒影

实现倒影的基本语法 实现倒影的基本语法非常的直观,假设我们想给下面的图片增加倒影效果,可以这样写: img { -webkit-box-reflect: below; } 上面这个例子中倒影出现了图片的下方...倒影偏移量 Offset属性值用来定义图片和倒影影像之间的间距。...参考下面的代码: img { -webkit-box-reflect: below 10px; } 上面的代码中,我们使图片和倒影影像之间相聚10px; 给倒影增加消隐效果 在现实生活中,倒影的出现通常是上半部比较清晰...因为所有的属性都是来实现倒影的,而且这些属性都有火狐浏览器独有的前缀,和Webkit的倒影不冲突,所以在代码在可以把两个版本倒影方法都写上,保证两种浏览器里都有效果。...视频倒影 官方文档中说当倒影的实体内容变化时,倒影的内容也会相应更新。因此,这种技术用在视频是有特殊的效果。

80320
领券