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

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. 【转】Netty系列之Netty可靠性分析

    http://www.infoq.com/cn/articles/netty-reliability 首先,我们要从Netty的主要用途来分析它的可靠性,Netty目前的主流用法有三种: 1) 构建R ...

  2. ABP学习笔记

      1. 用 Nhibernate:CountAsync 是定义在System.Data.Entity里的 var totalCount = await query.CountAsync(); 出现以 ...

  3. 文件上传----FTP部署

  4. 【《Effective C#》提炼总结】提高Unity中C#代码质量的21条准则

    作者:Williammao, 腾讯移动客户端开发工程师 商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处. 原文链接:http://wetest.qq.com/lab/view/290.h ...

  5. w7如何安装配置多个tomcat

    最近工作比较闲,所以我就开始做自己的项目.公司的的项目用的是tomcat7 为了和公司的项目区分开,我打算再配置一个tomcat.问题也就随之而至.经过整理之后,我整理出了一个完整的流程.保证可以在w ...

  6. [ZooKeeper.net] 1 模仿dubbo实现一个简要的http服务的注册 基于webapi

    今天来试着模仿下dubbo实现一个简要的http服务的注册,虽说是模仿不过是很廉价的那种,只是模仿了一点点点...... 先放上demo目录结构: 开头还是把ZooKeeper的一些简要介绍搬过来看看 ...

  7. （六）javascriptJS中定义对象的几种方式（转）

    JavaScript学习12 JS中定义对象的几种方式 转自:  http://www.cnblogs.com/mengdd/p/3697255.html JavaScript中没有类的概念,只有对象 ...

  8. swift -- 基础

    swift -- 基础 1.常量和变量 常量: let 变量: var 2.声明常量和变量 常量的声明: let let  a = 1         //末尾可以不加分号,等号两边的空格必须对应(同 ...

  9. Atlas-手淘组件化框架的前世今生和未来的路

    今天手淘技术团队宣布正式开源它们的容器框架Atlas,项目地址: https://github.com/alibaba/atlas 同时他们还推出了项目官网,上线了技术文档: http://atlas ...

  10. Robot Framework 使用笔记

    条件表达式: Run Keyword If 表达式 执行动作   ... ELSE IF 表达式 执行动作 ... ELSE 执行动作   基础格式见上表,下面是我遇到的坑: 表达式:判断字符串变量是 ...