纯css闪烁效果
.i-i-box-active{
-webkit-animation: shan666 1s infinite ease-in-out;
animation: shan666 1s infinite ease-in-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
} @-webkit-keyframes shan666 {
0% {
opacity: 0.5;
filter: alpha(opacity=20);
/*-webkit-transform: scale(0.8);*///缩小
}
50% {
opacity:;
filter: alpha(opacity=50);
/*-webkit-transform: scale(1.12);*///放大
background-color: red;
color: #fff;
}
100% {
opacity: 0.5;
filter: alpha(opacity=20);
/*-webkit-transform: scale(0.8);*///缩小
}
} @keyframes shan666 {
0% {
opacity: 0.5;
filter: alpha(opacity=20);
/*-webkit-transform: scale(0.8);*///缩小
}
50% {
opacity:;
filter: alpha(opacity=50);
/*-webkit-transform: scale(1.12);*///放大
background-color: red;
color: #fff;
}
100% {
opacity: 0.5;
filter: alpha(opacity=20);
/*-webkit-transform: scale(0.8);*///缩小
}
}
纯css闪烁效果的更多相关文章
- 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 一个标签的72变,打造一个纯CSS图标库
每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...
- 利用animation和text-shadow纯CSS实现loading点点点的效果
经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完 ...
- 使用纯CSS实现带箭头的提示框
爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...
- 用纯css改变下拉列表select框的默认样式(不兼容IE10以下)
在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计 ...
- CSS 魔法系列:纯 CSS 绘制三角形(各种角度)
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- 纯CSS实现二级下拉导航菜单
这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: < ...
- 纯CSS完成tab实现5种不同切换对应内容效果
很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...
- 简单而兼容性好的Web自适应高度布局,纯CSS
纯CSS实现的自适应高度布局,中间内容不符自动滚动条.兼容IE9以上.chrome.FF.关键属性是box-sizing: border-box. 不废话,直接上代码: <!doctype ht ...
随机推荐
- laravel 添加筛选方式
protected function grid() { return Admin::grid(Client::class, function (Grid $grid) { $grid->id(' ...
- (转) Java中的负数及基本类型的转型详解
(转) https://my.oschina.net/joymufeng/blog/139952 面这行代码的输出是什么? 下面两行代码的输出相同吗? 请尝试在Eclipse中运行上面的两个代码片段, ...
- - Power Strings (字符串哈希) (KMP)
https://www.cnblogs.com/widsom/p/8058358.htm (详细解释) //#include<bits/stdc++.h> #include<vect ...
- 单调队列优化DP || [SCOI2010]股票交易 || BZOJ 1855 || Luogu P2569
题面:P2569 [SCOI2010]股票交易 题解: F[i][j]表示前i天,目前手中有j股的最大收入Case 1:第i天是第一次购买股票F[i][j]=-j*AP[i]; (1<=j< ...
- VMware主机使用无线上网
VMware主机使用无线上网,默认的NAT连接在ubuntu下上不了网,需要把网络适配器改成桥接模式.
- 前端每日实战:141# 视频演示如何用 CSS 的 Grid 布局创作一枚小狗邮票
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/BOeEYV 可交互视频 此视频是可 ...
- 针对vs2017 对mvc 网站建设的调用问题(调用的目标发生异常)
上篇提到,vs 2017 在mvc 网站建设中,启动登录页面实现登陆功能时,会出现调用的目标发生异常的问题,目前解决该问题的办法还没找到,本人也是vs 2017 的初学者,希望大神可以指点迷津.目前测 ...
- vue打包多页报错webpackJsonp is not defined
找到build→webpack.prod.conf.js→找到HtmlWebpackPlugin插件,添加如下配置即可 chunks: ['manifest', 'vendor', 'app']
- python出现SyntaxError: Non-ASCII character '\xe6' in file \的错误
出现这个问题的主要原因是因为python2的编码是ASCII码,文件中有中文的话就得使用utf8编码,只需要在文件的头部加上以下其中一种标注: 一.在文件头部添加如下注释码: # coding=< ...
- requests 模块例题示范
requests 模块 re模块和requests模块结合示范实例 .*? 不加圆括号表示在要匹配里面的内容不要: (.*?)表示在要匹配的两者之间的内容都要: import requests imp ...