互赞宝美化渐变炫酷动态样式分享

  • 内容
  • 相关

样式示例

2.gif

本次分享的是互赞宝渐变样式,按照教程一步一步操作即可修改完成,纯傻瓜式操作!如有问题请按照第一步重新操作!!

操作步骤如下

[hide]

首先找到自己主页模板的CSS文件,香橙(香程)互赞宝程序文件夹位置是 assets/huzan/css 看不懂没关系 按照要求操作就行

按照下方步骤依次打开即可!

1.打开网站根目录 【www目录 或者是 wwwroot 不同空间主机商可能有差异不过一般默认进入就是根目录 找不到问主机商!】

2.打开assets文件夹

3.打开huzan文件夹

4.打开css文件夹

5.找到主页调用CSS文件 (我的是用的香程互赞宝,文件名称为index_style.css

6.打开CSS文件 拉到最底部 然后复制下方代码 粘贴进去 保存!!!

.gradient0 {
	background: linear-gradient(to right,#5ccdde,#fa3f30,#563b5f,#5dc13a,#2b403c,#28438f,#e9e596,#8d0288);
	background-size: 2000%;
	animation: gradientBackground 5s alternate ease-out;
	animation-iteration-count: infinite
}
 
.gradient1 {
	background: linear-gradient(to right,#5ccdde,#eb0828,#456840,#27e52a,#aa5e31,#be77e1,#39693d,#6305bc);
	background-size: 1624%;
	animation: gradientBackground 9s alternate ease-out;
	animation-iteration-count: infinite
}
 
.gradient2 {
	background: linear-gradient(to right,#5ccdde,#c78dd7,#cfa58a,#9500f1,#d634b9,#2eec98,#4d2ea6,#f9857b);
	background-size: 1898%;
	animation: gradientBackground 8s alternate ease-out;
	animation-iteration-count: infinite
}
 
.gradient3 {
	background: linear-gradient(to right,#5ccdde,#0ca282,#5039ea,#a97b90,#b6fdf8,#db4978,#f3bcb5,#6b0adf);
	background-size: 1915%;
	animation: gradientBackground 8s alternate ease-out;
	animation-iteration-count: infinite
}
 
.gradient4 {
	background: linear-gradient(to right,#5ccdde,#5c2b1b,#b2464d,#9b20e3,#281c5a,#dabbff,#62ca9b,#dcbfb9);
	background-size: 1574%;
	animation: gradientBackground 9s alternate ease-out;
	animation-iteration-count: infinite
}
 
.gradient5 {
	background: linear-gradient(to right,#5ccdde,#6dce22,#04763e,#0dd58e,#fcd294,#06b8f4,#c0f78d,#c58451);
	background-size: 1624%;
	animation: gradientBackground 9s alternate ease-out;
	animation-iteration-count: infinite
}
 
.gradient6 {
	background: linear-gradient(to right,#5ccdde,#c61e1f,#9fddc4,#ce7290,#523618,#3d047e,#076c5d,#dd0016);
	background-size: 1933%;
	animation: gradientBackground 9s alternate ease-out;
	animation-iteration-count: infinite
}
@keyframes gradientBackground {
	0% {
		background-position: 0 0
	}
 
	50% {
		background-position: 50% 100%
	}
 
	100% {
		background-position: 100% 0
	}
}

以上操作完第一步就完成了,保存文件然后咱们进行第二步。

步骤如下

返回网站根目录,依次打开以下文件夹!

1.打开view文件夹

2.打开huzan文件夹

3.打开index.php文件

4.Ctrl+F 文件内搜索 aui-list-title 定位到样式 一般默认是四个 如果你手动增加了可能就会不是四个!不过没关系 找一样的操作就行了!

5.在样式后添加代码即可

搜索后得到的代码是这样的

<div class="aui-list-title">

QQ截图20200329010003.png

上方我们已经在CSS里面添加了1-6的不同样式 现在我们可以写入代码内 让他展示出来添加方法如下

<div class="aui-list-title gradient1">

QQ截图20200329010040.png

在代码内敲一个空格 后面添加上 gradient1 或者 gradient2 再或者 gradient3 后面的数字1-6可以随意写

QQ截图20200329010243.png

修改完毕之后保存刷新页面即可

此种修改方法仅支持香程互赞宝程序修改,其他程序要自己寻找主页调用CSS以及首页加载样式!

[/hide]

示例网站:51互赞宝

本文标签:

版权声明:若无特殊注明,本文皆为《七月》原创,转载请保留文章出处。

本文链接:互赞宝美化渐变炫酷动态样式分享 - https://www.qiyue8.com/post/227

免责声明:

本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。侵删请致信E-mail:75108019@qq.com

发表评论

电子邮件地址不会被公开。 必填项已用*标注

未显示?请点击刷新

评论

6条评论
  1. avatar

    腾飞优秀 Lv.1 Internet Explorer  Internet Explorer  iPhone iOS 13.3.1 iPhone iOS 13.3.1 回复

    可以

    山东省青岛市 联通

    1. avatar

      腾飞优秀腾飞 Lv.1 Chrome 11.0.672.0 Chrome 11.0.672.0 Windows XP Windows XP 回复

      来了

      山东省青岛市 联通

      1. avatar

        腾飞优秀 Lv.1 Chrome 11.0.672.0 Chrome 11.0.672.0 Windows XP Windows XP 回复

        山东省青岛市 联通

        1. avatar

          18881222 Lv.1 Internet Explorer  Internet Explorer  iPhone iOS 12.4.5 iPhone iOS 12.4.5 回复

          。。。。。

          海南省海口市 电信

          1. avatar

            18881222 Lv.1 Internet Explorer  Internet Explorer  iPhone iOS 12.4.5 iPhone iOS 12.4.5 回复

            。。。

            海南省海口市 电信

            1. avatar

              小嘛小二郎° Lv.1 Chrome  Chrome  Android 9 Android 9 回复

              看看

              湖南省株洲市 电信