添加滚动彩色提醒通知公告代码

news2024/11/27 6:14:52

分享一个动态的滚动多样化的彩色提醒通知公告,代码是自适应的,放在很多地方都可以用,在wordpress、emlog等建站cms中,都可以在自定义侧边栏中,用来网站、博客的美化也是非常不错的选择。
使用说明:
wordpress:对于wordpress网站是在后台的菜单外观 -> 小工具,然后添加一个自定义HTML小工具,将下方代码直接放入即可完成。
emlog:后台外观 -> 边栏,添加一个新组件,保存组件顺序即可。
其他建站cms找到合适的地方,添加即可。
代码如下:

  1. <style type="text/css">#container-box-1{color:#526372;text-transform:uppercase;width:100%;font-size:16px;
  2. line-height:50px;text-align:center}#flip-box-1{overflow:hidden;height:50px}#flip-box-1 div{height:50px}#flip-box-1>div>div{color:#fff;display:inline-block;text-align:center;height:50px;width:100%}#flip-box-1
  3. div:first-child{animation:show 8s linear infinite}.flip-box-1-1{background-color:#FF7E40}.flip-box-1-2{background-color:#C166FF}.flip-box-1-3{background-color:#737373}.flip-box-1-4{background-color:#4ec7f3}
  4. .flip-box-1-5{background-color:#42c58a}.flip-box-1-6{background-color:#F1617D}@keyframes
  5. show{0%{margin-top:-300px}5%{margin-top:-250px}16.666%{margin-top:-250px}21.666%{margin-top:-200px}33.332%{margin-top:-200px}38.332%{margin-top:-150px}49.998%{margin-top:-150px}54.998%{margin-top:-100px}66.664%{margin-top:-100px}71.664%{margin-top:-50px}83.33%{margin-top:-50px}88.33%{margin-top:0px}99.996%{margin-top:0px}100%{margin-top:300px}}</style>
  6. <section id="custom_html-2" class="widget_text widget widget_custom_html mar16-b">
  7. <div class="textwidget custom-html-widget">
  8. <aside id="php_text-8" class="widget php_text wow fadeInUp" data-wow-delay="0.3s">
  9. <div class="textwidget widget-text">
  10. <div id="container-box-1">
  11. <div class="container-box-1-1">坚持每天来逛逛,会让你</div>
  12. <div id="flip-box-1"><div>
  13. <div class="flip-box-1-1">生活也美好了!</div>
  14. </div>
  15. <div>
  16. <div class="flip-box-1-2">心情也舒畅了!</div>
  17. </div>
  18. <div>
  19. <div class="flip-box-1-3">走路也有劲了!</div>
  20. </div>
  21. <div>
  22. <div class="flip-box-1-4">腿也不痛了!</div>
  23. </div>
  24. <div>
  25. <div class="flip-box-1-5">腰也不酸了!</div>
  26. </div>
  27. <div>
  28. <div class="flip-box-1-6">工作也轻松了!</div>
  29. </div>
  30. </div>
  31. <div class="container-box-1-2">时刻保持好心情,不要忘记喔!</div>
  32. </div>
  33. </div>
  34. <div class="clear"></div>
  35. </aside>
  36. </div>
  37. </section>

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/4066.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

网络编程04-UDP的广播、组播

目录 一、UDP广播通信 1、什么是广播 2、特点 3、广播地址 4、实现广播的过程&#xff08;一定是使用UDP协议&#xff09; 广播发送端 广播接收方 练习1&#xff1a; 把广播通信进行实现 发送端 接收端 二、UDP组播&#xff08;群聊&#xff09; 1、概念 2、组播特…

(最新版2022版)剑指offer之动态规划题解

&#xff08;最新版2022版&#xff09;剑指offer之动态规划题解[剑指 Offer 42. 连续子数组的最大和][剑指 Offer 47. 礼物的最大价值][剑指 Offer 46. 把数字翻译成字符串][剑指 Offer 48. 最长不含重复字符的子字符][剑指 Offer 48. 矩形覆盖][剑指 Offer 买卖股票的最好时机…

小侃设计模式(五)-建造者模式与模板方法模式

1.概述 建造者模式&#xff08;Builder Pattern&#xff09;又叫生成器模式&#xff0c;是一种对象构建模式&#xff0c;它可以将复杂对象的建造过程抽象出来&#xff08;抽象类别&#xff09;&#xff0c;这个抽象过程的不同实现方法可以构造出不同表现&#xff08;属性&…

家庭主妇问题

一 问题描述 X 村的人们住在美丽的小屋里。若两个小屋通过双向道路连接&#xff0c;则可以说这两个小屋直接相连。X 村非常特别&#xff0c;可以从任意小屋到达任意其他小屋&#xff0c;每两个小屋之间的路线都是唯一的。温迪的孩子喜欢去找其他孩子玩&#xff0c;然后打电话给…

C++中TCP socket传输文件

在两个文件中都定义文件头和用到的宏&#xff1a; #define MAX_SIZE 10 #define ONE_PAGE 4096 struct FileHead {char str[260];int size; }; 在客户端发送接收阶段&#xff1a; //1.发送文件头char path[260] {0};cout<<"请输入文件路径"<<endl;cin…

数字图像处理MATLAB

数字图像处理MATLAB 基&#xff08;本&#xff09;操&#xff08;作&#xff09; 图片读取 Aimread(test.bmp); imshow(A);2. 图像写入 Aimread(test.bmp); imwrite(A,test-bak.bmp); Bimread(test-bak.bmp); imshow(B);3. 图像文件信息查询 infoimfinfo(test.bmp);4. 显示…

【创建型】生成器模式(Builder)

目录生成器模式(Builder)适用场景生成器模式实例代码&#xff08;Java&#xff09;生成器模式(Builder) 将一个复杂对象的构建与它的表示分离&#xff0c;使得同样的构建过程可以创建不同的表示。 适用场景 当创建复杂对象的算法应该独立于该对象的组成部分以及它们的装配方…

【SpringBoot笔记22】SpringBoot框架集成Redis数据库

这篇文章&#xff0c;主要介绍SpringBoot框架如何集成Redis数据库。 目录 一、SpringBoot集成Redis 1.1、引入依赖 1.2、配置redis连接信息 1.3、添加RedisTemplate配置类 1.4、编写测试类 1.5、运行测试 一、SpringBoot集成Redis Redis是一个非关系型数据库&#xff0c…

PCIe ECAM机制访问PCIE的配置空间

1.PCIe ECAM机制 PCI Express Enhanced Configuration Access Mechanism (ECAM)是访问PCIe配置空间的一种机制。是将PCIe的配置空间映射到MEM空间&#xff0c;使用MEM访问其配置空间的一种实现。可参考NCB-PCI_Express_Base_5.0r1.0-2019-05-22.pdf的第7.2.2小节。 其地址映射…

上海亚商投顾:沪指录得6连阳 两市成交再度破万亿

上海亚商投顾前言&#xff1a;无惧大盘大跌&#xff0c;解密龙虎榜资金&#xff0c;跟踪一线游资和机构资金动向&#xff0c;识别短期热点和强势个股。 市场情绪 三大指数今日横盘震荡&#xff0c;收盘集体小幅上扬&#xff0c;日K线均录得6连阳。虚拟现实概念股集体拉升&#…

【SA-Token】授权 鉴权中心微服务

授权 鉴权中心微服务 1 什么是JWT 1.2 JWT 的基本概念 1.3 JSON Web Token jwt 是一个开放标准 它定义了一种紧凑的、自包含的方式 用于作为JSON 对象在各方之间安全地传输信息 1.4.那些场景下可以考虑使用JWT &#xff1f; ​ 1.用户授权 信息交换 1.5 JWT的结构及其含义 …

镜频抑制滤波器对射频接收前端输出噪声的影响

射频接收前端包括LNA、Filter、Mixer等部件&#xff0c;从噪声因子级联的角度讲&#xff0c;希望接收链路第一级为高增益、低噪声系数放大器&#xff0c;以期望得到较低的系统噪声系数&#xff0c;提高接收灵敏度。除LNA外&#xff0c;接收链路还有一个关键的部件——镜频抑制滤…

精读大型网站架构:前端架构模块化的方法及困境,自研框架Trick

模块化的方法 网页和网页之间有很多相似或者相同的模块&#xff0c;模块化就是把这些模块抽离并独立管理。而模块化的方法&#xff0c;就是把模块的HTML、CSS和JavaScript文件独立出来&#xff0c;然后通过某种方法关联到使用这些模块的网页上。 在介绍模块化的具体方法之前&…

consul--基础--05--api

consul–基础–05–api 1、介绍 主要接口是RESTful HTTP API&#xff0c;该API可以用来增删查改nodes、services、checks、configguration。所有的endpoints主要分为以下类别 kv&#xff1a;Key/Value存储agent&#xff1a;Agent控制catalog&#xff1a;管理nodes和serviceshe…

数据结构-例题实训作业-二叉树相关

第1关:以先序的方式建立二叉树 任务描述 本关任务:以先序的方式建立二叉树并显示(顺时针90度后看) 相关知识 为了完成本关任务,你需要掌握: 1.二叉树的概念 2.二叉树的先序遍历方式 3.二叉树的遍历。 编程要求 在以下空白处补写代码,以先序方式完成二叉树的建立。 //…

计算机组成原理浮点数表示

浮点数表示 浮点数的表示分为阶码和尾数&#xff1b; 比如3.026*1011;阶码是11;尾数是3.026&#xff1b; 对于阶码&#xff1a; 阶符为正&#xff0c;小数点向后移n位&#xff08;n表示阶的大小&#xff09;; 阶符为负&#xff0c;小数点向前移n位&#xff08;n表示阶的大小&a…

基础IO(上)——Linux

文章目录1.储备知识2. 文件描述符2.1 c接口2.2 直接使用系统接口2.3 open函数返回值2.4 文件描述符fd2.5 周边文件3. 重定向3.1 输出重定向3.2 输出重定向3.3 追加重定向3.4 dup4. 如何理解一切皆文件&#xff1f;1.储备知识 对文件的操作范畴&#xff1a; 在系统角度理解文件 …

R语言生物群落数据统计分析

R 语言作的开源、自由、免费等特点使其广泛应用于生物群落数据统计分析。生物群落数据多样而复杂&#xff0c;涉及众多统计分析方法。本教学以生物群落数据分析中的最常用的统计方法回归和混合效应模型、多元统计分析技术及结构方程等数量分析方法为主线&#xff0c;通过多个来…

中医-通过舌象判断身体状况

本文分享通过舌象判断身体的整体状况&#xff08;中医角度&#xff09;&#xff0c;得出一个可供辨证的参考&#xff0c;并且可以根据舌象做出相关的饮食调整&#xff0c;本文主讲理论&#xff0c;相关舌象图片易引人不适&#xff0c;如需找相关图片&#xff0c;可根据本文中的…

【SpringBoot】一文了解SpringBoot配置高级

文章目录前言ConfigurationProperties使用场景小结宽松绑定/松散绑定&#x1f315;博客x主页&#xff1a;己不由心王道长&#x1f315;! &#x1f30e;文章说明&#xff1a;SpringBoot配置高级&#x1f30e; ✅系列专栏&#xff1a;SpringBoot &#x1f334;本篇内容&#xff1…