设为首页
收藏本站
开启辅助访问
切换到宽版
登录
立即注册
快捷导航
发布信息
搜索
搜索
网站首页
自丢网
社区论坛
自丢网论坛
附件中心
源码下载
邀请码
丢币充值
本版
帖子
自丢网
»
社区论坛
›
建站程序/IT教程
›
Css/Css3教程
›
css点击高亮模拟
返回列表
发新帖
css点击高亮模拟
[复制链接]
1891
|
0
|
2021-2-25 09:11
|
显示全部楼层
|
阅读模式
如果你的css重置中禁止了点击高亮效果,你还可以使用css模拟这个css点击高亮,点击高亮效果主要在移动端用处比较大,移动端的按钮链接点击后如果没有表现出一些点击过的效果,会让人怀疑是不是点击到了。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css点击高亮-web前端开发http://www.51xuediannao.com/</title>
<STYLE>
.active{ position: relative; padding:10px;}
.active:before{
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color:#ddd;
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
opacity: 0;
pointer-events: none;
-webkit-transition: opacity 600ms;
transition: opacity 600ms; /*加上动画显得更自然*/
}
.active:active:before{
opacity: 1;
-webkit-transition: opacity 150ms;
transition: opacity 150ms;
}
</STYLE>
</head>
<body>
<SPAN class="active">点击试试</SPAN>
</body>
</html>
复制代码
html
,
css
,
选中
相关帖子
•
HTML中<input>标签类型有以下几种
•
CSS常用浮出层的写法
•
移动端实现水平垂直居中的整个页面loading层
•
css图片居中(水平居中和垂直居中)
•
实现图片懒加载的几种方法
•
常见浏览器兼容性问题与解决方案?
•
纯css实现小箭头或三角形标志
•
html页面中如何添加背景音乐
回复
举报
返回列表
发新帖
高级模式
B
Color
Image
Link
Quote
Code
Smilies
您需要登录后才可以回帖
登录
|
立即注册
本版积分规则
发表回复
回帖后跳转到最后一页
chengtongpo
UID
434
贡献
3
丢币
0
主题
59
回帖
0
注册时间
2021-2-21
最后登录
2021-12-28
加好友
发消息
回复楼主
返回列表
源码下载
Thinkphp教程
修罗xiuno教程
Discuz教程
zzz资源/教程
织梦教程
服务器教程
数据库教程
Html/Html5教程
JavaScript教程
Css/Css3教程
建站/web前端教程
PHP教程
其他编程教程
小程序app教程
PPT模板/素材
Word简历模板/素材
Excel模板/素材
素材中心
百科知识
图文推荐
html+js实现本站已运行运营多少天代码
2024-2-8 09:19
2024年最新ThinkPHP8.x 讲义代码SQL,实战部分结合四种前端教程
2024-1-23 09:25
小学生必背古诗75首-标注-翻译-A4可打印word版本下载
2024-1-23 09:18
长截图 截动图gif制作 贴图软件免费下载
2024-1-22 10:45
D盾_防火墙 版本: v2.1.8.1最新绿色免安装版本扫木马病毒
2024-1-22 08:27
热门排行
1
修罗轻论坛程序Xiuno免费开源+收费插件模板风格大全 价值1200元 百度云网盘下载
2
仿看雪论坛模板风格 for 修罗模板 支持4.0以上版本
3
【专业商业版】积分插件 v1.25 for xiuno修罗插件
4
修罗程序添加水印插件 for xiuno插件 支持4.0以上版本
5
邀请注册、用户消费购买邀请码 for 修罗插件 支持xiuno4.0以上版本
6
分类/标签(TAG) - 增强版 v2.5 for xiuno插件 支持4.0以上版本
7
tStore积分商城插件 v1.03 for 修罗插件 xiuno4.0以上版本
8
UMEditor 百度编辑器 v2.6 for 修罗插件xiuno 支持4.0以上版本