css的运用

自写复选框

<input type="checkbox" id="l">
<label for="l">复选框</label>
<style>
        input:checked+label{
            color: red;
        }
</style>

手风琴效果（展开图片）

手风琴效果

<body style="background-color: black;">
    <div class="wrap">
          <div class="box">
        <div class="picBox">
            <img src="img/手风琴效果/1.jpg">
            <div class="mask">计算机</div>
            <div class="mask">计算机</div>
        </div>
        <div class="picBox">
            <img src="img/手风琴效果/2.jpg">
            <div class="mask">家</div>
            <div class="mask">家</div>
        </div>
        <div class="picBox">
            <img src="img/手风琴效果/3.jpg">
            <div class="mask">抽象</div>
            <div class="mask">抽象</div>
        </div>
        <div class="picBox">
            <img src="img/手风琴效果/4.jpg">
            <div class="mask">车</div>
            <div class="mask">车</div>
        </div>
        <div class="picBox">
            <img src="img/手风琴效果/5.jpg">
            <div class="mask">日出</div>
            <div class="mask">日出</div>
        </div>
    </div>
    </div>
  
</body>

<style>
        .wrap{
            /* 用于负责外框的  防止鼠标经过白框的时候的动图出现bug*/
            width: 805px;height: 400px;
            border: 5px solid white;
        }
        .box{
            /* 用于装所有每部结构的 */
            width: 805px;height: 400px;
        }
        .picBox{
            width: 160px;
            height: 400px;
            border-right: 1px solid white;
            position: relative;
            overflow: hidden; 
            float: left;
        }
        /* .picBox中的img标签 */
        .picBox img{
            width: 500px;
            height: 400px;
           transition: 0.5s;
        }
        .mask{
            width:100%;
            height: 400px;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            text-align: center;
            line-height: 400px;
           transition: 0.5s;

        }
        /* 表示某个父类标签中的第二个后代标签是.mask 的.mask标签 
        (这个mask标签在它的父类标签中排第二个位置，前面还有个img标签)*/
        .mask:nth-child(2){
            position: absolute;
            top: 0;
            left: 0;
       
        }
      
        .mask:nth-child(3){
            position: absolute;
            bottom: 0;
            left: 0;
        }
       /* 包含了两个选择器 */
        .box:hover .picBox{
            width: 75px;
        } 
         /* 必须要有两个选择器，与上一个代码块一样，防止代码等级低被覆盖 */
        .box .picBox:hover{
            width: 500px;
        }
        .picBox:hover .mask:nth-child(2){
            height: 60px;
            line-height: 60px;
        }
        .picBox:hover .mask:nth-child(3){
            height: 60px;
            /* 必须控制行高，否则行高还是原来的行高，文字的位置就不会 */
            line-height: 60px;
        }
    </style>

双重阴影按钮

 <div class="box">
        双重阴影
 </div>
    
 <style>
        .box{
            width: 200px;
            height: 60px;
            color: white;
            background-color: red;
            margin: 100px auto;
            box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
            text-align: center;
            line-height: 60px;
            transition: 0.5s;
            cursor: pointer;
        }
        /* 鼠标经过 */
        .box:hover{
            box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5),0 0 40px  rgba(0, 0, 0,                           0.5) inset ;
         }
        /* 鼠标按下时(激活) */
        .box:active{
            box-shadow: 0 0 0px rgba(0, 0, 0, 0.5),0 0 40px  rgba(0, 0, 0, 0.5)                         inset ;
            margin-top: 110px;
        }
 </style>

图片上下滚动

<div class="box">
        <div class="bg"></div>
        <div class="bg"></div>
        <div class="bg"></div>
        <div class="bg"></div>
 </div>
 <style>
        .box{
            width: 216px;
            height: 60px;
            background-color: rgb(255, 255, 255);
        }
        .bg{
            width: 54px;
            height: 42px;
            /* border: black 1px solid; */
             background-repeat: no-repeat;
            background-position: center 0;
             float: left;
             margin-top: 10px;
             transition: 0.5s;
        }
        .bg:nth-child(1){
            background-image: url("img/图片上下滚动/bg_01.png");
        }
        .bg:nth-child(2){
            background-image: url("img/图片上下滚动/bg_02-03.png");
        }
        .bg:nth-child(3){
            background-image: url("img/图片上下滚动/bg_02-04.png");
            }
        .bg:nth-child(4){
            background-image: url("img/图片上下滚动/bg_02.png");
        }    
        .bg:nth-child(1):hover{
            background-position: center -42px;
        }
        .bg:nth-child(2):hover{
            background-position: center -42px;
        }
        .bg:nth-child(3):hover{
            background-position: center -42px;
        }
        .bg:nth-child(4):hover{
            background-position: center -42px;
        }
    </style>

