php图片特效,css3实现图片头像扫光高亮效果
css3出来后,之前很多flash才能做的效果,现在甚至不用写一句js,单纯靠css3新增的属性就能轻松实现!
css3实现图片头像扫光高亮效果,源码:
测试
*{margin:0;padding:0;}
body, td, input, textarea, select, button{color:#5f5f5f;/*font:12px/1.5 "Microsoft YaHei",Tahoma,Arial Geneva, sans-serif;*/}
.demonstrate{padding: 20px;margin: 10px auto;/*border: 1px #bbb solid;*/border-radius: 5px;}
.description h3{color:#f00;padding-bottom:8px;}
.description p{padding-bottom:5px;}
.description strong{color:#080; border-bottom:1px dotted;}
.description b{color:#7A7676;}
.txt{width: 700px;height: 300px; border: 1px solid #f00;}
.demo{width: 100px; height: 100px;display: block;overflow: hidden; -webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;background:url(https://www.phpvar.com/phpvar/wp-content/uploads/file/4.jpg) no-repeat ;border: 5px solid #f00;margin:100px auto ;position: relative;}
.demo:before{content:"";position: absolute;left: -665px; top: -460px;width: 200px;height: 6px;
background-color: rgba(255,255,255,.5);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: searchLights 3.8s ease-in 3s infinite;
-o-animation: searchLights 3.8s ease-in 3s infinite;
animation: searchLights 3.8s ease-in 3s infinite;
}
@-webkit-keyframes searchLights {
0% { left: -665px; top: -460px; }
to { left: 473px; top: 564px; }
}
@-o-keyframes searchLights {
0% { left: -105px; top: 0; }
to { left: 13px; top: 104px; }
}
@-moz-keyframes searchLights {
0% { left: -105px; top: 0; }
to { left: 13px; top: 104px; }
}
@keyframes searchLights {
0% { left: -105px; top: 0; }
to { left: 13px; top: 104px; }
}
提示:你可以先修改部分代码再运行。
这个扫光的效果,大致实现思路:用css3伪类添加一扫光层,背景白色,透明度看个人喜好设置;现用transform:rotate()旋转45度,剩下的就是控制层的位置啦!
这里要说明的是:不间断的扫光效果,最终是通过css3的animate去实现的,animate属性可以设置动画的延时时间,但却不可以设置每一次重复扫光的间隔时间。变通的处理方法是:将扫光层的left,top 位置值设置离层本身的距离够大,延长每次扫光的时间,从而实现“间隔一定时间重复扫光”的效果。
当然层本身是要加overflow:hidden属性的,这样扫光的效果才会显得更加逼真!!
吐槽下:网上有很多css3的demo,效果很绚丽,但一般都是一大段的代码,没任何注释说明,理解起来比较费时间,这是件很蛋疼的事情。
php图片特效,css3实现图片头像扫光高亮效果相关推荐
- Android图片特效处理之图片叠加
这篇将讲到图片特效处理的图片叠加效果.跟前面一样是对像素点进行处理,可参照前面的android图像处理系列之七--图片涂鸦,水印-图片叠加和android图像处理系列之六--给图片添加边框(下)-图片 ...
- 10款js图片代码_图片滚动代码_图片切换代码_图片特效代码_图片轮播代码(三)
jquery banner滑块导航条幻灯片轮播图片滚动 jQuery blockSlide插件熔岩灯标签导航banner焦点图片切换 jquery图片冒泡插件鼠标悬停图片冒泡动画展示 jquery h ...
- 10款js图片代码_图片滚动代码_图片切换代码_图片特效代码_图片轮播代码(一)
实现图片墙时光穿梭特效 swiper图文卡片滑块切换特效 网页放大镜图片预览插件 图片瀑布流tab分类切换特效 js窗帘式图片切换特效 全屏带视频banner轮播图片特效 Swiper仿魅族官网大图轮 ...
- 10款js图片代码_图片滚动代码_图片切换代码_图片特效代码_图片轮播代码(二)
js电影图片滑动放大展示特效 jQuery列表图片全图滚动预览 jQuery游戏图片手风琴切换代码 响应式图片文字横幅布局代码 swiper新闻大图滚动组合特效 swiper图文标题滚动轮播特效 js ...
- css3 3d立体三角形展示图片,纯css3实现图片三角形排列
当今是个读图时代.纯大部分网页或多或少都会用到图片.特别是图片较多的网页.图片的布局和排版就非常重要了.今天要给大写带来一款纯css3实现图片三角形排列.适合一系列的图片.效果图如下: 实现的代码. ...
- html圆点光晕特效,CSS3点扩散、光晕、闪点效果
CSS3点扩散.光晕.闪点效果 html: css:*{ margin: 0; padding: 0; list-style: none; font-style: normal; } html,bod ...
- php图片特效,php_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法
本文实例讲述了php_imagick实现图片剪切.旋转.锐化.减色或增加特效的方法.分享给大家供大家参考.具体分析如下: 一个可以供PHP调用ImageMagick功能的PHP扩展.使用这个扩展可以使 ...
- php图片抖动,css3,jquery_css3图片抖动,css3,jquery - phpStudy
css3图片抖动 我这个点击document弹出图片他会抖动,不知道是怎么回事? 要是把外层的sdf去了他又是正常的,要怎么改 Document .sdf{ width:500px; height:5 ...
- 可视化-three.js 城市 波浪特效 城市 扫光 掠过效果
使用Obj 模型 + shader 实线 模型以及代码 csdn 模型以及代码 git 已有效果添加波浪 快速搭建工具 加载 obj 格式文件加载到 scene中: 使用 ShaderMaterial ...
最新文章
- Pandas 数据挖掘与分析时的常用方法
- 基于人脸关键点修复人脸,腾讯等提出优于SOTA的LaFIn生成网络
- CentOS系统Nginx配置免费https证书
- DataScience:风控场景之金融评分卡模型的简介、构建(逻辑回归)开发(转评分卡)、使用过程(线上实现)之详细攻略
- html section 布局,HTML:section标签
- tomcat和servlet的关系
- vue 代理重定向_关于vue-router,路由重定向的使用分析
- 微博2021年营收22.6亿美元同比增34% 日活用户达2.49亿
- 贺利坚老师汇编课程47笔记:jmp short和jmp near ptr和jmp far ptr
- Android中Parcelable接口的实现方法
- 课程设计—通讯录管理系统
- devexpress gridview属性详细(全部属性以及常用属性)
- PowerShell入门简介
- Lua FFI 实战
- 【pytest】之parameterize()参数化,实现测试方法数据化
- FDE中的金属边界条件和PML边界条件的选取
- 基于android手机实时监控ipcam视频之三:H.264的RTP打包解析
- JMeter 扩展开发:扩展 TCP 取样器
- 在vue项目中使用echarts 阿星小栈
- 【学习】CEO绿色经历能否促进企业绿色创新