css3小图标跳动效果；鼠标移上出现折角效果(MORE); abc:hover:before{} 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鼠标经过折角(MORE)效果</title>
<style type="text/css">
    *{
        margin: 0px auto;
        padding: 0px;
    }
    .img_div{
        width: 1000px;
        height: 500px;
        margin-top: 80px;
        position: relative;
        cursor: pointer;
        overflow: hidden;
        background-color: cornflowerblue;
    }
    .img_div img{
        width: 1000px;
        height: 500px;
    }
    .img_div:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        border: 0px solid;
        border-color: rgba(0, 0, 0, 0.2) #fff;
        -webkit-transition:1s; 
        -moz-transition:1s 0.5s;  
        -o-transition:1s 0.5s;  
        transition:1s 0.5s;  
    }
    .img_div:hover:before {
        border-right-width: 80px;
        border-bottom-width: 80px
    }
    .img_div:hover .grlb_fy{
        opacity: 1;
        -webkit-opacity: 1; 
        -moz-opacity: 1; 
        -o-opacity: 1;
        filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
        right: -59px;
        top: -59px;
    }
    .grlb_fy{
        background: transparent;
        opacity: 0;
        -webkit-opacity: 0; 
        -moz-opacity: 0; 
        -o-opacity: 0;
        filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
        width: 100px;
        height: 100px;
        position: absolute;
        right: -85px;
        top:-85px;
        transform: rotate(45deg);
        filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.6427876096865398,M22=0.7660444431189779)";
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transition:1s 0.5s;
        -webkit-transition:1s 0.5s; 
        -moz-transition:1s 0.5s; 
        -o-transition:1s 0.5s;
    }
    .grlb_fy_span{
        width: 35px;
        height: 16px;
        line-height: 16px;
        position: absolute;
        background-color: #eaeaea;
        bottom: 1px;
        left: 0;
        right: 0;
        color:dodgerblue;
        font-size: 11px;
        -moz-box-shadow:0.5px 0.5px 0.5px 0.5px #ccc ;             
        -webkit-box-shadow:0.5px 0.5px 0.5px 0.5px #ccc ;           
        box-shadow:0.5px 0.5px 0.5px 0.5px #ccc ; 
    }
    .grlb_fy_span:hover{
        background-color: #f2f2f2;
        color:slateblue;
        webkit-box-shadow: 1px 1px 1px 1px grey;
        -moz-box-shadow: 1px 1px 1px 1px grey;
        box-shadow: 1px 1px 1px 1px grey;

    }

</style>
</head>
<body>
    <div class="img_div">
        <img src="bg6.jpg" />
        <a target="_blank" href="http://www.baidu.com" class="grlb_fy"><span class="grlb_fy_span" title="查看更多信息">MORE</span></a><!--翻页效果-->
    </div>
</body>
</html>
View Code

 

 css3小图标跳动：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
@-webkit-keyframes bounce-down {
 25% {-webkit-transform: translateY(-5px);}
 50%, 100% {-webkit-transform: translateY(0);}
 75% {-webkit-transform: translateY(5px);}
}

@keyframes bounce-down {
 25% {transform: translateY(-5px);}
 50%, 100% {transform: translateY(0);}
 75% {transform: translateY(5px);}
}

.animate-bounce-down{ background:#333; width: 100px; height: 100px; margin:100px auto;-webkit-animation: bounce-down 1.5s linear infinite;animation: bounce-down 1.5s linear infinite;
}

@-webkit-keyframes bounce-up {
 25% {-webkit-transform: translateY(10px);}
 50%, 100% {-webkit-transform: translateY(0);}
 75% {-webkit-transform: translateY(-10px);}
}

@keyframes bounce-up {
 25% {transform: translateY(10px);}
 50%, 100% {transform: translateY(0);}
 75% {transform: translateY(-10px);}
}

.animate-bounce-up{ background:#ddd; width: 100px; height: 100px; margin:100px auto;-webkit-animation: bounce-up 1.5s linear infinite;animation: bounce-up 1.5s linear infinite;}
</style>
</head>

<body>
<div class="animate-bounce-up"></div>
<div class="animate-bounce-down"></div>
</body>
</html>
View Code

 

_________

posted on 2017-07-21 14:04  逝年-  阅读(195)  评论(0)  编辑  收藏  举报