css-图片闪烁效果
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>呼吸灯</title>
<style type="text/css">
/* css代码 */
.breath_light {
/*width: 300px; */ /* 宽度 */
/*height: 300px; */ /* 高度 */
/*border:#666 1px solid;*/
/*border-radius:50%;*/
opacity: 0.1; /* 不透明度 */
overflow: hidden; /* 溢出隐藏 */
background:#FF3; /* 背景色 */
/* margin: 25% auto; */ /* 外边距 */
/* IE10、Firefox and Opera,IE9以及更早的版本不支持 */
animation-name: breath; /* 动画名称 */
animation-duration: 700ms; /* 动画时长3秒 */
animation-timing-function: ease-in-out; /* 动画速度曲线:以低速开始和结束 */
animation-iteration-count: infinite; /* 播放次数:无限 */
/* Safari and Chrome */
-webkit-animation-name: breath; /* 动画名称 */
-webkit-animation-duration: 700ms; /* 动画时长3秒 */
-webkit-animation-timing-function: ease-in-out; /* 动画速度曲线:以低速开始和结束 */
-webkit-animation-iteration-count: infinite; /* 播放次数:无限 */
}
@keyframes breath {
from { opacity: 0.1; } /* 动画开始时的不透明度 */
50% { opacity: 1; } /* 动画50% 时的不透明度 */
to { opacity: 0.1; } /* 动画结束时的不透明度 */
}
@-webkit-keyframes breath {
from { opacity: 0.1; } /* 动画开始时的不透明度 */
50% { opacity: 1; } /* 动画50% 时的不透明度 */
to { opacity: 0.1; } /* 动画结束时的不透明度 */
}
</style>
</head>
<body>
<div title="呼吸灯">
<img class="breath_light" src="../img/guihui.jpg" style="height: 60px;width: 60px;" />
</div>
</body>
</html>
css-图片闪烁效果相关推荐
- html图片缩放6,四款css 图片按比例缩放实例(兼容ie6,7,firefox)
使用max-width,max-height:或者min-width,min-height的css属性即可.如: 代码如下 img{max-width:100px;max-height:100px;} ...
- CSS图片廊实例详解
效果: <!DOCTYPE html> <html> <head> <style> div.img {margin: 2px;border: 1px s ...
- PHP图片间隙用什么代码,如何解决CSS图片下面有间隙的问题
这篇文章主要介绍了CSS图片下面有间隙的6种解决方案,需要的朋友可以参考下 在进行页面的p+CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对 ...
- php图片左右滚动代码怎么写,css图片滚动代码怎么写?轮播图横向滚动展示
在日常工作中网页上的轮播图展示必不可少,那么对于刚入门的小白而言本篇文章关于css图片滚动代码的介绍更是浅显易懂.希望本篇文章对大家有所帮助. css图片滚动代码示例具体如下: css图片滚动代码示例 ...
- [css] css图片缩放失真出现锯齿的如何解决呢?
[css] css图片缩放失真出现锯齿的如何解决呢? 1.-ms-interpolation-mode,这是针对IE的解决方案.其值设置为bicubic. 2.image-rendering,这是提供 ...
- 漂亮的自适应宽度的多色彩CSS图片按钮
一.素材 二.效果 三.CSS *{padding:0;margin:0}/*----------------------------------- 自适应宽度图片按钮 - ...
- css图片的相关操作
css图片的相关操作 1.案例源码 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- html图片文字下方,css图片下边怎么加字
css图片下边怎么加字 比较简单的做法就是,将他们放置在一个盒子内,让文字跟图片居中,只需要利用css样式的text-align属性即可,并且各个浏览器都会正常显示,代码如下: 这里是居中的文字 .b ...
- HTML+CSS 图片翻转
HTML+CSS 图片翻转 本文的主要内容是当hover时实现一张卡片的翻转(卡片两边内容不同). 实现起来比较简单,动动手指吧! 本文的主要内容是当hover时实现一张卡片的翻转(卡片两边内容不同) ...
- html怎么把图片做成抖动效果,CSS图片抖动和JS点击特效
正文 CSS图片抖动效果代码,放在网站主要CSS文件中即可 如:style.css,之前emlog博客中常添加这个效果 img:hover { -webkit-animation:sucaijiayu ...
最新文章
- SEO站内优化系列讲座(八)——
- kubectl bash补全
- Tableau实战系列浏览 Tableau 环境(一) -初识tableau操作界面
- 4399小游戏flash插件怎么下载_Flash即将关闭,但这个小游戏平台,或许可以帮你找回4399的回忆...
- VBS去除指定的字符串中的重复项返回重复后的字符串
- NVisionXR_iOS教程十一 —— 多场景切换
- 蓝桥杯_算法训练_未名湖畔的烦恼
- torchtext 中文语料加载
- Ubuntu安装和显卡驱动安装
- 常见关系型数据库(sql server/oracle)查询语句面试题
- 刚体运动学公式_理论力学:运动学
- Excel 2010 VBA 入门 037 获取最后一行数据的行数
- linux系统部署web项目
- ubuntu 18.04 桌面版应用、美化、配置备忘录[更新中]
- 爆糗的买单,看谁脸皮厚
- Dism命令安装组策略(gpedit.msc)
- 第六周、第七周-Web前端
- UI设计流行框架、学习路线图教程,最新意派基础讲解
- 微信思维导图(通讯录)
- 我觉得好听的曲子-持续更新中
热门文章
- 极光推送在Android端的集成
- 基于clamp.js封装vue指令,处理多行文本的溢出
- java适合音频格式_我应该为java使用什么音频格式?
- java 实现dns劫持_什么是HTTP劫持和DNS劫持
- excel图片 html,微商相册生成EXCEL表格中将原图按HTML格式显示的实例
- Python文本挖掘练习(一)// 新闻摘要
- poi怎么设置某个单元格为下拉框_java excel 多选下拉列表设置
- 3dsmax动画渲染速度慢,渲染结果高糊的解决,图片渲染清晰,但变成动画就糊(Quicksilver硬件渲染器)
- 着色问题(回溯算法)
- Hexo全局添加APlayer音乐播放器