CSS 联合伪类target实现click

来源：互联网发布：mac管理员名称和密码编辑：程序博客网时间：2024/05/01 22:57

今儿无聊看了看css3的transform和transition和animate，想着实现ios的dock栏，于是就瞎乱写了一些，最后实现点击按钮弹跳抖动的时候有新发现，反正于我get一个新技能，分享之。

css样式联合伪类target实现js中的点击事件：粗鲁依旧，看例子

<ul>    <li id="email"><a href="#email">e-mail</a></li>    <li id="phone"><a href="#phone">phone</a></li>    <li id="address"><a href="#address">address</a></li>    <li id="wechat"><a href="#wechat">wechat</a></li>    <li id="weibo"><a href="#weibo">weibo</a></li></ul>

在这里面实现外部id，内部a标签调用即可

具体的CSS部分

.wrapper ul li:target a{-webkit-animation: bounce 1s alternate ease-out 0s;animation:  bounce 1s alternate ease-out 0s}@keyframes bounce {    0% {transform: translateY(0px)}    33% {transform: translateY(-50px)}    100% {transform: translateY(0px)}}
这样便可以轻易实现点击事件，不要问我原理是什么，我也没仔细研究，先学着用可以用就行。

0 0