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>

  • 相关阅读:
    PTA9
    PTA8
    第七周
    第六周
    第五周
    PTA4
    2019第三次作业
    第十周课程总结
    第九周课程总结&实验报告(七)
    第八周课程总结&实验报告(六)
  • 原文地址:https://www.cnblogs.com/xiaotaiyang/p/3865497.html
Copyright © 2011-2022 走看看