图片翻转效果

<div class="box">
        <div class="picBox">
            <div class="font">
                <img src="img\01.jpg" alt="">
                <div class="text">春</div>
            </div>
            <div class="pic">生机勃勃</div>
        </div>
        <div class="picBox">
            <div class="font">
               <img src="img\02.jpg" alt="">
            <div class="text">夏</div>  
            </div>
           
            <div class="pic">阳光明媚</div>
        </div>
        <div class="picBox">
            <div class="font">
                 <img src="img\03.jpg" alt="">
            <div class="text">秋</div>
            </div>
           
            <div class="pic">硕果累累</div>
        </div>
        <div class="picBox">
            <div class="font">
                <img src="img\04.jpg" alt="">
            <div class="text">冬</div>
            </div>
            
            <div class="pic">白雪皑皑</div>
        </div>
    </div>
    
    <style>
        .box {
            width: 840px;
            height: 300px;
            /* border: olive 1px solid; */

        }

        .picBox {
            width: 210px;
            height: 300px;
            /* background-color: olive; */
            float: left;

            position: relative;
            perspective: 800px;
        }

        .font {
            width: 200px;
            height: 300px;
            position: absolute;
            left: 5px;
            top: 0;
            z-index: 2;
            /* 步骤2 */
            /* 过渡 */
            transition: 1s;
             /* 设置翻转以后的背面不可见 */
             backface-visibility: hidden;
        }

        .picBox img {
            width: 200px;
            height: 300px;
            border-radius: 20px;
        }

        .text {
            width: 36px;
            height: 36px;
            color: white;
            font-size: 30px;
            font-family: 楷体;
          

            position: absolute;
            left: 34px;
            top: 34px;
        }

        .pic {
            width: 200px;
            height: 300px;
            background-color: black;
            border-radius: 20px;
            color: white;
            text-align: center;
            line-height: 300px;
            font-size: 30px;
            font-family: 楷体;
            font-weight: bold;

            position: absolute;
            left: 5px;
            top: 0;

            /* 步骤2 */
             /* 先做出翻转效果 */
             transform: rotateY(180deg);
             /* 过渡 */
             transition: 1s;

             /* 设置翻转以后的背面不可见 */
             backface-visibility: hidden;
        }
        .picBox:hover .font{
            /* 步骤2 */
            /* 翻转效果 */
            transform: rotateY(-180deg);
           
        }
        .picBox:hover .pic{
            /* 步骤2 */
             /* 翻转效果 */
             transform: rotateY(0deg);
        }
        /* 步骤2 */
        .picBox:nth-child(1) .pic{
            color: yellowgreen;
        }
        /* 步骤2 */
        .picBox:nth-child(2) .pic{
            color: rgb(231, 0, 0);
        }
        /* 步骤2 */
        .picBox:nth-child(3) .pic{
            color: rgb(255, 230, 0);
        }
        /* 步骤2 */
        .picBox:nth-child(4) .pic{
            color: rgb(255, 255, 255);
        }
    </style>

雨刷效果

<div class="picBox">
        <img src="img\10.jpg" alt="">
        <div class="mask"></div>
        <div class="text">Come Back</div>
        <div class="mask1"></div>
 </div>
 
 <style>
        body{
            background-color: #e9dcdc;
        }
        .picBox{
            width: 480px;height: 360px;
           margin: 50px auto;
           position: relative;
         
        }
        .mask{
            width: 480px;height: 360px;
            background-color: rgba(0, 0, 244, 0.3);
            position: absolute;
            left: 0;top: 0;
            opacity: 0;
            transition: 0.5s;
        }
        .text{
            color: white;
            font-size: 30px;
            position: absolute;
            left: 50px;
            top: 30px;
            opacity: 0;
            transition: 0.5s;
        }
        .mask1{
            width: 480px;height: 360px;
           position: absolute;
           top: 0;left: 0;
           
              /* 雨刷效果  transparent:透明度
                    linear-gradient(渐变方向，一边渐变透明度，一边渐变色，另一边渐变色，另                     一边渐变透明度)
             */
           background: linear-gradient(to right top,transparent 40%,rgba(255,255,255,0.5) 40% ,rgba(255,255,255,0.5) 50% ,transparent 50%);
           background-repeat: no-repeat;
           background-size: 200% 200%;
           background-position: 410px -250px;
          transition: 0.5s;
        }
       
        .picBox:hover .mask1{
           background-position: -480px 0px;
        }
        .picBox:hover .text{
            opacity: 1;
        }
        .picBox:hover .mask{
            opacity: 1;
        }
    </style>

