时间：2019-03-18 浏览量： 收藏
css3 animation属性制作图片高光扫描效果代码
简体中文
繁體中文
header .logo-brand img {
height: 66px;
width:100%;
float: left;
margin-top:40px;
}
.logo-brand{position: relative; overflow: hidden;}
.logo-brand:before {content: "";position: absolute; width: 330px; height: 70px; background-color: rgba(255, 255, 255, 0.5); -webkit-transform: rotate(60deg); transform: rotate(60deg); left: -100px; -webkit-animation: blink 1.5s infinite both; animation: blink 1.5s infinite both;}
@-webkit-keyframes blink {from {left: -300px;top: 0;} to {left: 330px;top: 0;}}
@-o-keyframes blink {from {left: -300px;top: 0;} to {left: 330px;top: 0;}}
@-moz-keyframes blink {from {left: -300px;top: 0;} to {left: 330px;top: 0;}}
@keyframes blink {from {left: -300px;top: 0;}to {left: 330px;top: 0;}}
RELATED RECOMMEND
2019-03-18
效果如下图：HTML代码 导航菜单的链接，在这里我们添加了一些额外的span元素来帮助实现3D效果：<ul class="menu"> <li><a href="#" class="three-d ">网站首页 <span class="three-d-box"&
2019-03-18
一、 弹性布局 在平时的我们常用的布局类型有以下几种： 1.浮动+定位 2.自适应（百分比） 3.响应式布局 4.弹性布局（Flex布局） 以下内容是比较常用的弹性布局，但块标签与行内块标签是有区别的。 优点：兼容性支持所有浏览器(Webkit内核的浏览器,要加上-webkit-)，可以随用户的喜好进行调节，可以将任何一个容器指定为Flex布局。 缺点：因为弹性布局可调节，所以有巨
2019-03-18
在css中我们使用media标签来区分调用哪个css样式，比如使用media="print"来表示当执行打印文档时，使用print.css样式。这样使得文档更有得于打印，如将页面宽度增宽、或屏蔽掉一些不需要打印的内容。<link href="styles/main.css" rel="stylesheet" type="t
Copyright © 2012-2024 世敏网络 版权所有 闽ICP备18026760号-1 
闽公网安备 35020502000640号 网站地图 Sitemap
关键词聚合
