19-CSS3特效案例

白色玫瑰 程序猿

时间: 2023-07-15 阅读: 1 字数:5745

动画
{}
、\n\n\n\n多组动画\n\n\n\n\nhtml lang=\en\>\nhead>\n meta charset=\UTF-8\>\n title>Documenttitle>\n style>\n div{\n width: 200px;\n height: 200px;\n background-color: pink;\n animation: go 2s ;/*定义动画

目录

、

多组动画

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
   div{
   width: 200px;
   height: 200px;
   background-color: pink;
   animation: go 2s ;/*定义动画  在下面要定义一个动画*/
   /*animation:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;*/
   /*动画名称是自己定义的 go google*/
   /*infinite 无限循环*/
   /*一般情况下，我们就用前2个 animation: go 2s*/
      }

   @keyframes go{
   0% /*起始位置 相当于from*/{
      transform: translate3d(0,0,0);
   }
   25%{
      transform: translate3d(800px,0,0);
   }
   50%{
      transform: translate3d(800px,400px,0);
   }
   75%{
      transform: translate3d(0,400px,0);
   }
   100% /*结束位置 相当于to*/{
       transform: translate3d(0,0 ,0);
   }
   }

   </style>
</head>
<body>
   <div></div>
</body>
</html>

奔跑的小车

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
   div{
   width: 200px;
   height: 200px;
   background:url(imgc/car.jpg) no-repeat;
   background-size: 200px;
   animation: car 5s ;*//*定义动画  在下面要定义一个动画
   /*animation:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;*/
   /*动画名称是自己定义的 go google*/
   /*infinite 无限循环*/
   /*一般情况下，我们就用前2个 animation: go 2s*/
      }

   @keyframes car{
   0%{
     transform:: translate3d(0,0,0);
   }
   50%{
     transform: translate3d(1000px,0,0);
   }
   51%{/*车要掉头*/
      transform: translate3d(1000px,0,0)  rotateY(180deg);
      /*如果有多组变形 我们用空格隔开就好了*/

   }

   100%{
      transform: translate3d(0,0,0) rotateY(180deg);
   }

   }

   </style>
</head>
<body>
    <div>

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

无缝连接

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
   *{
      margin: 0px;
      padding: 0px;
   }
   ul{
      list-style: none;
   }
   nav{
      width: 882px;
      height: 86px;
      border: 1px solid #ccc;
      margin:100px auto;
      overflow: hidden;/*多出的部分隐藏*/
   }
   ul li{
      float: left;
   }
    nav ul{
      width: 200%;/*父亲的宽度两倍*/
      animation: moveing 5s linear infinite; /*引用动画 无限循环 匀速运动*/
    }
    /*定义动画*/
    @keyframes moveing{
      from{
          transform: translateX(0);
      }
      to{
         transform: translateX(-882px);
      }
    }
    nav:hover ul{
      animation-play-state: paused;/*鼠标放上暂停动画*/
    }
   </style>
</head>
<body>
   <nav>
   <ul>
      <li>![](imgc/nav1.jpg)</li>
      <li>![](imgc/nav2.jpg)</li>
      <li>![](imgc/nav3.jpg)</li>
      <li>![](imgc/nav4.jpg)</li>
      <li>![](imgc/nav5.jpg)</li>
      <li>![](imgc/nav6.jpg)</li>
      <li>![](imgc/nav7.jpg)</li>
      <!-- 为了无缝连接 -->
      <li>![](imgc/nav1.jpg)</li>
      <li>![](imgc/nav2.jpg)</li>
      <li>![](imgc/nav3.jpg)</li>
      <li>![](imgc/nav4.jpg)</li>
      <li>![](imgc/nav5.jpg)</li>
      <li>![](imgc/nav6.jpg)</li>
      <li>![](imgc/nav7.jpg)</li>
   </ul>
   </nav>
</body>
</html>

伸缩布局 flex

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
   /*以前的做法*/
   /*section{*/
      /*width: 80%;可以跟随浏览器的大小缩放*/
      /*height: 200px;*/
      /*border: 1px solid #ccc;*/
      /*margin:100px auto;*/
   /*}*/
   /*section div{*/
      /*width: 33.33%;*/
      /*height: 100%;*/
      /*float: left;*/
   /*}*/
   /*section div:first-child{*/
      /*background-color: pink;*/
   /*}*/
     /*section div:last-child{*/
      /*background-color: pink;*/
   /*}*/
   section{
      width: 80%;/*可以跟随浏览器的大小缩放*/
      height: 200px;
      border: 1px solid #ccc;
      margin:100px auto;
      /*父盒子 添加flex属性*/
      display: flex;/*伸缩布局模式*/
     flex-direction: row;/*横向排列 column 可以水平也可以垂直 还有row-reverse column-reverse*/
      min-width: 280px;/*最小宽度不小于280*/
      max-width: 1280px;
  }
  section div{
   height: 100%;
   /*flex: 1;给子盒子每一个添加份数*/

  }
   section div:first-child{
      background-color: pink;
      flex: 1;
     /*width:300px; 固定宽度  这个就是300不变 她不能伸缩了*/
   }
     section div:nth-child(2){
      background-color: #ccc;
      margin: 0 5px;
      flex: 2;/*第一个盒子固定宽度 然后剩下了的宽度2和3分*/
   }
    section div:last-child{
      background-color: pink;
      flex: 1;/*第一个盒子固定宽度 然后剩下了的宽度2和3分*/
   }
   </style>
</head>
<body>
<section>
  <div></div>
  <div></div>
  <div></div>
</section>  
</body>
</html>

原文地址：https://blog.csdn.net/weixin_38178755/article/details/78796066?ops_request_misc=&request_id=6c19665b5171484fa1ff5cf64d700d68&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-21-78796066-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88

本文章网址:https://www.sjxi.cn/detil/9f3ae24efab14d178b7c9c147237b63d

打赏作者

本站为非盈利网站，如果您喜欢这篇文章，欢迎支持我们继续运营！

最新评论
当前未登陆哦
登陆后才可评论哦

湘ICP备2021009447号

×

(穷逼博主)在线接单

QQ: 1164453243

邮箱: abcdsjx@126.com

前端项目代做
前后端分离
Python 爬虫脚本
Java 后台开发
各种脚本编写
服务器搭建
个人博客搭建
Web 应用开发
Chrome 插件编写
Bug 修复