当前位置:   article > 正文

3d爱心粒子实现爱心表白源码(免费分享)html_3d粒子爱心代码

3d粒子爱心代码

HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. </head>
  9. <style>
  10. html, body {
  11. height: 100%;
  12. padding: 0;
  13. margin: 0;
  14. background: #000;
  15. }
  16. img{
  17. display: block;
  18. margin: 0 auto;
  19. }
  20. label{
  21. display: block;
  22. margin: 0 auto;
  23. color: pink;
  24. font-size: 20px;
  25. padding-right: 5px;/*往左偏移10px*/
  26. animation:mymove 2.5s infinite;/* //关联动画名称、动画时长、循环 */
  27. /*Safari 和 Chrome:*/
  28. -webkit-animation:mymove 2.5s infinite;/* //同上(兼容) */
  29. }
  30. @keyframes mymove
  31. {
  32. 50% {font-size: 40px;}/* //名字放大大小 */
  33. }
  34. /*Safari 和 Chrome:*/
  35. @-webkit-keyframes mymove
  36. {
  37. 50% {font-size: 40px;}/* //名字放大大小 */
  38. }
  39. .middle{
  40. width: 100%;
  41. height: 100vh;
  42. display: flex;
  43. align-items: center;
  44. }
  45. .middle2{
  46. position: absolute;
  47. z-index: 2;
  48. width: 100%;
  49. height: 100%;
  50. margin: auto;
  51. 全部源码+企鹅群:927657087

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/979959
推荐阅读
相关标签
  

闽ICP备14008679号