下载鸥 > 网站下载 > 开发教程 > 帝国CMS

帝国cms按钮怎样做高光划过的CSS3动画效果?

323 2021-04-11 00:10:30

收藏
死板的按钮通过增加一个简单的高光动画,可以在平面中瞬间变得立体,能够大大提升吸引眼球的概率。

以前网站做类似的动画效果都是是用flash,但flash早已因为各种各样的原因被淘汰,我们用css3也可以实现这个效果,让我们的帝国cms站点更加吸引人。

效果预览
html部分代码
<button class="shiny">下载鸥网站素材下载</button>

css3代码
<style>
button {
  display: block;
  position: relative;
  top: 0;
  border: 0;
  cursor: pointer;
  background: #9ccc65;
  color: white;
  border-radius: 3px;
  line-height: 1;
  font-size: 20px;
  padding: 15px 25px;
  outline: 0;
  margin: 20px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
button.shiny {
  background: #9ccc65;
  background: linear-gradient(-45deg, #9ccc65 50%, #cde5b2 60%, #9ccc65 70%);
  background-size: 600% 100%;
  -webkit-animation: shine 10s infinite;
          animation: shine 10s infinite;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes shine {
  0% {
    background-position-x: 400%;
  }
  50% {
    background-position-x: 0%;
  }
  100% {
    background-position-x: -400%;
  }
}

@keyframes shine {
  0% {
    background-position-x: 400%;
  }
  50% {
    background-position-x: 0%;
  }
  100% {
    background-position-x: -400%;
  }
}
</style>

颜色、持续时间等参数都是可以调整的,赶紧给你的帝国cms站点添加高光按钮试试吧。

本文地址:https://xzo.com.cn/develop/empire/790.html

有帮助,很赞!

信息来源:下载鸥
信息标签
导出教程 下载word版教程
发表评论 共有条评论
关于帝国CMS


帝国cms是一款功能极为强大的cms程序,性能强悍、安全性高,可轻松支持10万数据,高级开发人员可制作出能容纳千万数据量的网站,是国内最出色的开源cms程序之一,推荐企业用户使用

当前最新版本为7.5,8.0版本即将上线,新版本的核心优化点在于多终端的适配。

推荐帝国CMS开发教程
帝国CMS文章页的seo标题在哪里?
帝国CMS文章页的seo标题在哪里?

很多朋友用惯了织梦CMS,转到帝国之后就非常困惑,因为织梦CMS的文章是有一个se...

1 318
帝国cms公共模板变量temp.header/temp.footer怎样在php代码中直接调用?
帝国cms公共模板变量temp.header/temp.footer怎样在php代码中直接调用?

在帝国cms二次开发过程中,我们经常需要调用模板的公共部位,也就是帝国cms的公...

0 414
帝国cms静态页中如何获取php设置的cookie值?
帝国cms静态页中如何获取php设置的cookie值?

帝国cms的前台页面,是生成的静态文件,如果想要直接获取cookie,或是直接生成页...

3 465
帝国cms投稿后怎样跳转指定页面?
帝国cms投稿后怎样跳转指定页面?

帝国cms投稿后怎样跳转的问题一直让很多人困扰。有人想跳到个人中心,也有人...

1 301
帝国CMS怎么整合Discuz
帝国CMS怎么整合Discuz

Discuz是一个相当流行的论坛系统,现在百度站长论坛还是使用的discuz。帝国cm...

0 306
帝国cms开发签到功能的可行性与方向分析
帝国cms开发签到功能的可行性与方向分析

帝国cms网站签到是提升用户黏性与活跃度的重要手段,但签到功能应该怎样开发...

1 344
帝国cms怎样给广告增加排序?
帝国cms怎样给广告增加排序?

帝国cms广告系统功能比较强大,但本身并没有排序的功能。如果想要替换广告的...

3 331
帝国cms怎样在列表循环list.var中插入广告?
帝国cms怎样在列表循环list.var中插入广告?

帝国cms程序广泛应用于各行各业的网站建设,其安全性高、性能强大。但网站建...

3 350
随机帝国CMS开发教程
帝国cms备份的数据存储在哪个文件夹?
帝国cms备份的数据存储在哪个文件夹?

有些时候,我们需要备份数据并取出来,此时从哪里去取呢?帝国cms备份的数据存储...

1 677
帝国cms怎样恢复备份数据?
帝国cms怎样恢复备份数据?

养成定期备份数据的习惯可以有效防止误操作导致的数据丢失,一定程度上避免网...

8 275
帝国cms误删了已收录的文章要怎么恢复数据?
帝国cms误删了已收录的文章要怎么恢复数据?

客户站点由于员工操作失误,直接删除了20篇文章。如果有定期备份,那恢复数据即...

0 343
帝国cms列表页list.var调用tags怎么做?
帝国cms列表页list.var调用tags怎么做?

文章tag作为文章的重要组成部分,在信息集合上表现非常好,如果合理利用,能获得...

3 292
帝国cms怎样禁止会员发布信息后编辑?
帝国cms怎样禁止会员发布信息后编辑?

那么,我们怎样解决恶意用户的问题呢?可以设置会员编辑信息后需要再次审核,也可...

7 420
帝国cms网站链接域名出现了2次,访问都是404是什么原因?
帝国cms网站链接域名出现了2次,访问都是404是什么原因?

帝国cms网站链接域名出现了2次是什么原因,要怎么解决?这个问题往往出现在用户...

1 612
帝国cms怎样压缩静态页面代码?
帝国cms怎样压缩静态页面代码?

静态页面代码压缩一下可提高网站加载速度,如果程序非常复杂的话,可以节约带宽...

3 332
帝国cms怎么查看是哪个版本
帝国cms怎么查看是哪个版本

帝国cms重装或插件安装时,往往需要明确当前使用的版本,否则容易报错。那么,怎...

1 718
客服QQ:341553759
点击咨询 常见问题 >
官方交流群:90432500
点击加入