DUX主题的主题样式文件为main.css,所以我们可以将代码放在了该文件里。
相关内容
DUX主题的Logo元素选择器名称为.logo,则具体的CSS代码如下:
- /**为logo加扫光效果CSS**/
- .logo{
- position: relative;
- overflow: hidden;
- float:left;
- max-height: 50px;
- }
- .logo:before {
- content: “”;
- position: absolute;
- width: 150px;
- height: 10px;
- background-color: rgba(255, 255, 255, 0.5);
- -webkit-transform: rotate(-45deg);
- transform: rotate(-45deg);
- -webkit-animation: blink 1s ease-in 1s infinite;
- animation: blink 1s ease-in 1s infinite;
- }
- @-webkit-keyframes blink {
- from {left: 10px;top: 0;}
- to {left: 320px;top: 0;}
- }
- @-o-keyframes blink {
- from {left: 10px;top: 0;}
- to {left: 320px;top: 0;}
- }
- @-moz-keyframes blink {
- from {left: 10px;top: 0;}
- to {left: 320px;top: 0;}
- }
- @keyframes blink {
- from {left: –100px;top: 0;}
- to {left: 320px;top: 0;}
- }
显示效果