字体光束

<div class="box">
        前途似海,来日方长。
</div>

<style>
        body {
            background-color: #000000;
        }

        .box {
            height: 300px;
            width: 1000px;
            background-color: aquamarine;
            margin: 50px auto;
            color: rgba(255, 255, 255,0.5);
            font-size: 100px;
            font-family: 楷体;
            text-align: center;
            line-height: 300px;
            /* 背景光束 */
            background: linear-gradient(to right top, transparent 35%, #ffffff 48%, #ffffff 53%, transparent 65%);
            background-size: 300px 300px;
            background-repeat: no-repeat;
            /* 步骤2 */
            /* 设置背景在整个框里的位置 */
            background-position: 0px 0px;
            /* 将背景裁剪到文字 */
            -webkit-background-clip: text;
            /* 调用动画 */
            animation: move 1.5s infinite;
        }

        /* 步骤2 */
        /* 设置动画 */
        @keyframes move{
            0%{background-position: -180px 0;}
            100%{background-position: 800px 0;}
        }
    </style>

背景渐变

在这里插入图片描述

<body>
    <div class="box">1div>
    <div class="box">2div>
    <div class="box">3div>
    <div class="box">4div>
    <div class="box">5div>
    <div class="box">6div>
    <div class="box">7div>
body>
<style>

        .box{
            float: left;
            width: 300px;
            height: 200px;
            margin: 30px 30px ;
        }
        .box:nth-child(1){
           background:repeating-linear-gradient(#e08127 0px,#e08127 50px,#00abed 50px,#00abed 100px) ;
        }
        .box:nth-child(2){
           background:repeating-linear-gradient(to right,#e08127 0px,#e08127 50px,#00abed 50px,#00abed 100px) ;
        }
        .box:nth-child(3){
           background:repeating-linear-gradient(to left  bottom,#e08127 0px,#e08127 50px,#00abed 50px,#00abed 100px) ;
        }
        .box:nth-child(4){
           background:linear-gradient(to left  bottom,#e08127 0,#e08127 50%,#00abed 50% ,#00abed 100%) ;
        }
        .box:nth-child(5){
           background:linear-gradient(to left  bottom,#e08127 0,#e08127 50%,#00abed 50% ,#00abed 100%) ;
           background-size: 50px 50px;
        }
        .box:nth-child(6){
           background:linear-gradient(to right,rgba(245, 0, 0, 0.3) 0,rgba(245, 0, 0, 0.3) 50%,transparent 50% ,transparent 100%) ,linear-gradient(to bottom,rgba(245, 0, 0, 0.3) 0,rgba(245, 0, 0, 0.3) 50%,transparent 50% ,transparent 100%);
        }
        .box:nth-child(7){
           background:linear-gradient(to right,rgba(245, 0, 0, 0.3) 0,rgba(245, 0, 0, 0.3) 50%,transparent 50% ,transparent 100%) ,linear-gradient(to bottom,rgba(245, 0, 0, 0.3) 0,rgba(245, 0, 0, 0.3) 50%,transparent 50% ,transparent 100%);
           background-size: 50px 50px;

        }
    style>

字体图标（圆角）

字体图标

<body>
    <ul class="text">
        <li> <span class="icon">span>Homeli>
        <li><span class="icon">span>About Meli>
        <li><span class="icon">span>workli>
        <li><span class="icon">span>photographyli>
        <li><span class="icon">span>contactli>
    ul>
body>
<style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body {
            background-color: #29a79b;
        }
        
        .icon{
            position: relative;
            float: left;
            margin-bottom: 20px;
            display: block;
            height: 95px;
            width: 80px;
            height: 80px;
            border: 1px solid white;
            border-radius: 50%;
        }
        li:nth-child(1) .icon{
            background:#fff  no-repeat center center;
        }
        li:nth-child(2) .icon{
            background:#fff url("img/字体图标-圆角练习02.png") no-repeat center center;
        }
        li:nth-child(3) .icon{
            background:#fff url("img/字体图标-圆角练习03.png") no-repeat center center;
        }
        li:nth-child(4) .icon{
            background:#fff url("img/字体图标-圆角练习04.png") no-repeat center center;
        }
        li:nth-child(5) .icon{
            background:#fff url("img/字体图标-圆角练习05.png") no-repeat center center;
        }
        .text{
            margin-top: 200px;
        }
        .text li{
            float: left;
            padding:0 40px;
            width: 85px;
            text-align: center;
            font-weight: bold;
            color: #0c6766;
        }
        .icon::after{
            content: "";
            float: left;
            border-style: solid solid none solid;
            border-width: 15px 12px 0  12px;
            border-color: rgb(255, 255, 255) transparent transparent transparent;
            /* content: url("img/小三角.jpg");*/
            position: absolute;
            bottom: -14px;
            left: 50%;
            margin-left: -12px; 
        }
        li:hover{
            color: white;
            transition: 1s;
        }
        /* ********** 1 ********** */
        li:nth-child(1) .icon{
            transform: rotate(90deg);
            transform-origin:center bottom;
            opacity: 0;
            transition: 1s;
        }
        li:nth-child(1):hover .icon{
            transform: rotate(0deg);
            opacity: 1;
        }
        /* ********** 2 ********** */
        li:nth-child(2) .icon{
            transform-origin:center bottom;
            transform: scale(0);
            opacity: 0;
            transition: 1s;
        }
    
        li:nth-child(2):hover .icon{
            transform: scale(1);
            opacity: 1;
        }
        /* ********** 3 ********** */
        li:nth-child(3) .icon{
            transform: scalex(-1);
            opacity: 0;
            transition: 1s;
        }
        
        li:nth-child(3):hover .icon{
            transform: scalex(1);
            opacity: 1;
        }
        /* ********** 4 ********** */
        li:nth-child(4) .icon{
            transform: translateY(10px);
            transform-origin:center bottom;
            opacity: 0;
            transition: 1s;
        }
      
         li:nth-child(4):hover .icon{
             transform: translateY(0);
            opacity: 1;
        }
        /* ********** 5 ********** */
        li:nth-child(5) .icon{
            transform: translateY(-10px);
            transform-origin:center bottom;
            opacity: 0;
            transition: 1s;
        } 
      
         li:nth-child(5):hover .icon{ 
             transform: translateY(0px);
            opacity: 1;
        }
    style>

弹性盒（）

居中对齐

<div class="box">
        <img src="./image/胡杨林-切片01.jpg" alt="">
        <img src="./image/胡杨林-切片01.jpg" alt="">
        <img src="./image/胡杨林-切片01.jpg" alt="">
    div>
<style>
        .box{
            margin: 50px auto;
            width: 400px;
            height: 400px;
            border: 2px solid #bbbbbb;

            /* 1、弹性盒设置 */
            display: flex;
            justify-content: center;   // /* 居中排列 */
            align-items: center;

           /* 2、弹性盒设置 */
            display: flex;
            justify-content: space-between;   // /* 均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点。 */
            align-items: center;

          /* 3、弹性盒设置 */
            display: flex;
            justify-content: space-evenly;   // /* 均匀排列每个元素，每个元素之间的间隔相等。 */
            align-items: center;

         /* 4、弹性盒设置 */
            display: flex;
            justify-content: space-around;   // /* 均匀排列每个元素，每个元素周围分配相同的空间。 */
            align-items: center;
        }
        img{
            width: 100px;
            height: 100px;
        }
    style>

对角线

在这里插入图片描述

<div class="box">
        <img src="./image/胡杨林-切片01.jpg" alt="">
        <img src="./image/胡杨林-切片01.jpg" alt="">
        <img src="./image/胡杨林-切片01.jpg" alt="">
div>
<style>
        .box{
            margin: 50px auto;
            width: 400px;
            height: 400px;
            border: 2px solid #bbbbbb;

            /* 1、弹性盒设置 */
            display: flex;
            justify-content: space-around;

          /* 2、弹性盒设置 */
            display: flex;
            justify-content: space-between;
        }
        img{
            width: 100px;
            height: 100px;
        }
        img:nth-child(1){
            align-self: flex-start;
        }
        img:nth-child(2){
            align-self: center;
        }
        img:nth-child(3){
            align-self: flex-end;
        }
    style>

相关阅读:
java后端返回给前端不为空的属性
 好用的截图软件Snipaste2.7.3
一文看懂Mysql锁
 web前端期末大作业：旅游网页设计与实现——个人旅游博客(4页)HTML+CSS
SAP 一次性读取工单的所有状态（工单抬头、工序、子工序、检验特性等等）
Java中有哪些方式能实现锁某个变量
 Go编译原理系列9（函数内联）
简单聊聊羊了个羊
 JS逆向之巨量创意signature签名
 金仓数据库KingbaseES数据库开发指南（2. 开发基础）
原文地址：https://blog.csdn.net/TWenYuan/article/details/127089793