HTML/CSS

网站加入鼠标滑过抖动样式

阿里云

站长闲下来的时候,就四处逛逛网站,顺便扒点其他网站的代码,比如 HTML、css、js;都是站长通过 f12 或者 view-source 扒到的,有些代码很容易就能扒到,有些很难,比如今天分享的这个,扒了得半小时,才找到 css 具体代码!支持所有网站,WordPress、typecho、hexo 等等之类的。

代码说明:

该 css 代码,作用于 class 为 post-item 下 h2 标签下的 a 标签,当鼠标滑过,即:hover 时,指定了半径为 20px 的边框,背景色为#6f9fc7,字体颜色为#fff,执行 links 动作,后面的参数为时间;@-webkit-keyframes 规定了 links 执行的具体动作;可以参看参考本站首页的文章标题,鼠标滑过特效!如果你想给自己网站某元素加入这种特效,只需替换.post-item h2 a 为锁需要特效的元素即可,下面展示了本文 css 的特效!!!

也想出现在这里?联系我们
创客主机

CSS 代码:

  1.     .post-item h2 a:hover {
  2.         border-radius: 20px;
  3.         background: #6f9fc7;
  4.         color: #fff;
  5.         -webkit-animation: links .2s 2
  6.     }
  7.     @-webkit-keyframes links {
  8.         0% {
  9.             -webkit-transform: rotate(-2deg)
  10.         }
  11.         100% {
  12.             -webkit-transform: rotate(2deg)
  13.         }
  14.     }

网站加入鼠标滑过抖动样式

已有 355 人购买
查看演示升级 VIP立刻购买

收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!