DUX主题 5.2版 为logo加扫光效果

DUX主题的主题样式文件为main.css,所以我们可以将代码放在了该文件里。

相关内容

DUX主题的Logo元素选择器名称为.logo,则具体的CSS代码如下:

  1. /**为logo加扫光效果CSS**/  
  2. .logo{  
  3.   positionrelative;  
  4.   overflowhidden;  
  5.   float:left;  
  6.   max-height50px;  
  7. }  
  8. .logo:before {  
  9.     content“”;  
  10.     positionabsolute;  
  11.     width150px;  
  12.     height10px;  
  13.     background-color: rgba(255, 255, 255, 0.5);  
  14.     -webkit-transform: rotate(-45deg);  
  15.     transform: rotate(-45deg);  
  16.     -webkit-animation: blink 1s ease-in 1s infinite;  
  17.     animation: blink 1s ease-in 1s infinite;  
  18. }  
  19.    
  20. @-webkit-keyframes blink {  
  21.     from {left10px;top: 0;}  
  22.     to {left320px;top: 0;}  
  23. }  
  24. @-o-keyframes blink {  
  25.     from {left10px;top: 0;}  
  26.     to {left320px;top: 0;}  
  27. }  
  28. @-moz-keyframes blink {  
  29.     from {left10px;top: 0;}  
  30.     to {left320px;top: 0;}  
  31. }  
  32. @keyframes blink {  
  33.     from {left: –100px;top: 0;}  
  34.     to {left320px;top: 0;}  
  35. }  

显示效果

学习教程手机应用游戏休闲系统工具

牛牛直播 v1.6.7 去广告版

2018-4-10 21:41:33

学习教程知识教程

DUX主题 5.2版 为首页列表文章添加NEW图标

2019-1-31 7:00:41

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索