本文讲述的是Qt Widget 利用 Qt4.5 实现酷炫透明窗体,QWidget类中的每一个窗口部件都是矩形,并且它们按Z轴顺序排列的.一个窗口部件可以被它的父窗口部件或者它前面的窗口部件盖住一部分. 先来看内容吧. Qt4.2引入了QWidget::setWindowOpacity函数, 可以为窗体设置透明度, 从0.0到1.0之间, 值越小越透明. 经过设置的窗体可以整体呈现透明的效果. 但这种设置比较粗糙, 只能设一个整体的效果,大概只有比如像拖动的时候能用一下,大多数时候都不太实用.在…

前言 题目地址 利用 CSS animation 制作一个炫酷的 Slider 思路整理 首先页面包含三种东西 一个是type为radio的input其实就是单选框 二是每个单选框对应的label 三是你要用作背景的每个图片 然后具体实现思路是你点击每个label然后出现对应的图片 基本布局 首先是对界面进行布局 <div class="page"> <div class="slider"> <input id="img1&q…

使用NestedScrollView+ViewPager+RecyclerView+SmartRefreshLayout打造酷炫下拉视差效果并解决各种冲突 如果你还在为处理滑动冲突而发愁,那么你需要静下心来看看这边文章,如果你能彻底理解这篇文章中使用的技术,那么,一切滑动冲突的问题解决起来就轻而易举了:先扔一个最终实现的效果图 先分析下效果图中实现的功能点 顶部下拉时背景图形成视差效果 上拉时标题栏透明切换显示 底部实现TabLayout+ViewPager+Fragment+RecyclerV…

转载一个很牛逼的控件收集帖... 第一部分 个性化控件(View) 主要介绍那些不错个性化的 View,包括 ListView.ActionBar.Menu.ViewPager.Gallery.GridView.ImageView.ProgressBar.TextView.ScrollView.TimeView.TipView.FlipView.ColorPickView.GraphView.UI Style 等等. 一.ListView android-pulltorefresh一个强大的拉动…

写这篇文章的缘由是因为看到了这个页面: 戳我看看(移动端页面,使用模拟器观看) 运用 CSS3 完成的 3D 视角,虽然有一些晕3D,但是使人置身于其中的交互体验感觉非常棒,运用在移动端制作一些 H5 页面可谓十分博人眼球. 并且掌握原理之后制作起来也并不算废力,好好的研究了一番后将一些学习过程共享给大家. 下面进入正文:(一些 Gif 图片较大,需要等待一会) 3D 效果示意 百闻不如一见,先直观感受一下上述我所说的效果: 最好能点进去看看,这里我使用了带背景色的 div 作为示例,我们的视角…

如上图所见,本文就是要实现上面那种效果. 由于最近AlloyTouch要写一个下拉刷新的酷炫loading效果.所以首选大波浪进度图. 首先要封装一下大波浪图片进度组件.基本的原理是利用Canvas绘制矢量图和图片素材合成出波浪特效. 本文的代码你可以在这里https://github.com/AlloyTeam/AlloyTouch/blob/master/refresh/wave/image_wave.html找到. 了解quadraticCurveTo quadraticCurveTo()…

最近除了做业务,也在尝试学习h5和移动端,在这个过程中,学到了很多,利用h5和canvas做了一个爱心鱼的小游戏.点这里去玩一下 PS: 貌似有点闪屏,亲测多刷新两下就好了==.代码在本地跑都不会闪,放到博客里就闪了,我也不知道为什么...回头我再看看是什么问题. 另外,我把代码放到github上了,博友们也可以直接down代码,不需要任务服务,本地就能跑起来.大家要是觉得还行,就给个star吧!源码地址点这里 首先截个图来看看界面效果: 下买我就做游戏的步骤来分享总结一下用到的h5API和一些…

Android5.0+推出的新控件感觉特别酷,最近想模仿大神做个看图App出来,所以先把这些新控件用熟悉了. 新控件的介绍.使用等等网上相应的文章已经特别多了,题主也没那能力去写篇详解出来,本篇随笔记录的主要是题主学习这些新控件时遇见的一些困惑以及在搞了半天后的一丝理解,或许也有新手也会碰到跟我一样的困惑,相互学习哈,如果有哪个地方理解错了,还望告知. 效果 首先看下效果,本篇也就是只记录以下两张动图中所涉及到的新控件 AppBarLayout+CollapsingToolbarLayout+T…

原文:WPF换肤之六:酷炫的时区浏览小精灵 由于工作需要,经常要查看到不同地区的 当前时间,以前总是对照着时区表来进行加减运算,现在有了这个小工具以后,感觉省心了不少.下面是软件的截图: 效果图赏析 在界面上,有能够冉冉升起的太阳或者月亮,有缓慢飘动的浮云,有青葱翠绿的花叶, 当然,也有显目的时区显示.如果要是放在WinForm时代,要实现这样的界面,真的是繁琐和复杂,但是在WPF中,利用XAML控制前台界面,利用CodeBehind控制窗口拖动,日月变换等等逻辑,真的是简便而且效果强大.其基于…

