设为首页收藏本站
开启辅助访问 切换到宽版
快捷导航 发布信息
搜索
自丢网»社区论坛 › 建站程序/IT教程 › Css/Css3教程 › css点击高亮模拟

css点击高亮模拟

[复制链接]
查看1876 | 回复0 | 2021-2-25 09:11 | 显示全部楼层 |阅读模式
如果你的css重置中禁止了点击高亮效果，你还可以使用css模拟这个css点击高亮，点击高亮效果主要在移动端用处比较大，移动端的按钮链接点击后如果没有表现出一些点击过的效果，会让人怀疑是不是点击到了。
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>css点击高亮-web前端开发http://www.51xuediannao.com/</title>
  6.     <STYLE>
  7.         .active{ position: relative; padding:10px;}
  8.         .active:before{
  9.             content: '';
  10.             width: 100%;
  11.             height: 100%;
  12.             position: absolute;
  13.             left: 0;
  14.             top: 0;
  15.             background-color:#ddd;
  16.             background-repeat: no-repeat;
  17.             background-position: center;
  18.             background-size: 100% 100%;
  19.             opacity: 0;
  20.             pointer-events: none;
  21.             -webkit-transition: opacity 600ms;
  22.             transition: opacity 600ms;   /*加上动画显得更自然*/
  23.         }

  25.         .active:active:before{
  26.             opacity: 1;
  27.             -webkit-transition: opacity 150ms;
  28.             transition: opacity 150ms;
  29.         }
  30.     </STYLE>
  31. </head>
  32. <body>
  33. <SPAN class="active">点击试试</SPAN>
  34. </body>
  35. </html>
复制代码


html, css, 选中

相关帖子
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

chengtongpo

UID
434
贡献
3
丢币
0
主题
59
回帖
0
注册时间
2021-2-21
最后登录
2021-12-28
回复楼主 返回列表