用HTML和CSS实现WWDC 2015上的动画效果
用HTML和CSS实现WWDC 2015上的动画效果
原文:https://cssanimation.rocks/wwdc15/
译者:周晓楷(@Helkyle)
每年,苹果都会召开一次重大的会议。WWDC(苹果开发者大会)是iOS开发者和OSX开发者学习苹果先进高科技和移动设备与桌面软件新概念的好机会。
每一年的这个时候,他们都会制造出很多新创意,今年,我被一个用简单圆圈和形状制作出来的图标所惊艳,于是我决定用HTML和CSS来实现它。
WWDC 15邀请卡
苹果的图标通常都会使用颜色和形状的叠加,比如iOS 7 Photos图标。今年WWDC邀请函用了下面这货。
它由一些列层叠和半透明的形状构成,非常适合用HTML和CSS来实现。
HTML
设计这样一块负责的东西需要稍微分析一下。首先,我把它分解成各个部分。 大方向看它是由三种形状构成的,主要图形为8个大圆,我先把它们列出来:
这里我分割成几个类,这样做方便后面把large,circle,等类提取出来单独写,代码会整洁很多。
然后我们有八个小形状,处于大圆的上边,这些形状由4个圆形和4个方形构成,方形是由圆角的,我这样写HTML
我用了circle,squircle以及数字1到8来为各个div设置类名,这样做的好处是,后面为它们设置形状和颜色的时候很方便。
最后我们把两个大方形反倒logo中间。
同样,我用了large和squircle。
Logo和内容
接下来我们给中间的方形增添点内容。
这里我们用了一个SVG图片,还有邀请函的内容。邀请函的字体为San Francisco 但是字体不是OSX标准的,所以这里我换成Helvetica Neue Light。
写圆和方块样式
我要做的第一件事是把circle和squircle的样式写好。
大部分形状是大得,所以这我把默认值设大了。每个元素的定位都是absolute并且有一个白的边框。边框可能不会跟邀请函的一模一样,但是可以给形状多点光泽。
接下来我们给大圆加上样式,设置border-radius为50%,并且使用left,top值设置位置。
这个时候所有的圆都是在同一个位置上边。我们使用点小技巧,通过transform-origin的值来改变位置。默认的transform-origin值为(50%,50%),这里我们把值设为圆的底部,然后我们稍微旋转一下,形状就出来了。
让我们给每个圆添加CSS样式,仔细研究邀请函的图片,我们可以看到一个圆的位置在左下角。知道了这一点,我们就可以写出其他与圆圈的旋转角度。
每个块都有一个颜色,并且旋转一定角度。下面的动画动态展示了生成过程。
有了上面这些原型,我们给其他形状写样式。首先方形也可以看成有不同圆角的圆。
当我们定位了圆以后,我们给了特定的旋转角度和颜色。高兴的是,相同的形状也可以使用相同的样式,我们写好小形状的样式。
我们把这些形状设得小一些,并且离中心更远的距离。并且使用跟上面相同的诡计。
小方块
小的方形角度错了,我们需要给它旋转45deg。
这里有两种方法可供选择,我们可以给每个方形加多一个额外的元素,并旋转,或者我们选择CSS中的伪类。两种方法都行,不过我更倾向于后者。
首先我们把背景颜色,边框,盒子阴影去掉。
我们使用::after伪类来创建一个相同的方形,并旋转45deg。
现在我们有了大圆和其他小形状了。
内容方块
两个大的方形包含所有内容,我们把他们定位到中间,并且给他们一个比较深的透明色。
我们可以旋转一下第一个大方形。
添加动画
最初的邀请函是静态的,但是我们的网站叫做CSS Animation Rocks可不是浪得虚名。
我像把每个集合分开,为了做到这一点,我用span元素把它们分别包裹起来,后面就把动画应用到span元素上即可。
我们先给span元素定位,防止他们溢出。
每个span元素都定位到中点。
接下来我们把动画应用到每个span元素上面。
我们使用了相同的keyframes但是改变了动画时间,分别为10s,20s,30s。于是他们一分钟后回到原来的位置
keyframes 如下所示
开始位置旋转角度为0,最终旋转角度360deg。
重用CSS
这是个有趣的实验,但是我觉得最大的收获是重用了CSS.旋转和小形状使用相同的CSS很方便。还有所有的animation用了同一个keyframes。这样有助于压缩CSS文件的大小,保证加载速度。
前缀
创建这个例子的时候,我用了autoprefixer,这样就不用每次写动画都要考虑浏览器内核了。
用HTML和CSS实现WWDC 2015上的动画效果的更多相关文章
- css实现简单的告警提示动画效果
需求:css实现简单的告警提示动画效果,当接收到实时信息的时候,页面弹出告警信息的动画效果 <!DOCTYPE html> <html lang="en"> ...
- css实现图标移上图标弹跳效果
html部分: <div class="bounce" style="width:20px;height:20px;border:1px solid red;&qu ...
- jquery为表格行添加上下移动画效果
为项目列表项添加上下移动动画.首先想使用jquery animate来做到这一点.但我用的是table和tr作为列表和列表项,但jquery动画方法不支持table里的tr(Animations ar ...
- css 实现水波纹,波浪动画效果
<div class="wave"> 水波纹效果 <div class="wave1"></div> <div cla ...
- [Java]利用javax.swing.Timer类在窗口上实现动画效果
javax.swing.Timer类在创建时需要指定时间间隔和定时器到时间需要执行的动作,即ActionListener. Timer timer = new Timer(100, taskPerfo ...
- WWDC 2015 - 概记
WWDC 2015已经过去快一个月了,今年似乎没有像去年那样变化巨大,一切都在慢慢演进,iOS.Mac OS.watchOS都变得越来越好. 新的三大平台的发布,iOS 9/Mac OS EL Cap ...
- div+css网页本地上和上传到服务器后在IE11上看到的效果不一样?
div+css网页本地上和上传到服务器后在IE11上看到的效果不一样? 解决办法在html的head里加上一段:<meta http-equiv="X-UA-Compatible&qu ...
- WWDC 2015 苹果发布会 笔记
北京时间2015年6月9日凌晨一点,美国旧金山,WWDC 2015苹果发布会,早前知道ios9会更注重系统的优化,看来果真如此,不过最让我惊讶的是Swift居然宣布开源,当时我就震惊了,不过Swift ...
- WWDC 2015大会到来了
WWDC 2015大会到来了,观看到凌晨3点,困死了. 从现场直播视频可以看到: (1)iOS 9的新体验:Siri更智能.Search更全面.苹果支付更方便.Notes和News更新颖好用.地图应用 ...
随机推荐
- 关于ADO.NET 超时的问题
前几天超时问题困扰我很头疼. 为什么我设置了链接字符串的超时时间很长,可是等了一小会就报错Timeout了? connectionString="Data Source=.;Initial ...
- 把word文档中的所有图片导出
把word文档中的所有图片导出 end
- 临界区 TRTLCriticalSection 和 TCriticalSection
临界区对象TCriticalSection(Delphi) 与 TRtlCriticalSection 的区别 TRtlCriticalSection 是一个结构体,在windows单元中定义: 是I ...
- Android apk集成
刚开始学习Android,对很多东西都不懂,所以以下是我做的第一件事,记录一下,也就是apk的集成: 我们集成的apk是已经签过名的第三方apk,并且需要集成到system/priv-app目录下,过 ...
- CSS 透明度 设置 兼容IE FF
filter:Alpha(Opacity=80);/*IE*/ -moz-opacity:0.8;/*FF*/ opacity: 0.8;/*所有元素*/ 参数设置说明: Alpha(Opacity= ...
- 杭电ACM1004
Let the Balloon Rise Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Oth ...
- 【转】图像灰度化方法总结及其VC实现
转载自: http://blog.csdn.net/likezhaobin/article/details/6915754 最近一段时间作者开始进行运动目标识别定位系统设计,本文以及后续的几篇文章都 ...
- Matlab_Graphics(1)_2D
1.Add title ,axis Lables, and Legend to Graph: x=linspace(-*pi,2pi,); y1=sin(x); y2=cos(x); figure p ...
- NAT123内网映射端口
在无内网路由管理员权限的情况下,需要将内网web应用暴露到公网访问,此时需要用到花生壳或者nat123(两个应用都不是免费的,其中花生壳可以8元认证,以后免费使用,nat123按天收费) 花生壳 ht ...
- Git忽略规则及.gitignore规则不生效的解决办法
在git中如果想忽略掉某个文件,不让这个文件提交到版本库中,可以使用修改根目录中 .gitignore 文件的方法(如无,则需自己手工建立此文件).这个文件每一行保存了一个匹配的规则例如: # 此为注 ...