开门见山,先上效果吧!感觉可以的用的上的再往下看. 心动吗?那就继续往下看! 先上页面结构吧,也就是wxml文件,其实可以理解成微信自己封装过的html,这个不多说了,不懂也没必要往下看了. <scroll-view class="scroll-view_H" scroll-x scroll-with-animation style="width: 100%;height:{{windowHeight}}px" bindscroll="getSele…

开门见山,先上效果吧!感觉可以的用的上的再往下看. 心动吗?那就继续往下看! 先上页面结构吧,也就是wxml文件,其实可以理解成微信自己封装过的html,这个不多说了,不懂也没必要往下看了. <scroll-view class="scroll-view_H" scroll-x scroll-with-animation style="width: 100%;height:{{windowHeight}}px" bindscroll="getSele…

概述 本自定义动画进度酷炫View,是加载进度动画的自定义View,继承于ImageView来实现,主要实现蒙层加载进度的加载进度效果. 支持水平左右加载和垂直上下加载四个方向,同时也支持自定义蒙层进度颜色. 详细 代码下载:http://www.demodashi.com/demo/13442.html 一.概述 本自定义动画进度酷炫View,是加载进度动画的自定义View,继承于ImageView来实现,主要实现蒙层加载进度的加载进度效果. 支持水平左右加载和垂直上下加载四个方向,同时也支持…

本篇文章已授权微信公众号 hongyangAndroid (鸿洋)独家公布 转载请标明出处: http://blog.csdn.net/zxt0601/article/details/53040506 本文出自:[张旭童的CSDN](http://blog.csdn.net/zxt0601) 代码传送门:喜欢的话.随手点个star.多谢 https://github.com/mcxtzhang/PathAnimView 一 概述 原本仅仅是想模仿一下我魂牵梦萦的StoreHouse效果.没想到意…

代码地址如下:http://www.demodashi.com/demo/12826.html 前言: 前几天在看手机直播的时候,自己就用上了触手app.一进到主页就看上了里面页面切换的效果,自己想这种效果用什么控件可以实现呢.不闲扯了,直接上图更有意思. 触手app新版已经改版了,大家请下载. 效果图: 触手app主页效果图: 看到这个效果图后,第一想到的就是RecyclerView貌似可以实现这种效果,但是用RecyclerView自己的api还是有很多问题的,先不说如何实现的吧,看下实现出…

原文:Android零基础入门第52节:自定义酷炫进度条 Android系统默认的ProgressBar往往都不能满足实际开发需要,一般都会开发者自定义ProgressBar. 在Android开发中,自定义ProgressBar一般有三种思路来完成. 一.在系统进度条基础上优化 首先来看一下style="@android:style/Widget.ProgressBar.Horizontal"的源码.鼠标移动到style属性值上,按住Ctrl键,鼠标左键点击即可打开对应资源文件. 当…

现在Flutter的路由效果已经非常不错了,能满足大部分App的需求,但是谁不希望自己的App更酷更炫那,下面介绍几个酷炫的路由动画. 其实路由动画的原理很简单,就是重写并继承PageRouterBuilder这个类里的transitionsBuilder方法. 不过这个方法还是有很多写法的,通过写法的不同,产生的动画效果也有所不同. 1.渐隐渐现的动画效果 先编写一个主入口方法,还是最简单的格式,只不过home属性,使用的RouterFirst的组件是我们自定义的,需要我们再次编写.入口文件的…

这篇文章讲的是如何利用python制作狂拽酷炫吊炸天的二维码,非常有趣哦! 可能你见过的二维码大多长这样: 普普通通,平平凡凡,没什么特色... 但,如果二维码长这样呢! 或者 这样! 是不是炒鸡好看! 这篇文章 就是 教你如何用Python制作这些酷炫的二维码! 实现这些功能的是Python的一个第三方库——myqr,它便是今天的主角了. myqr可以根据网址制作对应的二维码,二维码有三种形式可供选择: 普通二维码 艺术二维码 动态二维码 具体什么样,就是上面图片呈现的那些了! 到底怎么动手制…

巧用 CSS 实现酷炫的充电动画 循序渐进,看看只使用 CSS ,可以鼓捣出什么样的充电动画效果. 画个电池 当然,电池充电,首先得用 CSS 画一个电池,这个不难,随便整一个: 欧了,勉强就是它了.有了电池,那接下来直接充电吧.最最简单的动画,那应该是用色彩把整个电池灌满即可. 方法很多,代码也很简单,直接看效果: 有内味了,如果要求不高,这个勉强也就能够交差了.通过蓝色渐变表示电量,通过色块的位移动画实现充电的动画.但是总感觉少了点什么. 增加阴影及颜色的变化 如果要继续优化的话,需要添加点…

