“最难不过坚持”
本人承接扒站仿站，php网站维护，病毒查杀，网站编辑，网站改版，html制作
有需要网站维护，改版，病毒查杀，网站编辑，网站备案，html制作等相关的工作可以联系我。
本人有多年相关工作经验，也可提供免费咨询，交个朋友。
有需要探讨问题的朋友，也可以加我微信，共同探讨！
微信：15011482830 QQ:408917339
- https://jueru.net/
-
评 留言
- :weixiao:
-
评 留言
- :shuijiao: :weiqu: :zhenbang: :leng:
-
评 留言
- :yiwen: :yiwen: :yiwen: :yiwen:
-
评 EasySass: could not generate CSS file. See Output panel for details.
- 这个业务逻辑多少都有点奇怪了，阅读浏览次数增值在新闻详情页的控制器方法里setInc，这怎么还写进模型事件里了。如果非要用onAfterRead也可以，把新闻文章的内容单独分出来一个news_content表，然后把它和news做关联，然后给news_content表的onAfterRead事件做增值处理，这样点进新闻页内查询到文章内容时才会触发它。
-
评 TP6模型事件-查询后onAfterRead不好用
CSS3 渐变（Gradients） https://www.runoob.com/css3/css3-gradients.html
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。
https://codepen.io/comehope/pen/jKxyXN
可交互视频
此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/cZ8LNA7
源代码下载
每日前端实战系列的全部源代码请从 github 下载：
https://github.com/comehope/front-end-daily-challenges
整体代码：
<style>
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}
p {
font-size: 20vw;
margin: 0;
color: white;
font-family: sans-serif;
font-weight: bold;
text-transform: uppercase;
background-image: linear-gradient(
to right,
orangered,
orange,
gold,
lightgreen,
cyan,
dodgerblue,
mediumpurple,
hotpink,
orangered);
background-size: 110vw;
animation: sliding 30s linear infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@keyframes sliding {
to {
background-position: -2000vw;
}
}
</style>
<p>thanks</p>
代码解读
定义 dom，容器中有一段文本：
<p>thanks</p>
居中显示：
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}
定义文字样式：
p {
font-size: 20vw;
color: white;
font-family: sans-serif;
text-transform: uppercase;
font-weight: bold;
}
设置彩虹背景：
p {
background-image: linear-gradient(
to right,
orangered,
orange,
gold,
lightgreen,
cyan,
dodgerblue,
mediumpurple,
hotpink,
orangered);
background-size: 110vw;
}
定义动画效果：
p {
animation: sliding 30s linear infinite;
}
@keyframes sliding {
to {
background-position: -2000vw;
}
}
最后，把彩虹背景移到文字下面：
p {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
大功告成！
复制另一篇带注释
html, body {
margin: 0;
padding: 0;
}
/* 设置body的子元素水平垂直居中 */
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: black;
}
/* 设置p中文字样式 */
p{
color: white;
/* 1. font 文档地址： http://www.w3school.com.cn/cssref/pr_font_font.asp ；
* 2.vw : 视口宽度 , vh : 视口高度 ；
*/
font: bold 20vw sans-serif;
text-transform: uppercase;
/* 设置彩虹背景 */
background-image: linear-gradient(
to right,
orangered,
orange,
gold,
lightgreen,
cyan,
dodgerblue,
mediumpurple,
hotpink,
orangered
);
background-size: 110vw;
/* 添加动画 sliding: 滑行的 */
animation: sliding 30s linear infinite;
/* 将背景颜色赋值给文字，文档地址： https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
1、-moz代表firefox浏览器私有属性
2、-ms代表ie浏览器私有属性
3、-webkit代表safari、chrome私有属性
*/
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
@keyframes sliding {
to {
background-position: -2000vw;
}
}
