文库网
关注排行榜

当前无数据...

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

根据这段时间的博客访问量来看,我判断出写一些小玩意非常受欢迎,那也就是说,有很多人喜欢这些东西,写这个东西能帮助到一部分人,无论他们是拿来学习也好,做一个送人也好,都是有意义的。由此推出,我并不是为了那些可有可无的访问量来的。

{tilte}-zhc641057094

刚好你喜欢,刚好我会做,所以很希望能够一如既往的帮到那些可爱的同志们。

还是老规矩,先来效果:

{tilte}-zhc641057094

上代码:

{tilte}-zhc641057094

html部分:

  1. <code class="prism language-javascript"><body>
  2. <div class="box">
  3. <div class="wheel">
  4. <ul>
  5. <li></li>
  6. <li></li>
  7. <li></li>
  8. <li></li>
  9. <li></li>
  10. <li></li>
  11. <li></li>
  12. <li></li>
  13. </ul>
  14. </div>
  15. <div class="bracket"></div>
  16. <div class="bracketsmall"></div>
  17. <div class="bigtitle"></div>
  18. <div class="title"></div>
  19. <div class="arrow"></div>
  20. </div>
  21. </body>
  22. </code>
复制代码

css部分:

  1. <code class="prism language-javascript"><style>
  2. *{
  3. margin:0px;
  4. padding: 0px;
  5. }
  6. body{
  7. background: url("images/2.jpg");
  8. background-size: cover;
  9. background-position: center center;
  10. }
  11. .box{
  12. /*border:solid 1px red;*/
  13. width: 1000px;
  14. height: 1000px;
  15. margin:0px auto;
  16. position: relative;
  17. }
  18. .wheel{
  19. background: url("images/fsw.png");
  20. height:768px;
  21. width: 768px;
  22. margin: 0px auto;
  23. -webkit-animation:wheelrotation 10s linear infinite;
  24. position: relative;
  25. }
  26. .wheel li{
  27. border-radius: 20px;
  28. }
  29. .bracket{
  30. width: 358px;
  31. height: 529px;
  32. background: url("images/bracket.png") no-repeat;
  33. position: absolute;
  34. left:318px;
  35. top:375px;
  36. }
  37. .bracketsmall{
  38. width: 247px;
  39. height: 505px;
  40. background: url("images/bracketsmall.png") no-repeat;
  41. position: absolute;
  42. left:375px;
  43. top:382px;
  44. z-index:-2;
  45. }
  46. .bigtitle{
  47. width: 577px;
  48. height: 257px;
  49. position: absolute;
  50. left: 212px;
  51. top: 269px;
  52. background-image: url("images/big-title.png");
  53. }
  54. .arrow{
  55. width: 48px;
  56. height: 64px;
  57. position: absolute;
  58. left: 482px;
  59. top: 550px;
  60. background: url("images/arrow.png") no-repeat;
  61. }
  62. ul{
  63. list-style: none;
  64. }
  65. li{
  66. height:170px;
  67. width: 130px;
  68. position: absolute;
  69. -webkit-animation:childrotation 10s linear infinite;
  70. -webkit-transform-origin:50% 0;
  71. }
  72. li:nth-child(1){
  73. background: url("images/1.jpg");
  74. left: 330px;
  75. top:0px;
  76. }
  77. li:nth-child(2){
  78. background: url("images/3.jpg");
  79. left: 594px;
  80. top:125px;
  81. }
  82. li:nth-child(3){
  83. background: url("images/4.jpg");
  84. left: 694px;
  85. top:370px;
  86. }
  87. li:nth-child(4){
  88. background: url("images/5.jpg");
  89. left: 594px;
  90. top:650px;
  91. }
  92. li:nth-child(5){
  93. background: url("images/6.jpg");
  94. left: 330px;
  95. top:740px;
  96. }
  97. li:nth-child(6){
  98. background: url("images/7.jpg");
  99. left: 94px;
  100. top:640px;
  101. }
  102. li:nth-child(7){
  103. background: url("images/8.jpg");
  104. left: -6px;
  105. top:370px;
  106. }
  107. li:nth-child(8){
  108. background: url("images/9.jpg");
  109. left: 94px;
  110. top:125px;
  111. }
  112. @-webkit-keyframes wheelrotation{
  113. 0%{
  114. -webkit-transform:rotate(0deg);
  115. }
  116. 100%{
  117. -webkit-transform:rotate(360deg);
  118. }
  119. }
  120. @-webkit-keyframes childrotation{
  121. 0%{
  122. -webkit-transform:rotate(0deg);
  123. }
  124. 100%{
  125. -webkit-transform:rotate(-360deg);
  126. }
  127. }
  128. </style>
  129. </code>
复制代码

需要用到的图片素材,已上传到此链接(贴心吧,哈哈):素材所在链接 提取码72tn

注意:图中悬挂图片是130像素x170像素的,如果想要把自己的图片替换掉上面的图片,用PS调整一下你的图片大小即可。

【附】PS调整图片大小方法:

  1. 打开PS
  2. 把图片拖进来
  3. 点击“裁剪”,然后选择“比例”为130:170,然后按两次回车键,此时裁剪完成
    {tilte}-zhc641057094
  4. 在上方菜单栏选择“图像”,“图像大小”,弹出以下界面。或在键盘上按下快捷键Ctrl+Alt+i,设置为像素格式,宽度130,高度170,点击确定
    {tilte}-zhc641057094
  5. 此时,点击上方菜单栏的“文件”,“存储为…”弹出以下界面进行保存,或按Ctrl+S
    {tilte}-zhc641057094
  6. 图片名对应百度网盘里面素材对应的名字,然后在“保存类型”里面选择JPG格式进行保存,保存到HTML文件能够找到的images文件夹里面
    {tilte}-zhc641057094
  7. 完成
    {tilte}-zhc641057094

帮人帮到底,运行不出来或者有问题的小伙伴,欢迎随时打扰哦~


本站资源均由网上搜集或网友上传提供,内容仅供观摩学习交流之用,本站将不对任何资源负法律责任.如有侵犯您的版权,请及时联系我们(邮箱:892481490@qq.com,客服QQ:892481490),我们会尽快处理!QQ350550790是骗子,注意不要和他交易!!!
发帖求助前要善用【论坛搜索】功能, 那里可能会有你要找的答案,也能为你节约不少学习时间;
如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加(威望)和(贡献)而不会扣除自己的积分。
如发现灌水帖、病毒木马帖、广告帖、工具不能正常使用、网盘链接失效,请点击【举报】 核实有几率会给予额外的B币奖励哦!
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    发布资源 快速回复 返回列表 客服中心 官方QQ群

    QQ|小黑屋|手机版|编程之家论坛 ( 桂ICP备18002029号 )

    Powered by 编程之家  © 20019-2021