×

纯CSS给网站实现极简的动态字符背景

图片预览

图片可能有点不清晰,看左侧便能发现一个旋转的字符!

如下图所示,但我们可以在网页左右两侧实现简洁的动态背景,而又不会显得特别花哨!整体图片如下:

CSS

  1. @-webkit-keyframes rotate {  
  2.     from {  
  3.         -webkit-transform: rotate(0deg);  
  4.         transform: rotate(0deg)  
  5.     }  
  6.     to {  
  7.         -webkit-transform: rotate(360deg);  
  8.         transform: rotate(360deg)  
  9.     }  
  10. }  
  11. @keyframes rotate {  
  12.     from {  
  13.         -webkit-transform: rotate(0deg);  
  14.         transform: rotate(0deg)  
  15.     }  
  16.     to {  
  17.         -webkit-transform: rotate(360deg);  
  18.         transform: rotate(360deg)  
  19.     }  
  20. }  
  21. .bg-asterisk-1 {  
  22.     cursordefault;  
  23.     height480px;  
  24.     width480px;  
  25.     text-aligncenter;  
  26.     positionabsolute;  
  27.     opacity: .02;  
  28.     left: -17vh;  
  29.     margin: 0;  
  30.     line-height: 100vh;  
  31.     font-size: 95vh;  
  32.     font-weightbold;  
  33.     -webkit-animation: rotate 3s infinite;  
  34.     animation: rotate 3s infinite;  
  35. }  
  36. .bg-asterisk-2 {  
  37.     cursordefault;  
  38.     height480px;  
  39.     width480px;  
  40.     text-aligncenter;  
  41.     positionabsolute;  
  42.     opacity: .02;  
  43.     rightright: -17vh;  
  44.     margin: 0;  
  45.     line-height: 95vh;  
  46.     font-size: 95vh;  
  47.     font-weightbold;  
  48.     -webkit-animation: rotate 3s infinite;  
  49.     animation: rotate 3s infinite;  
  50.     -webkit-animation-delay: 1s;  
  51.     animation-delay: 1s;  
  52. }  

HTML

  1. <p class=“bg-asterisk-1” aria-hidden=“true”>*</p>  
  2. <p class=“bg-asterisk-2” aria-hidden=“true”>*</p>  

里面的 * 字符可以换成自己所需要的,比如改 + ,显示如下

网站效果演示:点击这里

人已赞赏
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新消息 消息中心
有新私信 私信列表
搜索