zoukankan      html  css  js  c++  java
  • transition过度效果 + transform旋转360度

    css样式:

    .animate{
    65px;
    height:40px;
    background:#92B901;
    color:#ffffff;
    position:absolute;
    font-weight:bold;
    font:12px '微软雅黑', Verdana, Arial, Helvetica, sans-serif;
    padding:20px 10px 0px 10px;
    display:blcok;
    margin:5px;
    -webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;
    -webkit-border-radius:5px;
    -o-transition-property:width,height,-o-transform,background,font-size,opacity;
    -o-transition-duration:1s,1s,1s,1s,1s,1s;
    -moz-transition-property:width,height,-o-transform,background,font-size,opacity;
    -moz-transition-duration:1s,1s,1s,1s,1s,1s;
    transition-property:width,height,transform,background,font-size,opacity;
    transition-duration:1s,1s,1s,1s,1s,1s;
    border-radius:5px;
    opacity:0.4;
    }

    .animate:hover{
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
    opacity:1;
    background:#1ec7e6;
    90px;
    height:60px;
    font-size:16px;
    }

    html:

    <a href="javascript:;" class="animate">鼠标移动到我这里</a>

  • 相关阅读:
    python--输出spwm的数组
    爬虫二:爬取糗事百科段子
    爬虫一:爬取信息
    Python中的切片操作
    JSON
    python 中的异常处理与种类
    register的功能
    static的功能
    网络安全的认识
    VMware5.5-vCenter Converter(转换)
  • 原文地址:https://www.cnblogs.com/xiaotaiyang/p/3865497.html
Copyright © 2011-2022 走看看