首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    CSS 如何实现“咖啡错觉”效果?神奇~

    咖啡错觉实际上是一种几何光学视错觉,简而言之就是“大脑没有真实的解释眼睛所看到的画面”。 前面图中的左右两张图实际上是一样的;后面图中的横线实际上也是平行的,神奇吧?...本篇要做的就是用 css 实现类似的“咖啡错觉”效果,用在网页修饰中,可彰显逼格。...码上掘金效果: https://code.juejin.cn/pen/7163202033904779294 确实这样,没有写任何斜线的效果,但是视觉看起来,横线像是在倾斜。...利用 CSS 实现视错觉,做做网页效果,一定也会惊艳~~ 推荐一篇文章:# 眼见不一定为实,设计中11种视错觉 原来很多页面设计效果、LOGO 设计都利用了【视错觉】这一点!

    43730

    Android实现照片效果的实例代码

    照片这种功能现在应该算是挺常见了,在很多应用中你都可以经常看到照片的身影。...它的设计思路其实也非常简单,用一个GridView控件当作“”,然后随着GridView的滚动将一张张照片贴在“”上,这些照片可以是手机本地中存储的,也可以是从网上下载的。...现在可以运行一下程序了,效果如下图所示: ? 可以看到,滚动照片,会异步加载图片到相应的ImageView上。随着加载图片的增多,会释放掉一些之前加载过的图片,你多滚动几次就可以看得出了。...在实际的项目中配合适当的本地缓存效果会更好。 打开DDMS,我们可以发现,由于有LruCache帮我们管理图片缓存,不管如何滚动照片,程序内存始终会保持在一个合理的范围内。 ?...本篇文章的重点在于如何对图片进行更好的回收,因此照片只是简单地使用GridView进行了展示,想要看更酷更炫的照片效果的朋友,可以参考我后面的一篇文章Android瀑布流照片实现,体验不规则排列的美感

    1.2K10

    JS动画效果

    JavaScript 动画框架 框架封装 ---- 相信大家在很多门户网站上都可以看到动画的交互效果,通过这些动画生动地体现了我们在网页上的交互效果,现在我们就来学习一下这些动画效果的分解动作吧。...动画的实现思路都是通过连续改变物体的属性值来实现效果的。一般来说都是改变一个物体的left,right,width,height,opacity....li> 四.链式动画 首先把上面的简单运动框架抽取出来然后加上透明度的变化,放进一个人通用的JS文件里movement.js...filter: alpha(opacity:30); opacity: 0.3; } <script src="move.<em>js</em>...JSON的格式: {键:值,键:值} 完善后的运动框架<em>js</em>:movement.<em>js</em> function getStyle(obj,attr) { if(obj.currentStyle){

    20.7K81

    Android照片加强版,使用ViewPager实现画廊效果

    记得关于照片的文章我已经写过好几篇了,有最基本的照片,有瀑布流模式的照片,后来又在瀑布流的基础之上加入了查看大图和多点触控缩放的功能。...恩,确实,好像比较高端的一些应用都有这样的效果,那么本篇文章中我们来继续对照片这个Demo进行改进,让它变得更加高端大气上档次!...另外,本篇文章的代码是完全在之前文章的基础上进行开发的,所以如果你还没有看过我前面所写的关于照片的文章,建议先去阅读一下 Android瀑布流照片实现,体验不规则排列的美感 和 Android多点触控技术实战...好了,这样的话,所有的代码就已经完成了,可以运行一下看看完整的效果了。点击任意一张图片可以查看大图,然后通过左右滑动可以浏览前后的图片,并且仍然能够通过多点触控对图片进行缩放,效果如下图所示: ?...目前这个照片Demo的效果已经不亚于市场上一些常见的图片浏览程序了吧。 好了,今天的讲解到此结束,有疑问的朋友请在下面留言。 源码下载,请点击这里

    2.4K70

    圆盘时钟效果 原生JS

    圆盘时钟 旋转时钟 数字时钟 写在前面 仿荣耀手机时钟,设计的同款时钟效果 实现效果 ?...背景采用的是一个炫彩流光的效果,利用了CSS3新增的动画效果 这部分的炫彩流光效果在之前的博客中有详细讲到 炫彩流光效果 指针时钟 通过定位将三根针重叠在一起,下端对齐都摆在原点,通过transfrom-origin...+ (rotateM / 60)) + 'deg' + ')' 就像这样把分针旋转了多少反馈给时针,60分钟一个小时,所以是除以60 旋转时钟 这里采用的是clip-path属性采取另一半的圆,圆环的效果采用的是大小圆的思路...226,20,233),rgb(41, 41, 41)); clip-path: inset( 0 50% 0 0 ); transform-origin: center center; } JS...,圆环的实现,也只是通过了简单的裁剪,想不到实现圆弧的效果 代码有点长,如需完整代码,可以留言或私信

    11.7K20
    领券