公告滚动效果

new-v20240713
dshclm 9 months ago
parent 189ab65c85
commit cea18f0cdc

@ -398,6 +398,55 @@
.sliderA:hover{
color: #ffbb3f;
}
.notice{
width: 49%;
height: 40px;
border-radius: 8px;
border: 1px solid #eee;
margin: 36px auto 10px;
overflow: hidden;
float: left;
}
.notice__inner{
height: 100%;
font-size: 14px;
color: #333;
line-height: 40px;
white-space: nowrap;
position: relative;
}
.notice__item{
position: absolute;
top: 0;
left: 100%;
height: 100%;
z-index: -1;
}
.notice__item-first{
padding-right: 70%;
animation: rollFirst 25s linear infinite;
}
.notice__item-second{
padding-right: 53%;
animation: rollSecond 25s linear 12s infinite;
}
@keyframes rollFirst {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-200%);
}
}
@keyframes rollSecond {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-200%);
}
}
</style>
</head>
<body class="layui-bg-gray" style="">
@ -408,7 +457,20 @@
<img th:src="@{/home/base/fanhui.png}">
</div>
<div class="layui-container">
<div class="layui-row layui-col-space1" style="padding-top: 50px">
<div class="notice">
<div class="notice__inner">
<i class="layui-icon layui-icon-speaker" style="font-size: 32px;background-color: white;height: 100%;display: inline-block;"></i>
<span class="notice__item notice__item-first">
[[${#strings.abbreviate(noticeList[0].noticeTitle,33)}]]
【[[${#dates.format(noticeList[0].createTime, 'yyyy年MM月dd日')}]]】
</span>
<span class="notice__item notice__item-second">
[[${#strings.abbreviate(noticeList[1].noticeTitle,33)}]]
【[[${#dates.format(noticeList[1].createTime, 'yyyy年MM月dd日')}]]】
</span>
</div>
</div>
<div class="layui-row layui-col-space1">
<div class="layui-col-md6">
<div class="layui-carousel" id="ID-carousel-demo-image" style="width: 650px;height: 433px;">
<div carousel-item>

Loading…
Cancel
Save