切图+动画实现图形转换

最新推荐文章于 2024-07-21 17:58:14 发布
最新推荐文章于 2024-07-21 17:58:14 发布
阅读量179 收藏
点赞数
分类专栏： 前端学习 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45287715/article/details/117440698
版权

实现效果

动画

代码示例
<!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>
        body {
            background-color: rgb(7, 7, 122);
        }
        .box {
            position: relative;
            width: 500px;
            height: 500px;
            margin: auto;
            margin-top: 250px;
        }
        .one{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .b1,.b2,.b3 ,.b4,.b5{
            background-color: #104066;
        }
        .b1 {
           animation: a1 5s 2s ease-in-out infinite  forwards alternate;
            clip-path: polygon(109px 156px,184px 125px,111px 179px);
        }
        .b2 {
            animation: a2 5s 2s ease-in-out infinite forwards alternate;
            clip-path: polygon(71px 156px,144px 110px, 184px 125px);
        }
        .b3 {
            animation: a3 5s 2s ease-in-out infinite forwards alternate;
            clip-path: polygon(184px 125px,111px 179px,152px 166px);
        }
        .b4 {
            animation: a4 5s 2s ease-in-out infinite forwards alternate;
            clip-path: polygon(152px 166px,111px 179px,118px 199px);
        }
        .b5 {
            animation: a5 5s 2s ease-in-out infinite forwards alternate;
            clip-path: polygon(152px 166px,133px 214px,118px 199px);
        }
        .b6,.b7,.b8,.b9,.b10 ,.b11,.b12,.b13,.b14,.b15,.b16,.b17,.b21{
            background-color: #0d86a1;
        }
        .b6{
            animation: a6 5s 2s ease-in-out infinite forwards alternate;
           
            clip-path: polygon(184px 125px,144px 110px,185px 91px);
        }
        .b7 {
            animation: a7 5s 2s ease-in-out infinite forwards alternate;
            clip-path: polygon(184px 125px,185px 91px,240px 104px);
        }
        .b8 {
            animation: a8 5s 2s ease-in-out infinite forwards alternate;
            clip-path: polygon(185px 91px,240px 104px,210px 90px);
        }
        .b9 {
            animation: a9 5s 2s ease-in-out infinite forwards alternate;
            clip-path: polygon(240px 104px,210px 90px,241px 90px);
        }
        .b10 {
            animation: a10 5s 2s ease-in-out infinite forwards alternate;
            clip-path: polygon(210px 90px,241px 90px,275px 103px);
        }
        .b11 {
            animation: a11 5s 2s ease-in-out infinite forwards alternate;
            clip-path: polygon(241px 90px,275px 103px,308px 108px);
        }
        .b12 {
            animation: a12 5s 2s ease-in-out infinite forwards alternate;
            clip-path: polygon(185px 91px,132px 57px,145px 81px);
        }
        .b13 {
            animation: a13 5s 2s ease-in-out infinite forwards alternate;
            clip-path: polygon(185px 91px,145px 81px,147px 93px);
        }
        .b14 {
            animation: a14 5s 2s ease-in-out infinite forwards alternate;
            clip-path: polygon(144px 110px,185px 91px,147px 93px);
        }
        .b15 {
            animation: a15 5s 2s ease-in-out infinite forwards alternate;
            clip-path: polygon(133px 214px,161px 232px,136px 254px);
        }
        .b16 {
            animation: a16 5s 2s ease-in-out infinite forwards alternate;
            clip-path: polygon(161px 232px,136px 254px,149px 256px);
        }
        .b17 {
            animation: a17 5s 2s ease-in-out infinite forwards alternate;
            clip-path: polygon(136px 254px,149px 256px,149px 273px);
        }
        .b18,.b19,.b20,.b22,.b23,.b24,.b25,.b26,.b27 ,.b28,.b29,.b30,.b31,.b32,.b33,.b34,.b35,.b36{
            background-color: #9aafb2;
        }
        .b18 {
            animation: a18 5s 2s ease-in-out infinite forwards alternate;
            clip-path: polygon(275px 103px,308px 108px,287px 129px);
        }
        .b19 {
            animation: a19 5s 2s ease-in-out infinite forwards alternate;
            clip-path: polygon(275px 103px,287px 129px,254px 123px);
        }
        .b20 {
            animation: a20 5s 2s ease-in-out infinite forwards alternate;
            clip-path: polygon(275px 103px,254px 123px,240px 104px);
        }
        .b21 {
            animation: a21 5s 2s ease-in-out infinite forwards alternate;
            clip-path: polygon(240px 104px,275px 103px,241px 90px);
        }
        .b22 {
            animation: a22 5s 2s ease-in-out infinite forwards alternate;
            clip-path: polygon(254px 123px,240px 104px,184px 125px);
        }
        .b23 {
            animation: a23 5s 2s ease-in-out infinite forwards alternate;
            clip-path: polygon(254px 123px,184px 125px,253px 149px);
        }
        .b24 {
            animation: a24 5s 2s ease-in-out infinite forwards alternate;
            clip-path: polygon(254px 123px,253px 149px,276px 139px);
        }
        .b25 {
            animation: a25 5s 2s ease-in-out infinite forwards alternate;
            clip-path: polygon(184px 125px,253px 149px,210px 157px);
        }
        .b26 {
            animation: a26 5s 2s ease-in-out infinite forwards alternate;
            clip-path: polygon(253px 149px,210px 157px,238px 170px);
        }
        .b27 {
            animation: a27 5s 2s ease-in-out infinite forwards alternate;
            clip-path: polygon(253px 149px,238px 170px,249px 188px);
        }
        .b28 {
            animation: a28 5s 2s ease-in-out infinite forwards alternate;
            clip-path: polygon(184px 125px,210px 157px,186px 159px);
        }
        .b29 {
            animation: a29 5s 2s ease-in-out infinite forwards alternate;
            clip-path: polygon(184px 125px,186px 159px,152px 166px);
        }
        .b30 {
            animation: a30 5s 2s ease-in-out infinite forwards alternate;
            clip-path: polygon(165px 175px,186px 159px,152px 166px);
        }
        .b31 {
            animation: a31 5s 2s ease-in-out infinite forwards alternate;
            clip-path:polygon(165px 175px,152px 166px,133px 214px)
        }
        .b32 {
            animation: a32 5s 2s ease-in-out infinite forwards alternate;
            clip-path:polygon(152px 166px,133px 214px,155px 206px)
        }
        .b33 {
            animation: a33 5s 2s ease-in-out infinite forwards alternate ;
            clip-path:polygon(133px 214px,155px 206px,161px 232px)
        }
        .b34 {
            animation: a34 5s 2s ease-in-out infinite forwards alternate;
            clip-path:polygon(155px 206px,161px 232px,194px 213px)
        }
        .b35 {
            animation: a35 5s 2s ease-in-out infinite forwards alternate;
            clip-path:polygon(161px 232px,194px 213px,193px 231px)
        }
        .b36 {
            animation: a36 5s 2s ease-in-out infinite forwards alternate;
            clip-path:polygon(194px 213px,193px 231px,227px 240px)
        }
        @keyframes a1 {
            0%{}
            50%{
                clip-path: polygon(283px 326px,279px 352px,302px 344px);
                background-color: #54a39d;
            }
            100% {
                clip-path: polygon(176px 203px,169px 172px,207px 168px);
                background-color: #8eb0bc;
            }
        }
        @keyframes a2 {
            0%{}
            50%{
                clip-path: polygon(283px 326px,302px 344px,323px 325px);
                background-color: #469494;
            }
            100% {
                clip-path: polygon(169px 172px,207px 168px,184px 146px);
                background-color:#90a7ad ;
            }
        }
        @keyframes a3 {
            0%{}
            50%{
                clip-path: polygon(283px 326px,323px 325px,311px 301px);
                background-color: #3d878a;
            }
            100% {
                clip-path: polygon(221px 142px,207px 168px,184px 146px);
                background-color:#b1c7d2 ;
            }
        }
        @keyframes a4 {
            0%{}
            50%{
                clip-path: polygon(293px 302px,283px 326px,311px 301px);
                background-color: #65b9ac;
            }
            100% {
                clip-path: polygon(221px 142px,207px 168px,252px 167px);
                background-color:#d4dfe5 ;
            }
        }
        @keyframes a5 {
            0%{}
            50%{
                clip-path: polygon(293px 302px,311px 301px,308px 286px);
                background-color: #55a89e;
            }
            100% {
                clip-path: polygon(176px 203px,207px 168px,252px 167px);
                background-color:#1b5d6d ;
            }
        }
        @keyframes a6 {
            0%{}
            50%{
                clip-path: polygon(323px 325px,311px 301px,343px 295px);
                background-color: #2c707b;
            }
            100% {
                clip-path: polygon(176px 203px,252px 167px,197px 221px);
                background-color:#246674 ;
            }
        }
        @keyframes a7 {
            0%{}
            50%{
                clip-path: polygon(308px 286px,311px 301px,343px 295px);
                background-color: #4c9b98;
            }
            100% {
                clip-path: polygon(241px 212px,252px 167px,197px 221px);
                background-color:#246674 ;
            }
        }
        @keyframes a8 {
            0%{}
            50%{
                clip-path: polygon(308px 286px,349px 276px,343px 295px);
                background-color: #327880;
            }
            100% {
                clip-path: polygon(241px 212px,252px 167px,262px 195px);
                background-color:#4b9598 ;
            }
        }
        @keyframes a9 {
            0%{}
            50%{
                clip-path: polygon(308px 286px,349px 276px,326px 274px);
                background-color: #377d85;
            }
            100% {
                clip-path: polygon(367px 103px,359px 84px,350px 94px);
                background-color:#c55527 ;
            }
        }
        @keyframes a10 {
            0%{}
            50%{
                clip-path: polygon(350px 262px,349px 276px,326px 274px);
                background-color: #377d85;
            }
            100% {
                clip-path: polygon(332px 93px,359px 84px,350px 94px);
                background-color:#b64d20 ;
            }
        }
        @keyframes a11 {
            0%{}
            50%{
                clip-path: polygon(350px 262px,379px 236px,333px 222px);
                background-color: #aa4f3c;
            }
            100% {
                clip-path: polygon(332px 93px,359px 84px,319px 82px);
                background-color:#d8471a ;
            }
        }
        @keyframes a12 {
            0%{}
            50%{
                clip-path: polygon(309px 270px,308px 286px ,326px 276px);
                background-color: #6d002a;
            }
            100% {
                clip-path: polygon(359px 84px,319px 82px,339px 73px);
                background-color:#d84e18 ;
            }
        }
        @keyframes a13 {
            0%{}
            50%{
                clip-path: polygon(309px 270px,350px 262px ,326px 276px);
                background-color: #87172f;
            }
            100% {
                clip-path: polygon(373px 119px,365px 109px,357px 119px);
                background-color:#fffde5 ;
            }
        }
        @keyframes a14 {
            0%{}
            50%{
                clip-path: polygon(309px 270px,350px 262px ,333px 222px);
                background-color: #8c2834;
            }
            100% {
                clip-path: polygon(365px 109px,357px 119px,350px 103px);
                background-color:#e1f4f2 ;
            }
        }
        @keyframes a15 {
            0%{}
            50%{
                clip-path: polygon(309px 270px,317px 236px,333px 222px);
                background-color: #a14339;
            }
            100% {
                clip-path: polygon(343px 119px,357px 119px,350px 103px);
                background-color:#f0f2f1 ;
            }
        }
        @keyframes a16 {
            0%{}
            50%{
                clip-path: polygon(330px 212px,317px 236px,333px 222px);
                background-color: #b6613c;
            }
            100% {
                clip-path: polygon(343px 119px,350px 103px,331px 103px);
                background-color:#e8f1ec ;
            }
        }
        @keyframes a17 {
            0%{}
            50%{
                clip-path: polygon(330px 212px,363px 180px,333px 222px);
                background-color: #d08043;
            }
            100% {
                clip-path: polygon(343px 119px,331px 103px,325px 127px);
                background-color:#edf5ff ;
            }
        }
        @keyframes a18 {
            0%{}
            50%{
                clip-path: polygon(367px 202px,363px 180px,333px 222px);
                background-color: #de9247;
            }
            100% {
                clip-path: polygon(315px 114px,331px 103px,325px 127px);
                background-color:#e2e8e8 ;
            }
        }
        @keyframes a19 {
            0%{}
            50%{
                clip-path: polygon(367px 202px,379px 236px,333px 222px);
                background-color: #b9643f;
            }
            100% {
                clip-path: polygon(315px 114px,325px 127px,306px 123px);
                background-color:#eafaf9 ;
            }
        }
        @keyframes a20 {
            0%{}
            50%{
                clip-path: polygon(367px 202px,379px 236px,396px 214px);
                background-color: #cb7c43;
            }
            100% {
                clip-path: polygon(325px 127px,306px 123px,288px 171px);
                background-color:#dae1e7 ;  
            }
        }
        @keyframes a21 {
            0%{}
            50%{
                clip-path: polygon(367px 202px,403px 198px,396px 214px);
                background-color: #d68745;
            }
            100% {
                clip-path: polygon(325px 127px,335px 182px,288px 171px);
                background-color:#fd8c26 ;    
            }
        }
        @keyframes a22 {
            0%{}
            50%{
                clip-path: polygon(367px 202px,403px 198px,363px 180px);
                background-color: #eda448;
            }
            100% {
                clip-path: polygon(325px 127px,335px 182px,356px 126px);
                background-color:#fa9430 ;                                              
            }
        }
        @keyframes a23 {
            0%{}
            50%{
                clip-path: polygon(363px 180px,403px 198px,407px 183px);
                background-color: #f9b44d;
            }
            100% {
                clip-path: polygon(350px 188px,335px 182px,356px 126px);
                background-color:#bf1a07;                                                  
            }
        }
        @keyframes a24 {
            0%{}
            50%{
                clip-path: polygon(363px 180px,403px 198px,408px 163px);
                background-color: #fab74e;
            }
            100% {
                clip-path: polygon(325px 127px,356px 126px,343px 120px);
                background-color:#f5a22a;  
            }
        }
        @keyframes a25 {
            0%{}
            50%{
                clip-path: polygon(308px 267px,317px 238px,296px 226px);
                background-color: #216373;
            }
            100% {
                clip-path: polygon(357px 119px,356px 126px,343px 120px);
                background-color:#eca345;   
            }
        }
        @keyframes a26 {
            0%{}
            50%{
                clip-path: polygon(308px 267px,293px 250px,296px 226px);
                background-color: #185769;
            }
            100% {
                clip-path: polygon(373px 119px,356px 126px,357px 119px);
                background-color:#da9841;   
            }
        }
        @keyframes a27 {
            0%{}
            50%{
                clip-path: polygon(296px 226px,303px 210px,317px 238px);
                background-color: #266979;
            }
            100% {
                clip-path: polygon(288px 171px ,335px 182px,283px 226px);
                background-color:#fa7d29;           
            }
        }
        @keyframes a28 {
            0%{}
            50%{
                clip-path: polygon(332px 210px,303px 210px,317px 238px);
                background-color: #3b8689;
            }
            100% {
                clip-path: polygon(334px 219px ,335px 182px,283px 226px);
                background-color:#c92c0d;        
            }
        }
        @keyframes a29 {
            0%{}
            50%{
                clip-path: polygon(332px 210px,303px 210px,322px 201px);
                background-color: #2b8789;
            }
            100% {
                clip-path: polygon(334px 219px ,335px 182px,350px 188px);
                background-color:#c1250c;             
            }
        }
        @keyframes a30 {
            0%{}
            50%{
                clip-path: polygon(317px 196px,303px 210px,322px 201px);
                background-color: #3a8088;
            }
            100% {
                clip-path: polygon(283px 226px ,334px 219px,297px 247px);
                background-color:#d73f10;          
            }
        }
        @keyframes a31 {
            0%{}
            50%{
                clip-path: polygon(317px 196px,303px 210px,298px 196px);
                background-color: #3a8088;
            }
            100% {
                clip-path: polygon(283px 226px ,288px 171px,268px 201px);
                background-color:#fe6627;                  
            }
        }
        @keyframes a32 {
            0%{}
            50%{
                clip-path: polygon(283px 210px,303px 210px,298px 196px);
                background-color: #4c9b98;
            }
            100% {
                clip-path: polygon(283px 226px ,268px 201px,245px 219px);
                background-color:#f8601f;                   
            }
        }
        @keyframes a33 {
            0%{}
            50%{
                clip-path: polygon(283px 210px,303px 210px,284px 219px);
                background-color: #4c9b98;
            }
            100% {
                clip-path: polygon(283px 226px ,245px 219px,204px 229px);
                background-color:#f76029;                      
            }
        }
        @keyframes a34 {
            0%{}
            50%{
                clip-path: polygon(296px 226px,303px 210px,284px 219px);
                background-color: #58aba1;
            }
            100% {
                clip-path: polygon(283px 226px ,204px 229px,228px 246px);
                background-color:#f76029;                         
            }
        }
        @keyframes a35 {
            0%{}
            50%{
                clip-path: polygon(296px 226px,293px 250px,284px 219px);
                background-color: #4c9b98;
            }
            100% {
                clip-path: polygon(283px 226px ,256px 254px,228px 246px);
                background-color:#ef5a18;                                               
            }
        }
        @keyframes a36 {
            0%{}
            50%{
                clip-path: polygon(218px 215px,283px 226px,284px 219px);
                background-color: #e5fefa;
            }
            100% {
                clip-path: polygon(283px 226px ,256px 254px,297px 247px);
                background-color:#e54916;                                                  
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="one b1"></div>
        <div class="one b2"></div>
        <div class="one b3"></div>
        <div class="one b4"></div>
        <div class="one b5"></div>
        <div class="one b6"></div>
        <div class="one b7"></div>
        <div class="one b8"></div>
        <div class="one b9"></div>
        <div class="one b10"></div>
        <div class="one b11"></div>
        <div class="one b12"></div>
        <div class="one b13"></div>
        <div class="one b14"></div>
        <div class="one b15"></div>
        <div class="one b16"></div>
        <div class="one b17"></div>
        <div class="one b18"></div>
        <div class="one b19"></div>
        <div class="one b20"></div>
        <div class="one b21"></div>
        <div class="one b22"></div>
        <div class="one b23"></div>
        <div class="one b24"></div>
        <div class="one b25"></div>
        <div class="one b26"></div>
        <div class="one b27"></div>
        <div class="one b28"></div>
        <div class="one b29"></div>
        <div class="one b30"></div>
        <div class="one b31"></div>
        <div class="one b32"></div>
        <div class="one b33"></div>
        <div class="one b34"></div>
        <div class="one b35"></div>
        <div class="one b36"></div>
    </div>
</body>
</html>
拾光漫漫 可否达
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
asp+flash 切图上传 头像上传 图片可视截取上传
11-21
**Flash技术**：Flash是一种用于创建交互式矢量图形、动画、视频和应用程序的多媒体软件平台。在这个案例中，Flash被用作前端界面，提供用户友好的图片截取和预览功能。用户可以选择图片，调整裁剪区域，实时预览...
Unity3D_切图以及序列帧动画
10-28
在Cocos2dx中，对大图的处理已经封装好了一套自己的API，但是在Unity3D中貌似没有类似的API，或者说我没找到。不过这也在情理之中，毕竟Unity3D是做3D的，要切割图片的地方还是很少的。 因为我用Unity3D主要是用于做2D游戏的（PS：很蛋疼吧？我也觉得），所以就不得不考虑切图和播放序列帧这两个在2D上常见的功能了，下面废话不多说。我的任务是把下面这张图切割成16块，并且按照动画的序列播放出来。
切图并动画化
077CYW的博客
07-24 310
切图工具：http://renderhjs.net/shoebox/ 安装完成后，将图片拖拽到此处，save 切割完成 动画化看教程：https://docs.cocos.com/creator/manual/zh/video-tutorial/index.html sample设置为12 第一个动画完成。其他动画类似。 ...
android 自定义ViewGroup和对view进行切图动画实现滑动菜单SlidingMenu
mmdev
10-24 146
示意图就不展示了，和上一节的一样,滑动菜单SlidingMenu效果如何大家都比较熟悉，在这里我简单说明一下用自定义ViewGroup来实现. 实现方法：我们自定义一个ViewGroup实现左右滑动，第一屏隐藏，第二屏显示. 代码如下： package com.jj.sliding_6; import android.content.Context; import androi...
微信小程序动画课程-通过wxss(css)来实现
01-18
讲解微信小程序中如何使用css的动画规则，也就是keyframes规则和animation属性来实现小程序中的相关动画
帧动画图片切割
11-04
在一张大图上切割相同大小的图片，适合所有帧动画图片在一张大图片上切每一张小图片大小相同。
php切图教程,看完你就懂了！超详细解说点9切图的制作方法（内附神器）
weixin_35780601的博客
03-28 395
厂哥有话说：点九图，是Android开发中用到的一种特殊格式的图片，文件名以”.9.png“结尾。这种图片能告诉程序，图像哪一部分可以被拉升，哪一部分不能被拉升需要保持原有比列。运用点九图可以保证图片在不模糊变形的前提下做到自适应。点九图常用于对话框背景图片中。之前，点9图的出现是安卓机为了适配不同的手机分辨率的解决方案。点9图(.9.png)是用于Android开发的一种特殊的图片格式，它的好处...
移动端专题切图
04-25
切图，简单来说，就是将设计师完成的图形界面设计稿按照网页或应用的布局结构，精确地切割成一个个可编程的图片或者元素，以便于前端开发者在HTML5、CSS3和JavaScript等技术中进行实现。这个过程对于确保网页在不同...
flash3d切图效果源码
10-16
Flash是一种广泛用于创建动态内容、交互式动画以及丰富的互联网应用的技术，尤其在早期互联网时代，Flash是实现动态图形和游戏的主要工具。源码则是开发者用来查看和修改程序内部结构的原始代码，对于学习和理解特定...
星空引导页html源码+PSD源码.zip
11-10
同时，CSS会应用于这些图像，实现如阴影、圆角、过渡和动画等效果。 对于初学者来说，研究这个星空引导页的源码可以深入了解网页布局的技巧，学习如何利用HTML和CSS创建动态效果，以及如何从PSD到HTML进行有效的...
WPF实现类似360安全卫士界面的程序源码分享
09-03
4. **动画和转换**： - 动画是WPF中的一大亮点，它让界面具有生动感。`ScaleTransform`用于缩放元素，`ThicknessAnimation`则可以改变元素的边距，而`DoubleAnimation`可以调整元素的不透明度。这些工具结合使用，...
丧心病狂的动画效果
切图仔
08-15 334
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; html, body { wi
@keyframes实现页面动画效果
wqy18378671261的博客
06-13 1042
CSS3动画本质上是增强的过渡。 CSS3动画基于关键帧，动画的定义分两部分定义的。 （1）使用 @keyframes 规则创建一个动画，用于定义应用动画的属性； （2）在样式声明时，使用 animation 及其相关属性调用关键帧以实现动画。 使用@keyframes规则创建动画的语法格式： 语法格式1： /*指定关键帧组的名字以方便后面调用*/ @keyframes 关键帧组名{ /*初始效果*/ from{起始样式属性值 } /*结束状态*/ to{ 结束样式属性值 } } 语法格式
切图常用样式
XUYIGE的博客
05-21 241
1、 vertical-align: middle; 把此元素位置放在父元素中部 2、元素前加一个块级元素： .class::befoer{ content:""; display: inline-block; width:10px; height:10px; } 3、旋转、过渡： -webkit-transform: translateX(-50%) scale(0); -moz-transform: translateX(-50%) scale(0)
CSS3_动画和绘制特殊图形
LiLi的博客
07-26 514
CSS3 CSS3是CSS（层叠样式表）技术的升级版本。CSS3完全向后兼容，不必改变现有的设计，浏览器将永远支持CSS2。W3C的CSS3规范仍在开发。但是，许多新的CSS3属性已在现代浏览器使用。 圆角border-radius 语法 border-radius：value；四个角 border-radius：value value；左上右下、右上左下 border-radius：value value value value； 代表设置对象左上角、右上角、右下角、左下角 顺时针设置 盒阴影box-
html--图片变化
2301_81140745的博客
07-20 413
2.点击上传图片会有变化。
黑马JavaWeb企业级开发（知识清单）01——前端介绍，HTML实现标题：排版
最新发布
apple_68589597的博客
07-21 665
本篇文章是2023年最新黑马JavaWeb企业级开发（知识清单）01：前端介绍、html实现标题格式内容的总结，帮助需要学习Web开发的朋友温故而知新。
uniapp搜索框切图怎么实现
05-05
在 uniapp 中实现一个搜索框的切图可以按照以下步骤进行： 1. 在页面中添加一个输入框和一个搜索按钮，可以使用 uniapp 提供的 `<input>` 和 `<button>` 标签。例如： ```html <view class="search-container"> <input type="text" placeholder="请输入关键字" class="search-input" /> <button type="button" class="search-btn">搜索</button> </view> ``` 2. 根据设计稿的要求，设置输入框和搜索按钮的样式，例如： ```css .search-container { display: flex; align-items: center; padding: 10px; background-color: #f5f5f5; } .search-input { flex: 1; height: 30px; border: none; outline: none; background-color: #fff; border-radius: 5px; padding: 0 10px; font-size: 14px; } .search-btn { width: 60px; height: 30px; margin-left: 10px; background-color: #409eff; color: #fff; border: none; border-radius: 5px; font-size: 14px; } ``` 3. 在页面的 `script` 中添加搜索功能，例如： ```javascript export default { data() { return { keyword: '' } }, methods: { search() { // 执行搜索操作，如跳转到搜索结果页面等 console.log('搜索关键字：' + this.keyword) } } } ``` 4. 将输入框和按钮与 `data` 中的 `keyword` 绑定，以便获取用户输入的关键字。例如： ```html <input type="text" placeholder="请输入关键字" class="search-input" v-model="keyword" /> <button type="button" class="search-btn" @click="search">搜索</button> ``` 这样，在用户输入关键字后，点击搜索按钮即可触发 `search` 方法，执行搜索操作。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值