css3通话效果的例子

最新推荐文章于 2021-08-04 00:30:35 发布

十年树木_2015

最新推荐文章于 2021-08-04 00:30:35 发布

阅读量705

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_30337695/article/details/52540360

版权

css 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

代码：

<!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>

十年树木_2015

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3通话效果的例子

代码：css3通话效果.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
复制链接

扫一扫

专栏目录