老孟导读:此文讲解3个酷炫的3D动画效果. 下面是要实现的效果: Flutter 中3D效果是通过 Transform 组件实现的,没有变换效果的实现: class TransformDemo extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('3D 变换Demo'), ), body: Container( a…

此文章是接着上次写的<酷炫视频播放器制作_界面篇>将其完善,我们主要给大家介绍一下如何利用JS脚本来控制视频的播放.为了让大家能够保持对要完成的功能有直接的了解,我们还是将效果图附到文章里面 完成本篇文章的代码编写,你能GET到200+代码量,且能够掌握很多有关video标签的属性,函数,事件的应用.当然希望大家也多多鼓励我写出更多更实际的文章来帮助大家学习的提升 第一步:我们先简单实现播放与暂停的效果,为了整个界面的DOM操作简单一点,我们就用jQuery来配合界面的操作 $(functio…

本文将介绍利用 CSS 实现滚动视差效果的一个小技巧,并且,利用这个技巧来制作一些有意思的交互特效. 关于使用 CSS 实现滚动视差效果,在之前有一篇文章详细描述过具体方案 - CSS 实现视差效果,感兴趣的同学可以先看看这篇文章. 这里,会运用上这样一种纯 CSS 的视差技巧: 使用 transform: translate3d 实现滚动视差 这里利用的是 CSS 3D,实现滚动视差效果. 原理就是: 我们给容器设置上 transform-style: preserve-3d 和 perspe…

最近,在 CodePen 上看到这样一个非常有意思的效果: 这个效果的核心难点在于气泡的一种特殊融合效果. 其源代码在:CodePen Demo -- Goey footer,作者主要使用的是 SVG 滤镜完成的该效果,感兴趣的可以戳源码看看. 其中,要想灵活运用 SVG 中的 feGaussianBlur 滤镜还是需要有非常强大的 SVG 知识储备的.那么,仅仅使用 CSS 能否实现该效果呢? 嘿嘿,强大的 CSS 当然是可以的.本文,就将带领大家一步步使用纯 CSS,完成上述效果. 借助 S…

在 WeGame 的 PC 端官网首页,有着非常多制作精良的基于滚动的动画效果. 这里我简单截取其中 2 个比较有意思的转场动画,大家感受感受.转场动画 1: 转场动画 2: 是不是挺有意思的,整个动画的衔接是基于滚轮的滚动触发的.我猜测是使用了类似 TweenMaxJS 的动画库实现. 当然,这两处酷炫有意思的转场动画,基于最新的 CSS @scroll-timeline 规范,也是可以大致实现的.本文就将尝试使用纯 CSS,模拟上述的两个转场动画. 当然,关于 CSS 最新的 CSS @sc…

粒子动画,顾名思义,就是页面上存在大量的粒子构建而成的动画.传统的粒子动画主要由 Canvas.WebGL 实现. 当然,不使用 HTML + CSS 的主要原因在于,粒子动画通常需要较多的粒子,而如果使用 HTML + CSS 的话势必需要过多的 DOM 元素,这也就导致了使用 HTML + CSS 构建的粒子动画在性能上毫无优势. 当然,如果仅仅是从效果的角度而言,使用 CSS 构建的粒子动画一样可以做到非常的令人震撼. 本文,将尝试利用 CSS 来构建粒子动画. 工欲善其事必先利其器 OK…

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

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

这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti…

简介 运用css3先在平面空间组成立方体盒子,再让整个盒子翻转起来,先来张效果图: 步骤 1.先用css将6张图片摆成下图的样子: 下面就是通过css3的3D变换将每个面进行翻转,使之成为一个立体的盒子,代码如下: //左面 .pic2{ transform:rotateY(90deg); //沿y轴翻转90度 transform-origin:right; //以右边为轴 } //前面 .pic6{ transform:translateZ(100%); //垂直屏幕向外移动立方体的长度 }…

一.引言 在前一篇文章已经详细介绍了SignalR了,并且简单介绍它在Asp.net MVC 和WPF中的应用.在上篇博文介绍的都是群发消息的实现,然而,对于SignalR是为了实时聊天而生的,自然少了不像QQ一样的端对端的聊天了.本篇博文将介绍如何使用SignalR来实现类似QQ聊天的功能. 二.使用SignalR实现端对端聊天的思路 在介绍具体实现之前,我先来介绍了使用SignalR实现端对端聊天的思路.相信大家在前篇文章已经看到过Clients.All.sendMessage(name,…

CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文章为大家挑选了15个超炫的 CSS 动画效果的例子,这些 Demo 可以说都是艺术品.(为保证最佳的效果,请在 Chrome.Firefox 和 Safari 等现代浏览器中浏览) 9. 3D Synth Pure CSS 3D Synthesizer (mousedown for rotation…