在打折图标里面 实现一道白光划过的动画效果

css:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p{
width:15%;
margin:0 auto;
line-height:50px;
font-size:30px;
text-align:center;
transform-origin: 50px 50px;

transform: rotate(45deg) skew(-45deg);
/*-webkit-background-clip: text;*/ /*按文字裁剪 */
/* -webkit-text-fill-color: transparent; */ /*文字的颜色使用背景色*/

background-color:#C89845; /*设置一个背景色*/
background-image: -webkit-linear-gradient(-4deg, rgba(200,152,69,.6) 30%, #fff 50%, rgba(200,152,69, 0.6) 70%); /*设置渐变的背景，按对角线渐变*/

background-blend-mode: hard-light; /*设置背景为混合模式下的强光模式*/
background-size: 200%;

-webkit-animation: shine 2.5s infinite; /*给背景添加动画改变位置*/
}

@-webkit-keyframes shine {
from {background-position: 130%;}
to {background-position: -30%;}
}
</style>
</head>
<body><p>7折</p></body>
</html>

另外还找了一种在图片中 光闪的效果：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body{background-color:#333;}
.img { display:block; position: relative; width:800px; height:286px; margin:0 auto;overflow: hidden;}

.img:before {
content: ""; position: absolute; width:200px; height: 100%; top: 0; left: -150px; overflow: hidden;

background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(50%, rgba(255,255,255,.2)), color-stop(100%, rgba(255,255,255,0)));/*老式语法书写规则*/

background: -moz-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
background: -webkit-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
background: -o-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);

-webkit-transform: skewX(-25deg);
-moz-transform: skewX(-25deg)

}
.img:hover:before { left: 150%; transition: left 1s ease 0s; }

</style>
</head>
<body>
<a href="#" class="img"><img src="img/1.jpg" width="800"></a>
</body>
</html>

效果截图：

CSS3实现一束光划过图片、和文字特效的更多相关文章

  1. 14种网页图片和文字特效的jQuery插件代码

    1.网页图片3d旋转jQuery代码 演示和下载地址 2.存css3实现的tabl选项卡代码 演示和下载地址 3.jQuery标签旋转代码 演示和下载地址 4.鼠标悬浮的图片选项卡代码 演示和下载地址 ...

  2. 网页特效：用CSS3制作3D图片立方体旋转特效

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. 30款css3实现的鼠标经过图片显示描述特效

    今天给大家分享30款css3实现的鼠标经过图片显示描述特效,鼠标经过这些图片的时候以非常炫的方式显示图片的描述.为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现 ...

  4. 鼠标划过图片title 提示实现

    鼠标划过图片title 提示实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  5. jQuery/CSS3实现图片层叠展开特效

    这是一款基于jQuery和CSS3的图片层叠展开特效,让鼠标滑过图片时即可触发这些特效.其中有一款就像扇子展开收拢一样,看起来效果都非常不错.当然本文主要还是来分析一下用jQuery实现这一效果的方法 ...

  6. 利用纯CSS3实现超立体的3D图片侧翻倾斜效果

    原文:利用纯CSS3实现超立体的3D图片侧翻倾斜效果 上午的时候我在jQuery论坛上看到网友分享的一款CSS3 3D图片侧翻倾斜特效,觉得效果非常棒,其实话说回来,这玩意儿的实现真的非常简单,主要是 ...

  7. CSS3实战开发: 纯CSS实现图片过滤分类显示特效

    原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运 ...

  8. css3图片模糊过滤特效

    体验效果:点击这里查看效果 代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  9. 15款css3鼠标悬停图片动画过渡特效

    分享15款css3鼠标悬停图片动画过渡特效.这是一款15款不同效果的css3 hover动画过渡效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

随机推荐

  1. PostgreSQL指南

    PostgreSQL指南 历史简介 最近几年Postgres的关注度变得越来越高. 它加快了Postgres的发展步伐, 与此同时其他 的关系数据库系统的发展放缓. 在数据库领域中 Postgre S ...

  2. 计算机存储负数以及int转byte时-128的出现

    我们看下面这段代码 输出的结果的是128,这个没什么疑问 但是当我们不改变数值仅仅加了一个强制转换后 这时我们会发现结果会变成负的128.这时候我们就要怀疑了,为什么会出现这样的结果呢? 对于这个问题 ...

  3. 深入理解 JavaScript 异步系列（1）—— 什么是异步

    前言 2014年秋季写完了<深入理解javascript原型和闭包系列>,已经帮助过很多人走出了 js 原型.作用域.闭包的困惑,至今仍能经常受到好评的留言. 很早之前我就总结了JS三座大 ...

  4. 最强 IDE Visual Studio 2017 正式版发布

    Visual Studio 2017 正式版发布,该版本不仅添加了实时单元测试.实时架构依赖关系验证等新特性,还对许多实用功能进行了改进,如代码导航.IntelliSense.重构.代码修复和调试等等 ...

  5. 自定义分页Gridview中Excel导出

    先上图,如图所示导出所有查询出的数据 用的是AspNetPager分页控件,这个导出方法,不受分页和gridview列中数据的约束,可以导出您想导出的数据 首先前台页面代码,lblink即为导出exc ...

  6. 1218: [HNOI2003]激光炸弹

    1218: [HNOI2003]激光炸弹 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1139  Solved: 542[Submit][Statu ...

  7. storm1.0节点间消息传递过久分析及调优

    序:最近对storm平台系统进行性能检测发现偶尔会出现oncebolt向另一个twobolt发送数据后,twobolt要500毫秒后才接收到进行处理.这里简单说增大twobolt的并行度即可解决,但是 ...

  8. 注册登录系统项目思路 -- javaweb

    功能:   > 注册   > 登录   ---------------------------------   JSP:   * login.jsp  --> 登录表单   * re ...

  9. fopen中的mode（20161115）

    mode mode 参数指定了所要求到该流的访问类型.可以是以下: fopen() 中 mode 的可能值列表 mode 说明 'r' 只读方式打开,将文件指针指向文件头. 'r+' 读写方式打开,将 ...

  10. 在线音乐播放器-----酷狗音乐api接口抓取

    首先身为一个在线音乐播放器,需要前端和数据库的搭配使用. 在数据库方面,我们没有办法制作,首先是版权问题,再加上数据量.所以我们需要借用其他网络播放器的数据库. 但是这些在线播放器,如百度,酷狗,酷我 ...