css3通话效果的例子

来源：互联网发布：php网站密码破解编辑：程序博客网时间：2024/05/29 12:32
代码：
<!doctype html><html><head><meta charset="utf-8"><title>css3通话效果</title><link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css"><style type="text/css">.call_page{    position: absolute;    top: 0;    right: 0;    bottom: 0;    left: 0;    background-color: rgba(0,0,0,0.77);    width: 1920px;    height: 1080px;    display: none;}.call_page_content{    width: 950px;    height: 100%;    margin-left: auto;    margin-right: auto;    position: relative;}.img_wrap{    position: absolute;    width: 655px;    height: 655px;    left: 50%;    margin-left: -327.5px;    margin-top: 178.5px;}.circle{    position: absolute;    width: 307px;    height: 307px;    left: 50%;    top: 50%;    margin-left: -153.5px;    margin-top: -153.5px;    border-radius: 50%;}.img_wrap1{    z-index: 900;    background-color: rgba(255,255,255, 0.15);    box-shadow: 0 0 100px 0px rgba(0,0,0,0.5), 0 0 5px 0 rgba(255,255,255,0.2) inset;    animation:animation1 2s ease infinite;}.img_wrap2{    z-index: 800;    background-color: rgba(255,255,255, 0.15);    box-shadow: 0 0 100px 0px rgba(0,0,0,0.5), 0 0 5px 0 rgba(255,255,255,0.1) inset;    animation:animation2 2s ease infinite;    filter:Alpha(opacity=80);    -webkit-opacity:0.8;    opacity: 0.8;}.img_wrap3{    z-index: 700;    background-color: rgba(255,255,255, 0.15);    box-shadow: 0 0 5px 0 rgba(255,255,255,0.2) inset;    animation:animation3 2s ease infinite;    filter:Alpha(opacity=60);    -webkit-opacity:0.6;    opacity: 0.6;}@keyframes animation1{0%    {        transform: scale(1,1);        opacity: 1;    } 25%     {        transform: scale(1.3,1.3);    }75% {        transform: scale(1.3,1.3);        opacity: 1;    }100%        {        transform: scale(1.3,1.3);        opacity: 0;    }}@keyframes animation2{0%    {        transform: scale(1,1);        opacity: 1;    }50%     {        transform: scale(1.62,1.62);    } 75% {        transform: scale(1.62,1.62);        opacity: 1;}100%        {        transform: scale(1.62,1.62);        opacity: 0;    }}@keyframes animation3{0%    {        transform: scale(1,1);        opacity: 1;    }75%     {        transform: scale(1.94,1.94);        opacity: 1;    }100%        {        transform: scale(1.94,1.94);        opacity: 0;    }}.fgimg{    z-index: 1000;    border-radius: 50%;    box-shadow: 0 0 100px 0 rgba(0,0,0,0.5);    background-size: 307px;    background-repeat: no-repeat;    background-position-y: -10px;    background-image: url(images/fg.png);}/* 增加opacity是让消失时候有个淡出的效果 */</style></head><body><!-- 图片尺寸：431*589 --><div class="call_page">    <div class="call_page_content">        <div class="img_wrap">            <div class="circle img_wrap3"></div>            <div class="circle img_wrap2"></div>            <div class="circle img_wrap1"></div>            <div class="circle fgimg"></div>        </div>    </div></div></body><script src="jquery/jquery.min.js"></script><script src="bootstrap/bootstrap.min.js"></script><script type="text/javascript">$(function(){    $(".call_page", window.parent.document).fadeIn('slow', function(){      //显示通话界面    });})</script></html>
0 0