欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

海创软件组--20200726--css3动画案例（使用自媒体查询）

程序员文章站 2024-03-25 22:50:34
...

界面

这里只演示了一个板块的界面，小白点与下面的小橙点会不停的左右晃动
海创软件组--20200726--css3动画案例（使用自媒体查询）

布局

首先考虑布局，在这里我分了几个板块。
第一部分是底面container，淡黄部分是浏览器的整个界面。
第二部分是四个粉色的div，这里使用了流体布局，四个均匀分布(container-fluid、row)。
第三部分是单独的每个粉色div，在里面分块。

海创软件组--20200726--css3动画案例（使用自媒体查询）

海创软件组--20200726--css3动画案例（使用自媒体查询）

流体布局

首先引入bootstrap，之后的div的class必须写规定的，不了解的话可以看看官网
海创软件组--20200726--css3动画案例（使用自媒体查询）
添加链接描述

具体分布

上面圈出来的黑色部分是一个整体，就是一个简单的div使用伪类，在div::after和div::before引入一个圆形与一个小圆柱
海创软件组--20200726--css3动画案例（使用自媒体查询）

<div class="container-fluid">
        <div class="row">
            <!-- lg是电脑端，md是中（ipad）端，xs一般是手机端 -->
            <div class="ab col-xs-6 col-md-6 col-lg-3">
                <div class="header">
                    <div class="innershake">
                            <span class="glyphicon glyphicon-phone-alt big" aria-hidden="true"></span>
                     </div>
                    <div class="left"></div>
                    <div class="right"></div>
                    <div class="bottom"></div>
                </div>
                <div class="footer">
                    <div class="inner">

                    </div>
                </div>
                <div class="font">
                <h4>LOREM IPSUM WAS</h4> 
                <p>LOREM IPSUM DOLOR SIT AMET</p>
                </div>
            </div>
            <div class="ab col-xs-6 col-md-6 col-lg-3"></div>
            <div class="ab  col-xs-6 col-md-6 col-lg-3"></div>
            <div class="ab  col-xs-6 col-md-6 col-lg-3"></div>
        </div>
</div>

css里面书写的伪类样式
海创软件组--20200726--css3动画案例（使用自媒体查询）

不同宽度的界面以及移动端

海创软件组--20200726--css3动画案例（使用自媒体查询）
海创软件组--20200726--css3动画案例（使用自媒体查询）
这些在不用界面显示不同效果是通过自媒体查询来书写的
海创软件组--20200726--css3动画案例（使用自媒体查询）

小细节处理

图形的渐变与加阴影

