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

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. Tomcat使用Memcached Session Manager管理Session

    Tomcat使用Memcached Session Manager管理Session 废话不多说,直接进入主题.项目使用阿里云负载均衡+ECS服务器集群进行部署,Tomcat使用8.5版本.阿里云负载 ...

  2. 存储可靠性技术之 --RAID

    云计算项目交付时,不可避免的需要考虑存储磁盘采用何种RAID.例如:我们的项目工程师可能会建议大家连接克隆虚拟机系统盘组RAID 10,完整复制虚拟机数据盘 使用RAID5或者RAID6等,那么RAI ...

  3. PHP字符串三种定义方式

    PHP的字符串有三种定义方式:单引号 .双引号 .定界符  1.单引号:指定一个简单字符串的最简单的方法是用单引号(字符 ')括起来. 在被单引号括起来的字符串中,要再表示一个单引号,需要用反斜线(\ ...

  4. 基于MAC10.12+MYSQL5.7.17搭建XMPP服务器【黑苹果系统】

    在以前的公司中了解到XMPP可以搭建即时通讯APP.出于好奇自己在空余时间也学了一下搭建XMPP服务器,其中遇到了许多问题,经过坎坷的路程终于搭建成功[这些坎坷的经历主要是由于自己的无知造成的] 下面 ...

  5. Android中使用Handler以及CountDownTimer实现包含倒计时的闪屏页面

    上一篇博文<Android中Handler使用浅析>通过实现倒计时闪屏页面的制作引出了Handler的使用方法以及实现原理,博文末尾也提到了实现过程中的Bug,有兴趣的朋友可以点击链接回去 ...

  6. UI培训怎么学才高效

    随着互联网科技的爆炸式发展,UI设计越来越受到我们的青睐,绝大部分企业已成立U设计部门来提高自身影响力,但现在许多从事UI设计的人,都是从零基础过度过来的,他们不乏大牛,在阿里巴巴,在腾讯等国内一流企 ...

  7. 利用instsrv和srvany来手动安装服务

    Windows提供了两个小工具instsrv.exe和srvany.exe来把任何应用包装成windows服务.顾名思义instsrv(install service)是用来安装服务的,而srvany ...

  8. Java I/O之NIO Socket

    PS:本文简单介绍下旧I/O和NIO下的Socket通讯,仅以UDP来示例. TCP/IP协议 首先简单回顾下TCP/IP协议 Application:应用程序:Socket:套接字:Host:主机: ...

  9. 为什么每个浏览器User-Agent都是Mozilla？真相原来是这样！

    转载自简明现代魔法http://www.nowamagic.net/librarys/veda/detail/2576 故事还得从头说起,最初的主角叫NCSA Mosaic,简称Mosaic(马赛克) ...

  10. java基础：数组的拼接