css3--新特性相关demo--小例子--源码

最新推荐文章于 2023-08-21 15:38:51 发布
最新推荐文章于 2023-08-21 15:38:51 发布
阅读量312 收藏
点赞数 1
分类专栏： 前端之相关小demo案例 文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/faith_girl/article/details/121400062
版权

文章目录

相关知识点链接–点进 】

平面转换--------------------------------2D

一、平面转换属性之位移–transform：translate

1.小开胃

在这里插入图片描述在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .father{
        border: 1px solid black;
width: 200px;
height: 100px;
    }
    .son{
        width: 100px;
        height: 50px;
        background-color: pink;
        transition:all 1s;

    }
    .father:hover .son{
        transform:translate(50%,50%);
    }


</style>
<body>
    
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

2.双开门（使用到了精灵图）

图片奉上
在这里插入图片描述
在这里插入图片描述效果图 向两边打开

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            width: 1360px;
            height: 600px;
            background:url(./images/bg.jpg);
            overflow: hidden;
            margin: auto;
        }
      
        .son1{
            float: left;
            width: 50%;
            height: 600px;
            background: url(./images/fm.jpg);
            transition: all 1s;
        }
        .son2{
            float: right;
            width: 50%;
            height: 600px;
            background: url(./images/fm.jpg) no-repeat -680px 0px; 
            transition: all 1s;
        }
        .father:hover .son1{
            transform:translate(-680px) ;
        }
        .father:hover .son2{
            transform:translate(680px) ;
        }
    </style>
</head>
<body>
   <div class="father">
       <div class="son1">
<!-- <img src="./images/fm.jpg"> -->
       </div>
       <div class="son2">
           
    </div>
   </div>
</body>
</html>

二、平面转换属性之旋转–transform：rotate

小开胃

图片奉上
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            transition: all 1s;
        }
        img:hover{
            transform: rotate(180deg);
        }
    </style>
</head>
<body>
    <img src="./image/rotate.png" alt=""> 
</body>
</html>

提高-改变旋转原点transform-origin

取值：
方位名词（left、top、right、buttom、center）eg:left bottom; 左下角-常用
像素单位值
百分比（参照盒子自身尺寸计算）

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            width: 250px;
            border:1px solid #000;
            transition: all 1s;
            transform-origin:right bottom;
        }
        img:hover{
            transform: rotate(180deg);
        }
    </style>
</head>
<body>
    <img src="./image/rotate.png" alt=""> 
</body>
</html>

多重转换（位移加旋转） --轮胎移动

