查看: 2658|回复: 0

[UI界面设计] 前端装逼 超酷的人物头像特效代码赏析

[复制链接]
发表于 2021-3-30 13:07:49 | 显示全部楼层 |阅读模式
截图:

1.jpg

演示:http://www.zzfriend.com/demo/css3/shengri/

html:

  1. <div class="meo-picture">
  2.   <div class="flower flower1"></div>
  3.   <div class="flower flower2"></div>
  4.   <div class="flower flower3"></div>
  5.   
  6.   <div class="text">
  7.     Happy Birthday, <strong>Minh Mèo</strong>
  8.   </div>
  9. </div>
复制代码


css3:

  1. html {
  2.   width: 100%;
  3.   height: 100%;
  4. }
  5. body {
  6.   width: 100%;
  7.   height: 100%;
  8.   overflow: hidden;
  9.   background: -webkit-linear-gradient(-45deg, #800024, #ea3c71); /* For Safari 5.1 to 6.0 */
  10.   background: -o-linear-gradient(-45deg, #800024, #ea3c71); /* For Opera 11.1 to 12.0 */
  11.   background: -moz-linear-gradient(-45deg, #800024, #ea3c71); /* For Firefox 3.6 to 15 */
  12.   background: linear-gradient(-45deg, #800024, #ea3c71); /* Standard syntax */
  13. }

  14. .meo-picture {
  15.   position: absolute;
  16.   top: 50%;
  17.   left: 50%;
  18.   margin-top: -100px;
  19.   margin-left: -100px;
  20.   z-index: 1;
  21.   background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAgAElEQVR4XmS9B4xl2Xke+N2cXqjcOUzOFJrPcelvcSWixEiw57QR3TaxzX4exWKI246GSlsu5onBgehCfG3a5UJwnmpT0yi59dUiq06cnevvnb5vWG7ShxY3BjcXwFhT66iuf0yvPPaCLe201kIc2e1ZBKOln8cKZJTeA8Vy/b/OGeVe5Xcd9AzfeKEtpNRsdz5ZTq3Lucu2YB/J4I45iW18qoPvBW4vKg+YEkRONRwm3iyUUAqfhRg/jDoa1EJYdAkGTXyflamnLQJAV5g8WYwyJRtmoHI+oTX5GRr47hgKJvBAfgBUNn0HEbKtR8N1PrPXqBJqbMFjijaLiccBgLMSZ8w/YGe5ocbLSe2/+WpGf6bUXP6+dYcd4eEWMs/rSWp+jo0MbYqm6DYwQbPgGHgcEoNGCLkJsgBt4+WHWnbQzQL6W7ktWuktxcntvR7Cs0KNzGefsLNht00d0neN95mvdD9Qb7KvH7OMjB+jq4vlLujboaYeIDJbD+DBbdjsm51SKQG3WT5gSRuSx87zgVMllAYOa/RRWuVCpiD0o7PdHFC9DAoGoHeL2/wGRlavt+aWzNgAAAABJRU5ErkJggg==') no-repeat center;
  22.   border: 10px solid #fff;
  23.   border-radius: 50%;
  24.   transform: translateY(-20%);
  25.   -webkit-transform: translateY(-20%);
  26.   width: 200px;
  27.   height: 200px;
  28.   box-shadow: 0px 0px 80px #5d071f;
  29. }
  30. .meo-picture::after {
  31.   content: "";
  32.   position: absolute;
  33.   top: 0;
  34.   left: 0;
  35.   width: 100%;
  36.   height: 100%;
  37.   background: #fff;
  38.   border-radius: 50%;
  39.   opacity: 1;
  40.   animation: showAWhile 2s, fadeOut 0.6s 2s;
  41.   -webkit-animation: showAWhile 2s, fadeOut 0.6s 2s;
  42.   opacity: 0;
  43. }
  44. .meo-picture {
  45.   animation: show-text 2s 4.5s, show-picture 4.5s;
  46.   -webkit-animation: show-text 2s 4.5s, show-picture 4.5s;
  47. }
  48. .text {
  49.   left: 50%;
  50.   margin-left: -145px;
  51.   width: 300px;
  52.   position: absolute;
  53.   text-align: center;
  54.   color: #FFF;
  55.   font-size: 24px;
  56.   bottom: -80px;
  57.   opacity: 1;
  58.   display: block;
  59.   animation: hideAWhile 4.5s, show 1s 4.5s;
  60.   -webkit-animation: hideAWhile 4.5s, show 1s 4.5s;
  61. }
  62. .flower {
  63.   display: none;
  64.   position: absolute;
  65.   width: 22px;
  66.   height: 22px;
  67.   background: #ff8400;
  68.   border-radius: 50%;
  69.   box-shadow:
  70.     12px 13px 0 #fff000,
  71.     -8px 15px 0 #fff000,
  72.     -16px -3px 0 #fff000,
  73.     16px -6px 0 #fff000,
  74.     -1px -16px 0 #fff000;
  75. }

  76. .flower1 {
  77.   top: 14px;
  78.   left: 14px;
  79. }
  80. .flower1 {
  81.   animation: flower 0.5s 3s, hideAWhile 3s;
  82.   -webkit-animation:  flower 0.5s 3s, hideAWhile 3s;
  83.   display: block;
  84. }

  85. .flower2 {
  86.   top: 190px;
  87.   left: 120px;
  88.   transform: scale(0.7);
  89. }
  90. .flower2 {
  91.   animation: flower 0.5s 3.4s, hideAWhile 3.4s;
  92.   -webkit-animation:  flower 0.5s 3.4s, hideAWhile 3.4s;
  93.   display: block;
  94. }

  95. .flower3 {
  96.   top: 130px;
  97.   left: 190px;
  98.   transform: scale(1.2);
  99. }
  100. .flower3 {
  101.   animation: flower 0.5s 4s, hideAWhile 4s;
  102.   -webkit-animation:  flower 0.5s 4s, hideAWhile 4s;
  103.   display: block;
  104. }


  105. .background {
  106.   position: absolute;
  107.   width: 100%;
  108.   height: 100%;
  109.   z-index: 0;
  110. }

  111. .bg-content {
  112.   position: absolute;
  113.   top: 0;
  114.   left: 0;
  115.   width: 100%;
  116.   height: 100%;
  117.   position: relative;
  118. }
  119. .bg-content {
  120.   position: absolute;
  121.   width: 100%;
  122.   height: 100%;
  123.   margin: 0;
  124.   padding: 0;
  125.   list-style: none;
  126. }
  127. .bg-content li {
  128.   width: 500px;
  129.   height: 500px;
  130.   position: absolute;
  131.   background: #fff;
  132.   opacity: 0.03;
  133.   top: 50%;
  134.   margin-top: -250px;
  135.   left: 50%;
  136.   margin-left: -250px;
  137. }
  138. .cir1 {
  139.   animation: transform 8s linear infinite;
  140. }
  141. .cir2 {
  142.   animation: transform 8s -3s linear infinite;
  143. }
  144. .cir3 {
  145.   animation: transform 8s -6s linear infinite;
  146. }

  147. /** Animations **/
  148. @keyframes show-text {
  149.   0% {
  150.     transform: translateY(0%);
  151.     -webkit-transform: translateY(0%);
  152.   }
  153.   100% {
  154.     transform: translateY(-20%);
  155.     -webkit-transform: translateY(-20%);
  156.   }
  157. }
  158. @-webkit-keyframes show-text {
  159.   0% {
  160.     transform: translateY(0%);
  161.     -webkit-transform: translateY(0%);
  162.   }
  163.   100% {
  164.     transform: translateY(-20%);
  165.     -webkit-transform: translateY(-20%);
  166.   }
  167. }

  168. @keyframes rotate {
  169.   0% {
  170.     transform: rotate(0deg);
  171.   }
  172.   100% {
  173.     transform: rotate(360deg);
  174.   }
  175. }
  176. @-webkit-keyframes rotate {
  177.   0% {
  178.     transform: rotate(0deg);
  179.   }
  180.   100% {
  181.     transform: rotate(360deg);
  182.   }
  183. }

  184. @keyframes show-picture {
  185.   0% {
  186.     transform: translateY(100%);
  187.     -webkit-transform: translateY(100%);
  188.   }
  189.   100% {
  190.     transform: translateY(0%);
  191.     -webkit-transform: translateY(0%);
  192.   }
  193. }
  194. @-webkit-keyframes show-picture {
  195.   0% {
  196.     transform: translateY(100%);
  197.     -webkit-transform: translateY(100%);
  198.   }
  199.   100% {
  200.     transform: translateY(0%);
  201.     -webkit-transform: translateY(0%);
  202.   }
  203. }

  204. @keyframes show {
  205.   0% {
  206.     opacity: 0;
  207.     bottom: 0;
  208.   }
  209.   100% {
  210.     opacity: 1;
  211.     bottom: -90px;
  212.   }
  213. }
  214. @-webkit-keyframes show {
  215.   0% {
  216.     opacity: 0;
  217.     bottom: 0;
  218.   }
  219.   100% {
  220.     opacity: 1;
  221.     bottom: -90px;
  222.   }
  223. }

  224. @keyframes hideAWhile {
  225.   0% {
  226.     opacity: 0;
  227.   }
  228.   100% {
  229.     opacity: 0;
  230.   }
  231. }
  232. @-webkit-keyframes hideAWhile {

  233.   0% {
  234.     opacity: 0;
  235.   }
  236.   100% {
  237.     opacity: 0;
  238.   }
  239. }
  240. @keyframes showAWhile {
  241.   0% {
  242.     opacity: 1;
  243.   }
  244.   100% {
  245.     opacity: 1;
  246.   }
  247. }
  248. @-webkit-keyframes showAWhile {

  249.   0% {
  250.     opacity: 1;
  251.   }
  252.   100% {
  253.     opacity: 1;
  254.   }
  255. }

  256. @keyframes fadeOut {
  257.   0% {
  258.     opacity: 1;
  259.   }
  260.   100% {
  261.     opacity: 0;
  262.   }
  263. }
  264. @-webkit-keyframes fadeOut {

  265.   0% {
  266.     opacity: 1;
  267.   }
  268.   100% {
  269.     opacity: 0;
  270.   }
  271. }
  272. @keyframes flower {
  273.   0% {
  274.     transform: scale(10) rotate(0deg);
  275.     -ms-transform: scale(10) rotate(0deg);
  276.     -webkit-transform: scale(10) rotate(0deg);
  277.    
  278.     -webkit-filter: blur(30px);
  279.     -moz-filter: blur(30px);
  280.     -o-filter: blur(30px);
  281.     -ms-filter: blur(30px);
  282.     filter: blur(30px);
  283.   }
  284.   100% {
  285.     transform: scale(1) rotate(0deg);
  286.     -ms-transform: scale(1) rotate(0deg);
  287.     -webkit-transform: scale(1) rotate(0deg);
  288.    
  289.     -webkit-filter: none;
  290.     -moz-filter: none;
  291.     -o-filter: none;
  292.     -ms-filter: none;
  293.     filter: none;
  294.   }
  295. }
  296. @-webkit-keyframes flower {
  297.   0% {
  298.     transform: scale(10) rotate(0deg);
  299.     -ms-transform: scale(10) rotate(0deg);
  300.     -webkit-transform: scale(10) rotate(0deg);
  301.    
  302.     -webkit-filter: blur(30px);
  303.     -moz-filter: blur(30px);
  304.     -o-filter: blur(30px);
  305.     -ms-filter: blur(30px);
  306.     filter: blur(30px);
  307.   }
  308.   100% {
  309.     transform: scale(1) rotate(0deg);
  310.     -ms-transform: scale(1) rotate(0deg);
  311.     -webkit-transform: scale(1) rotate(0deg);
  312.    
  313.     -webkit-filter: none;
  314.     -moz-filter: none;
  315.     -o-filter: none;
  316.     -ms-filter: none;
  317.     filter: none;
  318.   }
  319. }
复制代码


下载:


index.zip (98.24 KB, 下载次数: 0, 售价: 3 蚂蚁币)
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

关闭

网站推荐上一条 /1 下一条



快速回复 返回顶部 返回列表