鼠标经过特效

来源：互联网发布：使命召唤ol优化差编辑：程序博客网时间：2024/05/21 10:57

鼠标经过小特效
特效一：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style>            li{                list-style: none;                width: auto;                text-align: center;                font: 14px/20px "";                height: 20px;                float: left;                margin: 0 20px;                background: #f2f2f2;                overflow: hidden;                }            a{position: relative;}            a::before{                    width: 100%;                height: 2px;                background: #000;                position: absolute;                content: "";                left: 0;                bottom: 0;                transform: translateX(-100%);                opacity: 1;                transition: transform 500ms cubic-bezier(0.515, 0, 0, 0.995) 0s, opacity 0s ease 500ms;                }            a::after{                width: 100%;                height: 2px;                background: #000;                position: absolute;                content: "";                left: 0;                bottom: 0;                transform: translateX(100%);                opacity: 0;                transition: transform 500ms cubic-bezier(0.515, 0, 0, 0.995) 0s, opacity 0s ease 500ms;            }            a:hover::before{                transform: translateX(0%);                opacity: 0;            }                       a:hover::after{                transform: translateX(0%);                opacity:1;            }        </style>    </head>    <body>        <ul>        <li class="q">            <a>你好刘斩仙</a>        </li>           <li>            <a>你好大熊</a>        </li>           <li>            <a>你好葫芦娃</a>        </li>           </ul>    </body></html>

特效二：

   <!DOCTYPE html><html><head>   <title>css</title><style>    body{background: #666;}    .sim-button{    line-height: 50px;    height: 50px;    text-align: center;    margin-right: auto;    margin-left: auto;    margin-top: 125px;    width: 60%;    cursor: pointer;}.button5{    color: rgba(255,255,255,1);    -webkit-transition: all 0.5s;    -moz-transition: all 0.5s;    -o-transition: all 0.5s;    transition: all 0.5s;    position: relative;    border: 1px solid rgba(255,255,255,0.5);}.button5 a{    color: rgba(51,51,51,1);    text-decoration: none;    display: block;}.button5:hover{    -webkit-animation-name: jello;    animation-name: jello;    -webkit-animation-duration: 1s;    animation-duration: 1s;    -webkit-animation-fill-mode: both;    animation-fill-mode: both;    background-color: rgba(255,255,255,0.2);}@keyframes jello {  from, 11.1%, to {    -webkit-transform: none;    transform: none;  }  22.2% {    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);    transform: skewX(-12.5deg) skewY(-12.5deg);  }  33.3% {    -webkit-transform: skewX(6.25deg) skewY(6.25deg);    transform: skewX(6.25deg) skewY(6.25deg);  }  44.4% {    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);    transform: skewX(-3.125deg) skewY(-3.125deg);  }  55.5% {    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);    transform: skewX(1.5625deg) skewY(1.5625deg);  }  66.6% {    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);    transform: skewX(-0.78125deg) skewY(-0.78125deg);  }  77.7% {    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);    transform: skewX(0.390625deg) skewY(0.390625deg);  }  88.8% {    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);  }}</style></head><body><div class="sim-button button5">    <span>nihao</span></div></body></html>

阅读全文

0 0