图片奉上
在这里插入图片描述
轮胎边旋转边移动
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮胎旋转</title>
    <style>
        .box{
         width: 800px;
         height: 200px;
         border: 1px solid black;
        }
        img{
            height: 200px;
            transition: all 2s;
        }
        img:hover{
            transform: translate(600px) rotate(360deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="image/tyre.png">

        </div>
    </div>
</body>
</html>

三、平面转换属性之缩放–transform：scale

图片奉上
在这里插入图片描述在这里插入图片描述在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮胎旋转</title>
    <style>
        .box{
         width: 500px;
         height: 400px;
         border: 1px solid black;
         text-align: center;
        }
        img{
            height: 200px;
            transition: all 2s;
            margin-top: 100px;
       
        }
        img:hover{
            transform: scale(2);
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="image/daji.jpg">

        </div>
    </div>
</body>
</html>

背景渐变-渐变案例

在这里插入图片描述在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            float: left;
            position: relative;
            /* text-align: center; */
            /* width: 400px; */
            /* height: 400px; */
            /* background-image: linear-gradient(
               transparent,
               rgba(0,0,0,0.6)
            );     */
           
        }
        span{
            position: absolute;
            width: 538px;
            left: 118px;
            bottom: 36px;
            /* margin: auto; */
            /* text-align: center; */
            font-size: 45px;
            font-weight: bold;
            color: rgb(240, 239, 238);
        }
        .mask{
            position: absolute;
            left: 0px;
            top: 0px;
            float: left;
            width: 772px;
            height: 546px;
            opacity: 0;
            background-image: linear-gradient(
               transparent,
               rgba(0,0,0,0.6)
            );
           
        }
              .mask:hover{
                opacity: 1;
              }
    </style>
</head>
<body>
    <div class="box">
        <img src="./image/product.jpg" alt="">
        <span>
            OceanStor Pacific海量存储斩获2021Interop金奖
        </span>
    </div>
    <div class="mask"></div>
</body>
</html>

综合案例

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/demo1.css"> 
    <!-- <link rel="stylesheet" href="./css/demo.css"> -->
</head>
<body>
    <div class="box">
        <div class="one lf common">
            <div class="one1 common1">
            <p>
                产品
            </p>
            OceanStor Pacific 海量存储斩获 2021 Interop金奖
          
        </div>
        <h6>
            了解更多
        </h6>
        <div class="mask1 common"></div>
        </div>
        <div class="two lf common">
            <div class="two1 common1">
                <p>
                    行业洞察
                </p>
                迈向智能世界2030
               
            </div>
            <h6>
                了解更多
            </h6>
            <div class="mask1 common"></div>
        </div>
        <div class="three lf common">
            <div class="three1 common1">
                <p>
                    《ICT新视界》刊首语
                </p>
                笃行致远，共建具有获得感、幸福感、安全感的智慧城市
                
            </div>
            <h6>
                了解更多
            </h6>
            <div class="mask1 common"></div>
        </div>
    </div>
</body>
</html>

CSS

*{
    padding: 0px;
    margin: 0px;
}
.box{
    width: 1260px;
    height: 247px;
    margin: 0 auto;
    margin-top: 20px;
    /* background-color: red; */
}
.common{
    width: 350px;
    height: 247px;
    margin-right:60px;
    background-size: 350px 247px;
    position: relative;
}
.lf{
    float: left;
}
.one{
    /* position: relative; */
    background-image: url("../images/product.jpeg");
   
}
.mask1{
background-image: linear-gradient(
transparent,
rgba(0,0,0,0.6)
);
opacity: 0;
}
.one1{
 transition: all 0.5s;
}
.one:hover .one1{
    bottom:80px;
}
.one:hover .mask1{
    opacity: 1;
}
.one:hover h6{
    bottom: 20px;
}
/* opacity: 1; */
.two{
    background-image: url("../images/huawei1.jpeg");
}
.two1{
    transition: all 0.5s;
   }
   .two:hover .two1{
       bottom:80px;
   }
   .two:hover .mask1{
    opacity: 1;
}
.two:hover h6{
    bottom: 20px;
}
.three{
    background-image: url("../images/huawei2.jpeg");
}
.three1{
    transition: all 0.5s;
   }
   .three:hover .three1{
       bottom:80px;
   }
   .three:hover .three1{
    bottom:80px;
}
   .three:hover .mask1{
    opacity: 1;
}
.three:hover h6{
    bottom: 20px;
}
.common1{
position: absolute;
right: 0px;
bottom:26px;
width: 320px;
color: #fff;
font-size: 18px;
font-weight: bold;
margin: 0 auto;
z-index: 2;

}
p{
    font-size: 14px;
    font-weight: normal;
    margin-bottom: 15px;
    margin-top: 30px;
}
h6{
    position: absolute;
    bottom: -25px;
    left: 30px;
    color: #fff;
    font-size: 16px;
    font-weight:normal ;
      z-index: 2;
    transition: all 0.5s;
}

空间转换--------------------------------3D

一、 3D旋转

transfom:rotateX

在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            perspective: 800px;
        }
        img{
            transition: all 0.5s;
        }


    
        .box:hover img{
            transform:rotateX(30deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/huawei2.jpeg">
    </div>
</body>
</html>

transfom:rotateY

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            perspective: 800px;
        }
        img{
            transition: all 0.5s;
        }


    
        .box:hover img{
            transform:rotateX(30deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/huawei2.jpeg">
    </div>
</body>
</html>

3D导航案例--------------------（3D旋转transform:rotateX/Y/Z+3D位移transform：translateX/Y/Z）

在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            list-style: none;
            text-align: center;
        }
        li{
            position: relative;
            float: left;
            width: 100px;
            height: 50px;
            /* background-color: green; */
            transition: all 0.5s;
            transform-style: preserve-3d;
             /* transform:scale3d(0.5,1.1,2);*/
        }
       
       li a{
            position:absolute;
            left: 0px;
            right: 0px;
           display: block;
            color: blanchedalmond;
            width: 100%;
            height: 100%;
            text-decoration: none;
            line-height: 50px;
            /* transform:rotateX(90deg); */
            
        }
        li a:first-child{
            background-color: green;
            transform:translateZ(25px);
        }
        li a:last-child{
            background-color:yellow;
            transform: rotateX(90deg) translateZ(20px);
        }
        li:hover{
           transform: rotateX(-90deg);
        
        }
    </style>
</head>
<body>
    <ul>
        <li><a herf="#">首页</a>
            <a herf="#">Index</a></li>
        <li><a href="#">登录</a><a herf="#">login</a></li>

        <li><a href="#">注册</a><a herf="#">Register</a></li>
    </ul>
</body>
</html>

二、3D缩放-transform:scale3d(0.5,1.1,2);

在3D导航案例中的li样式下添加
/* transform:scale3d(0.5,1.1,2);*/
实现3D缩放效果 可以f12调试一下这三个值 进行观察缩放效果

动画

小开胃

一刷新就会产生动画
在这里插入图片描述在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    .box{
        width: 200px;
        height: 100px;
        background-color: pink;
        animation:change 0.5s;
    }
    @keyframes change{
        form{
            width: 200px;
        }
        to{
            width: 400px;
        }
        
    }
   
</style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

小人一直跑动画案例

精灵图奉上
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 140px;
            height: 140px;
            background:url("./bg.png");
            animation: ren 1s steps(12) infinite;
        }
        @keyframes ren{
            from{background-position: 0 0;}
            to{
                background-position: -1680px 0;
                /* transform: translate(800px); */
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

走马灯动画

在这里插入图片描述图片奉上
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    *{
        
        margin: 0;
        padding: 0;

    }

    .box{
        width: 600px;
        height: 111px;
        border: 2px solid rgb(114, 107, 107);
        margin: 0 auto; 
       overflow: hidden;
      
    }
    img{
        width: 200px;
     
    
    }
    ul{
        list-style: none;
        width: 2000px;
        animation: zou 10s infinite;
    }
    li{
           
        float: left;
    }
    @keyframes zou {
        to{
            transform: translate(-1400px);
        }
    }
     ul:hover{
        animation-play-state: paused;
    }
</style>
</head>
<body>
    <div class="box">
        <ul>
            <li><img src="images/1.jpg"> </li>
            <li><img src="images/2.jpg"></li>
            <li><img src="images/3.jpg"></li>
            <li><img src="images/4.jpg"></li>
            <li><img src="images/5.jpg"></li>
            <li><img src="images/6.jpg"></li>
            <li><img src="images/7.jpg"></li>
            <li><img src="images/1.jpg"> </li>
            <li><img src="images/2.jpg"></li>
            <li><img src="images/3.jpg"></li>
        </ul>
    </div>
</body>
</html>

旅游背景动画

在这里插入图片描述
图片奉上在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            position: relative;
            width: 1850px;
            height: 670px;
            background-image: url("f1_1.jpg");
        }
       .yun1{
           position:absolute;
           right: 600px;
           top: 50px;
           animation: move1 2s infinite;
       }
       .yun2{
           position:absolute;
           left: 650px;
           top: 25px;
           animation: move2 2s infinite;
       }
       .yun3{
           position:absolute;
           left: 570px;
           top: 100px;
           animation: move3 3s infinite;
       }
       .lu{
           position:absolute;
           /* background-image: url(./yun1.png); */
           left: 1000px;
           top: 100px;
         
       }
       .font{
           position:absolute;
           /* background-image: url(./yun1.png); */
           left: 720px;
           top: 250px;
         
       }
       .b1{
           position:absolute;
           /* background-image: url(./yun1.png); */
           left: 665px;
          bottom: 40px;
          animation: move4 2s  infinite;
       }
       
       .b2{
           position:absolute;
           /* background-image: url(./yun1.png); */
           left:815px;
          bottom: 40px;
          animation: move4 2s 0.5s infinite;
         
       }
       .b3{
        position:absolute;
           /* background-image: url(./yun1.png); */
        left: 995px;
        bottom: 40px;
        animation: move4 2s 1s infinite;
       }
       .b4{
           position:absolute;
           /* background-image: url(./yun1.png); */
           left: 1110px;
          bottom: 40px;
          animation: move4 2s 1.5s infinite;
       }
       .font img{
           height: 200px;
       }
       .b1 img{
           height: 100px;
       }
       .b2 img{
           height: 100px;
       }
       .b3 img{
           height: 100px;
       }
       .b4 img{
           height: 100px;
       }
       @keyframes move1{
           50%{
               right: 650px;
           }
           
       }
       @keyframes move2{
        50%{
               left: 700px;
           }
           
       }
       @keyframes move3{
        50%{
               left: 620px;
           }
           
       }
       @keyframes move4{
           50%{
               bottom:90px;
           }
           
       }
    </style>
</head>
<body>
    <div class="box">
    <div class="yun1"><img src="./yun1.png"></div>
    <div class="yun2"><img src="./yun2.png"></div>
    <div class="yun3"><img src="./yun3.png"></div>
    <div class="lu"><img src="./lu.png"></div>
    <div class="font"><img src="./font1.png"></div>
    <div class="yun3"><img src="./yun3.png"></div>
    <div class="b1"><img src="./1.png"></div>
    <div class="b2"><img src="./2.png"></div>
    <div class="b3"><img src="./3.png"></div>
    <div class="b4"><img src="./4.png"></div>

    </div>
  
</body>
</html>
临夏_
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
demo样式.css
12-19
这是一个demo.css
gradio实用小技能汇总
有问题请直接说问题就好
11-01 2340
gradio实用小技能汇总
使用css美化gradio界面
羊城迷鹿的博客
08-21 3646
【代码】使用css美化gradio界面。
20个CSS3动画实战案例开发
03-04
本套课程，大喵将手把手带着大家上手精选20个纯CSS3动画项目精选案例项目实战，让小伙伴们能够轻松上手，企业公司项目开发过程中遇到的页面动画交互效果需求实现，以及一些更加炫酷创意动画想法的实现，成为一名酷酷哒前端开发工程师。本课程为20套CSS3动画实战课程，所集合构成的一套实战课程。适合热爱前端动画的小伙伴们，课程的主要内容包括： 01.3D文字效果制作、02.雪花飘落效果、03.图文模糊效果、04.文字卡片折叠效果、05.六角形效果、06. 进度条颜色跟随效果、07. 动态视频背景效果、08. 按键文字跳动效果、09. 弹跳小球效果、10. 3D翻折菜单导航效果、11. 3D圆环层叠动画效果、12. 水波浪球起伏效果、13. 遮罩透明滤镜文字效果、14. 阴阳无极八卦阵效果、15. 文字双屏进入进出效果、16. 炫酷光影加载效果、17. 文字背景水波浪效果、18. 炫酷发光倒影按钮、19. 扁平预加载动画效果、20. 烟囱冒烟动画效果
css让两个不同高度的盒子，顶部对齐
macangyewangs的博客
08-31 5824
定义和用法 vertical-align 属性设置元素的垂直对齐方式。 baseline 默认。元素放置在父元素的基线上。 sub 垂直对齐文本的下标。 super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶端与父元素字体的顶端对齐 middle 把此元素放置在父元素的中部。 bottom 把元素的顶端与行中最低的元素的顶端对齐。 text-bottom 把元素的底端与父元素字体的底端对齐。 length % 使用 "line-height" 属性的百
商业源码-编程源码-DevPage2005 1.0 Beta版Demo源码.zip
06-15
DevPage2005是一款在2005年推出的编程工具，其1.0 Beta版Demo源码为我们提供了一个深入理解这款软件开发平台工作原理的机会。这个压缩包包含的源码是开发者用来演示DevPage2005功能的实例，对于学习和研究Web应用...
dc-sdk-examples:DC-SDK开发示例
05-11
这个例子库提供了丰富的实践代码，帮助开发者学习如何集成Cesium库，一个广泛使用的开源3D地球和时空数据可视化库。 在这个"dc-sdk-examples"压缩包中，你将找到一个名为"dc-sdk-examples-master"的主文件夹。这个...
Spring-Demo-1.zip
07-22
3. **源代码**：项目中通常会有`src/main/java`目录，包含各类Java源码，如控制器（Controller）、服务（Service）、DAO（Data Access Object）等。这些类通过注解与配置文件关联，实现业务逻辑。 4. **测试**：在`...
微信小程序-消费计算器demo源码
05-14
在这个“微信小程序-消费计算器demo源码”中，我们可以学习到如何利用微信开发者工具进行小程序的开发，并掌握一些核心功能的实现。 1. **微信小程序框架**： 微信小程序基于一套自有的开发框架，WXML（WeiXin ...
layui-步骤条step-源码-导入即用
最新发布
10-16
在这个例子中，`'step'`是layui步骤条组件的模块名，加载后可以通过`layui.step`来调用相关方法和配置。具体使用时，你可以通过创建一个DOM元素，然后调用step的初始化方法，例如： ```html <div class="layui-step...
HTML5+CSS3实例源码（包含20个）
02-16
HTML5+CSS3实例源码（包含20个）,制作都很精细，界面漂亮，望对你有帮助
HTML5以及CSS3demo
05-09
H5新特性以及结合C3的小demo，有利于更好的学习H5开发
css 3D Demo
weixin_43910988的博客
07-08 785
* 该属性必须在父或大于父的级别上添加,保证其子,孙等盒子可以以3D视角被观察 *//* 必须设定该属性,保证box内的所有子盒子整体都以3D样式进行呈现 *//* 设置最后一个子盒子按X轴 旋转76度 *//* 设置整体盒子按Y轴 选中30度 */
18个强大的纯CSS3动画案例分享
热门推荐
web前端开发
08-12 1万+
编辑整理 | web前端开发在之前，我也分享过很多关于CSS3,HTML5的动画案例，今天我要与你分享的这18个动画案例，也是比较炫酷的，可以实现很多交互，这些CSS3动...
HTML5、CSS3的demo及学习资源
1846396994
05-06 162
  今天没事逛了下论坛，找了些关于HTML5和CSS3的学习资源，大部分都是些DEMO以及参考手册等。为方便自己和对HTML5和CSS3有兴趣的朋友，在此做个标记，方便查看！ &lt;pre&gt;&lt;strong&gt;1、HTML5 DEMO&lt;/strong&gt; 地址：&lt;a href="http://revieweb20.com/Speech/Demo/html5...
css3 animation demo
qq_26889291的博客
10-15 255
css3 animation demo
css demo
qq_43328914的博客
08-31 197
好看的旋转动画 html代码 <div class="outDiv"> <div class="inDiv"></div> </div> css代码 .outDiv{ background: #000; width: 50px; height: 50px; position: absolute; top: 50%; left: 50%; border-radius: 100%; bord
炫酷的css3动作源码,8 个超炫酷的纯 CSS3 动画及源码分享
weixin_35951321的博客
08-04 1810
在现代网页中，我们已经越来越习惯使用大量的CSS3元素，而现在的浏览器也基本都支持CSS3，所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页。本文要分享8个超炫酷的纯CSS3动画，有几个非常经典，比如大象走路的那个，如果你对CSS3感兴趣，赶紧来看看吧。1、纯CSS3实现大象走路动画之前我们分享过一款纯CSS3人物行走动画，效果相当震撼。这一次要给大家介绍的是一款纯CSS...
EWN-8822CSS3AH
11-15
"EWN-8822CSS3AH 是一款集成了 IEEE802.11b/g/n/a/ac 无线标准与 Bluetooth 2.1/3.0/4.2/5.0 技术的 SDIO 模块，由 Earda Technologies Co., Ltd. 制造。该模块适用于 Wi-Fi 和蓝牙功能的集成应用，如无线网络连接和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

临夏_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值