折翼天使资源社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 294|回复: 11

[CMS类教程] 【Ripro主题美化】底部波浪效果代码修改教程

[复制链接]

1万

主题

1万

帖子

131

积分

网站编辑

Rank: 8Rank: 8

天使之心
0
注册时间
2013-8-22
发表于 2020-1-26 19:27:06 | 显示全部楼层 |阅读模式
效果演示截图:

1.jpg

首先,找到ripro根目录下footer.php文件 ,在最下面的</body></html>前面添加如下代码:
  1. <div class="waveHorizontals mobile-hide">
  2.   <div id="waveHorizontal1" class="waveHorizontal"></div>
  3.   <div id="waveHorizontal2" class="waveHorizontal"></div>
  4.   <div id="waveHorizontal3" class="waveHorizontal"></div>
  5. </div>
复制代码
第二步:主题目录ripro -> assets -> css -> diy.css 添加如下样式
  1. .waveHorizontals {
  2.     width: 100%;
  3.     height: 20px;
  4.     position: relative;
  5.     overflow: hidden;
  6.     z-index: 1;
  7.   background-color:#fff !important
  8. }
  9. .ripro-dark .waveHorizontals {
  10.     width: 100%;
  11.     height: 20px;
  12.     position: relative;
  13.     overflow: hidden;
  14.     z-index: 1;
  15.   background-color:#181616 !important
  16. }
  17. #waveHorizontal1 {
  18.     -webkit-mask: url(../images/augsc_001.svg);
  19.     mask: url(../images/augsc_001.svg);
  20.     animation-delay: -2s;
  21.     animation-duration: 12s;
  22. }
  23. #waveHorizontal1, #waveHorizontal2, #waveHorizontal3 {
  24.     background-image: linear-gradient(20deg,#f84270 0,#fe803b 100%)!important;
  25. }
  26. .ripro-dark #waveHorizontal1{
  27.     background-color: #f1f1f1!important;
  28. }
  29. .ripro-dark  #waveHorizontal2{
  30.     background-color: #f1f1f1!important;
  31. }
  32. .ripro-dark  #waveHorizontal3{
  33.     background-color: #f1f1f1!important;
  34. }
  35. .waveHorizontal {
  36.     width: 200%;
  37.     height: 100%;
  38.     display: block;
  39.     position: absolute;
  40.     left: 0;
  41.     bottom: 0;
  42.     background-repeat: repeat-x;
  43.     background-position: left bottom;
  44.     background-size: 350px 100%;
  45.     transform-origin: 0 100% 0;
  46.     animation-name: move;
  47.     animation-timing-function: linear;
  48.     animation-iteration-count: infinite;
  49. }
  50. @keyframes move{0%{transform:translate(-175px,0px) scale(1,1)}50%{transform:translate(-87px,0px) scale(1,0.5)}100%{transform:translate(0px,0px) scale(1,1)}}

  51. #waveHorizontal2 {
  52.     -webkit-mask: url(../images/augsc_002.svg);
  53.     mask: url(../images/augsc_002.svg);
  54.     animation-delay: -2s;
  55.     animation-duration: 5s;
  56. }
  57. #waveHorizontal3 {
  58.     -webkit-mask: url(../images/augsc_003.svg);
  59.     mask: url(../images/augsc_003.svg);
  60.     animation-delay: -1s;
  61.     animation-duration: 3s;
  62. }
复制代码

第三步:主题目录ripro -> assets -> images,将下载的文件放入此文件夹中。

游客,如果您要查看本帖隐藏内容请回复
本站统一解压密码:www.zheyitianshi.com

0

主题

5

帖子

0

积分

一翼天使

Rank: 1

天使之心
0
注册时间
2019-5-21
发表于 2020-1-27 11:35:37 | 显示全部楼层
风格非常棒vvxb
本站统一解压密码:www.zheyitianshi.com

0

主题

2

帖子

0

积分

一翼天使

Rank: 1

天使之心
0
注册时间
2020-2-3
发表于 2020-2-3 16:40:34 | 显示全部楼层
sdfddefefefe
本站统一解压密码:www.zheyitianshi.com

0

主题

1

帖子

0

积分

一翼天使

Rank: 1

天使之心
0
注册时间
2020-2-5
发表于 2020-2-5 15:31:28 | 显示全部楼层
招了很久了谢谢
本站统一解压密码:www.zheyitianshi.com

3

主题

326

帖子

0

积分

一翼天使

Rank: 1

天使之心
0
注册时间
2015-5-29
发表于 2020-2-11 19:34:37 | 显示全部楼层
【Ripro主题美化】底部波浪效果代码修改教程
本站统一解压密码:www.zheyitianshi.com

0

主题

8

帖子

0

积分

一翼天使

Rank: 1

天使之心
0
注册时间
2020-2-2
发表于 2020-2-12 12:23:16 | 显示全部楼层
】底部波浪效果代码修改教程
本站统一解压密码:www.zheyitianshi.com

0

主题

1

帖子

0

积分

一翼天使

Rank: 1

天使之心
0
注册时间
2020-2-12
发表于 2020-2-12 21:58:09 | 显示全部楼层
好不凑哦 是速度   
本站统一解压密码:www.zheyitianshi.com

0

主题

2

帖子

0

积分

一翼天使

Rank: 1

天使之心
0
注册时间
2020-2-13
发表于 2020-2-13 18:36:19 | 显示全部楼层
风格非常棒vvxb
本站统一解压密码:www.zheyitianshi.com

0

主题

1

帖子

0

积分

一翼天使

Rank: 1

天使之心
0
注册时间
2020-2-18
发表于 2020-2-18 23:32:11 | 显示全部楼层
11111111111111111111111
本站统一解压密码:www.zheyitianshi.com

0

主题

2

帖子

0

积分

一翼天使

Rank: 1

天使之心
0
注册时间
2020-2-27
发表于 2020-2-27 09:03:09 | 显示全部楼层
adsadasdasdsadasdasdasd
本站统一解压密码:www.zheyitianshi.com

手机版|小黑屋|折翼天使资源社区 |网站地图

GMT+8, 2020-7-5 00:11 , Processed in 0.197384 second(s), 26 queries .

申明:本站资源均来自互联网公开的网络收集整理及二次开发发布,若侵犯了您的合法权益,请告知我们妥善处理。

© 2001-2020 www.zheyitianshi.com 折翼天使资源社区管理团队

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