//渐变
background-image:linear-gradient(to right bottom, #fd4617, #ff6d12, #ff8d19, #ffaa2c, #ffc445) ;
//阴影
box-shadow: 36px 27px 11px -5px rgba(27, 14, 0, 0.16);
//动画
animation: swing ease-in-out .3s infinite alternate;
@keyframes swing {
    0% { transform: rotate(8deg); }
    100% { transform: rotate(-8deg); }
}
//必须加上  transform-origin，才可以知道哪里是中心轴，从哪里开始转动。
    transform-origin:top ;

鼠标移动到小白点上面，阴影移动到左边

.innershake:hover
{
  box-shadow: -25px 50px 11px -5px rgba(27, 14, 0, 0.16);
  transition:2s;
}

接下来也没有什么可讲的了，直接放所有代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aaa@qq.com/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aaa@qq.com/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css'>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css'>
    <link rel="stylesheet" href="./style1.css"> 

</head>
<body>
    <div class="container">
        <div class="container-fluid">
        <div class="row">
            <!-- lg是电脑端，md是中（ipad）端，xs一般是手机端 -->
            <div class="ab col-xs-6 col-md-6 col-lg-3">
                <div class="header">
                    <div class="innershake">
                            <span class="glyphicon glyphicon-phone-alt big" aria-hidden="true"></span>
                     </div>
                    <div class="left"></div>
                    <div class="right"></div>
                    <div class="bottom"></div>
                </div>
                <div class="footer">
                    <div class="inner">

                    </div>
                </div>
                <div class="font">
                <h4>LOREM IPSUM WAS</h4> 
                <p>LOREM IPSUM DOLOR SIT AMET</p>
                </div>
            </div>
            <div class="ab col-xs-6 col-md-6 col-lg-3"></div>
            <div class="ab  col-xs-6 col-md-6 col-lg-3"></div>
            <div class="ab  col-xs-6 col-md-6 col-lg-3"></div>
        </div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/aaa@qq.com/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</html>

*{
    margin: 0;
    padding: 0;
}
html,body{
    height: 100%;
    background-color: bisque;
}
.ab{
    height:700px;
    width: 100%;
    text-align: center;
    background-color: pink;
    border: 1px white solid;
}
.header{
    position: relative;
    margin: 50px auto;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    border: 10px white solid;
    background-image:linear-gradient(to right bottom, #fd4617, #ff6d12, #ff8d19, #ffaa2c, #ffc445) ;
}
.header::before{
    content: "";
    height: 15px;
    width: 15px;
    background-color: white;
    border-radius:100%;
    position: absolute;
    bottom: -16px;
    left: 46%;
}
.header::after{
    content: "";
    height: 150px;
    width: 5px;
    position: absolute;
    background-color: white;
    bottom: -160px;
    left: 50%;
}
.innershake{
    text-align: center;
    color: #ff6d12;
    margin: 31px auto;
    height:120px;
    width: 120px;
    border-radius:50%;
    background-color: white;
    box-shadow: 36px 27px 11px -5px rgba(27, 14, 0, 0.16);
    border: 1px solid #e6e5e4;
    transition: 1s;
    animation: swing ease-in-out .3s infinite alternate;
    transform-origin:top ;
    /* left: calc(42% - .0rem); */
}
.innershake:hover
{
  box-shadow: -25px 50px 11px -5px rgba(27, 14, 0, 0.16);
  transition:2s;
}
.left{
    height: 10px;
    width: 10px;
    background-color: white;
    position: absolute;
    border-radius: 100%;
    right:-20px;
    bottom: -30px;
    box-shadow: 5px 5px 7px 1px rgba(0, 0, 0, 0.12)
}
.right{
    height: 10px;
    width: 10px;
    background-color: white;
    position: absolute;
    border-radius: 100%;
    right:-100px;
    bottom:-30px;
    box-shadow: 5px 5px 7px 1px rgba(0, 0, 0, 0.12)
}
.bottom{
    height: 30px;
    width: 30px;
    background-color: white;
    position: absolute;
    border-radius: 100%;
    right:-60px;
    bottom:-80px;
    box-shadow:10px 10px 11px 1px rgba(0, 0, 0, 0.12);
}





.footer{
    height: 50px;
    width: 50px;
    border: white 4px solid;
    border-radius: 100%;
    margin: auto;
    margin-top:180px;
    /* transition: 1s; */
    transform-origin: top;
    animation: swing ease-in-out .3s infinite alternate;
}
.inner{
    height:25px;
    width: 25px;
    border-radius: 100%;
    background-color: orange;
    box-shadow: 10px 12px 11px -5px rgba(27, 14, 0, 0.16);
    border: 1px solid #e6e5e4;
    margin:10px auto;
   
}
.inner::after{
    content: "";
    height: 15px;
    width: 15px;
    background-color: white;
    border-radius:100%;
    position: absolute;
    top: -5px;
    left: 46%;

}
.font{
    margin-top: 10px;
}
h4{
   
    color: orange;
}
.big{
    font-size: 50px;
    opacity: .5;
    padding: 20px;
}
/* swing,自媒体类型 */
@keyframes swing {
    0% { transform: rotate(8deg); }
    100% { transform: rotate(-8deg); }
}
@media only screen and (max-width: 1024px){

    .header{
        height: 150px;
        width: 150px;
    }
    .header::after{
        height: 175px;
        bottom: -190px;
    }
    .innershake{
        height:80px;
        width: 80px;
    }
  .left{
      right: -10px;
  }
  .right{
      right: -50px;
  }
  .bottom{
      bottom: -60px;
      height: 20px;
      width: 20px;
      right: -30px;
  }
  .footer{
      margin-left: 140px;
      margin-top: 140px;
  }
}
@media only screen and (max-width: 425px){
    .header::after{
        height:20px;
        bottom: -30px;
    }
    .footer{
        margin-left:auto;
        margin-top: 40px;
    }
}
相关标签： 海创软件组

上一篇： 游戏中录音功能的实现

下一篇： 海创软件组-20200531-JavaFx+Spring Boot+Maven搭建与打包部署窗体程序

推荐阅读