带科幻风格的纯CSS3用户登录界面设计
发表于2015-07-31
摘要: 这是一款带有科幻风格的纯CSS3用户登录界面设计效果。它模拟科幻电影《钢铁侠》中斯塔克工业超级电脑的登录界面。该登录界面略带金属质感,通过一条无限运动的弧线绕圆动画来制作一些神秘科技色彩。 ...
简要教程 这是一款带有科幻风格的纯CSS3用户登录界面设计效果。它模拟科幻电影《钢铁侠》中斯塔克工业超级电脑的登录界面。该登录界面略带金属质感,通过一条无限运动的弧线绕圆动画来制作一些神秘科技色彩。 制作方法 HTML结构 该登录界面的HTML结构分为几个部分:div#logo是斯塔克工业的logo。section.stark-login是登录表单。#circle1是外圆,它里面还有一个内圆。最后的一个无序列表是一个占位元素,用于填充空间。
CSS样式 CSS样式主要介绍一些圆形的动画效果。这个圆形动画使用了一个嵌套的<div>结构。外圆设置了500像素的宽和高,并通过border-radius: 50%;设置为圆形。在外圆上会执行2个两个动画:circle1和circle-entry。circle1动画用于360度不断的旋转圆形。circle-entry动画则用于控制它的透明度。
内圆的边框宽度设置为36像素,宽度和高度为460像素,比外圆稍小一些。然后通过它的:before和:after元素来将内圆的边框遮挡掉一部分,使它看起来就像一段圆弧。
如果你喜欢这个插件,那么你可能也喜欢: jQuery和CSS3炫酷手机APP登录界面特效 简洁时尚的CSS3用户登录界面设计 |