带科幻风格的纯CSS3用户登录界面设计

发表于2015-07-31
评论1 1.8k浏览
  摘要: 这是一款带有科幻风格的纯CSS3用户登录界面设计效果。它模拟科幻电影《钢铁侠》中斯塔克工业超级电脑的登录界面。该登录界面略带金属质感,通过一条无限运动的弧线绕圆动画来制作一些神秘科技色彩。 ...
  简要教程
  这是一款带有科幻风格的纯CSS3用户登录界面设计效果。它模拟科幻电影《钢铁侠》中斯塔克工业超级电脑的登录界面。该登录界面略带金属质感,通过一条无限运动的弧线绕圆动画来制作一些神秘科技色彩。

8.jpg


  制作方法
  HTML结构
  该登录界面的HTML结构分为几个部分:div#logo是斯塔克工业的logo。section.stark-login是登录表单。#circle1是外圆,它里面还有一个内圆。最后的一个无序列表是一个占位元素,用于填充空间。
  1. <div id="logo">
  2. <h1 class="hogo"><i> STARK INDUSTRIES</i></h1>
  3. </div>
  4. <section class="stark-login">
  5. <form action="" method="">
  6. <div id="fade-box">
  7. <input type="text" name="username" id="username" placeholder="Username" required>
  8. <input type="password" placeholder="Password" required>

  9. <button>Log In</button>
  10. </div>
  11. </form>
  12. <div class="hexagons">
  13. <span>⬢</span>
  14. ...
  15. </div>
  16. </section>

  17. <div id="circle1">
  18. <div id="inner-cirlce1">
  19. <h2> </h2>
  20. </div>
  21. </div>
  22. <ul>
  23. <li></li>
  24. ...
  25. </ul>

  CSS样式
  CSS样式主要介绍一些圆形的动画效果。这个圆形动画使用了一个嵌套的<div>结构。外圆设置了500像素的宽和高,并通过border-radius: 50%;设置为圆形。在外圆上会执行2个两个动画:circle1和circle-entry。circle1动画用于360度不断的旋转圆形。circle-entry动画则用于控制它的透明度。
  1. #circle1 {
  2. animation: circle1 4s linear infinite, circle-entry 6s ease-in-out;
  3. background: #000;
  4. border-radius: 50%;
  5. border: 10px solid #00a4a2;
  6. box-shadow: 0 0 0 2px black, 0 0 0 6px #00fffc;
  7. height: 500px;
  8. width: 500px;
  9. position: absolute;
  10. top: 20px;
  11. left: 50%;
  12. margin-left: -250px;
  13. overflow: hidden;
  14. opacity: 0.4;
  15. z-index: -3;
  16. }

  内圆的边框宽度设置为36像素,宽度和高度为460像素,比外圆稍小一些。然后通过它的:before和:after元素来将内圆的边框遮挡掉一部分,使它看起来就像一段圆弧。
  1. #inner-cirlce1 {
  2. background: #000;
  3. border-radius: 50%;
  4. border: 36px solid #00fffc;
  5. height: 460px;
  6. width: 460px;
  7. margin: 10px;
  8. }
  9. #inner-cirlce1:before {
  10. content: ' ';
  11. width: 240px;
  12. height: 480px;
  13. background: #000;
  14. position: absolute;
  15. top: 0;
  16. left: 0;
  17. }
  18. #inner-cirlce1:after {
  19. content: ' ';
  20. width: 480px;
  21. height: 240px;
  22. background: #000;
  23. position: absolute;
  24. top: 0;
  25. left: 0;
  26. }
  整个效果不算复杂,具体的完整代码请参考下载文件。


  如果你喜欢这个插件,那么你可能也喜欢:


  jQuery和CSS3炫酷手机APP登录界面特效


  简洁时尚的CSS3用户登录界面设计
 

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引