前端学习笔记7：响应式布局和简单动画效果

一、响应式布局

当我们在利用浏览器的放大缩小的时候，经常会面临一些问题就是如何将浏览器中的内容缩放到我们适合观看的程度，这时候我们就引入一个概念叫做响应式布局（Responsive layout）。它的存在解决了很多浏览器在不同场景下浏览大小规模问题，增加用户的体验。同样，在移动互联网上的响应式布局也能够作用于手机端，增加手机的浏览体验。

@media screen：css3加入一个响应式布局的媒体屏幕的自动调整，实现了响应式布局结构。

<head>


<meta name="viweport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"/>
<title>针对浏览器</title>
<style>
   #container{
       text-align:center;
       margin:auto;
       width:750;
   }
   #container>div{
       border:1px solid #aaf;
       text-align:left;
       box-sizing:border-box;
       border-radius:12px 12px 0px 0px;
       padding:5px;
   }
   div#left{
       width:300px;
       height:260px;
       float:left;
       /*让该元素的右边*/
   }
   div#main{
       width:450px;
       height:260px;
       float:left;
       /*让该元素原始*/
       clear:right;
   }
   div#right{
       width:750px;
       float:left;
   }
   @media screen and (min-width:1000px){

   #container{
       text-align:center;
       margin:auto;
       width:960;
   }
   #container>div{
       border:1px solid #aaf;
       box-sizing:border-box;
       border-radius:12px 12px 0px 0px;
       padding:5px;
   }
   div#left{
       width:240px;
       height:260px;
       float:left;
       /*让该元素的右边*/
   }

div#main{
       width:450px;
       height:260px;
       float:left;
       /*让该元素原始*/
       clear:none;
   }
       div#right{
       width:260px;
       float:left;
       height:260px;
   }
   }
   @media screen and (max-width:480px){
       #container{
           text-align:center;
           margin:auto;
           width:450px;
       }
       #container>div{
           border:1px solid #aaf;
           /* 设置HTML大小框*/
           box-sizing:border-box;
           border-radius:12px 12px 0px 0px ;
           padding:5px;
       }
       div#left{
           width:450px;
           float:left;
       }
       div#main{
           width:450px;
           height:260px;
           float:left;
           /*让该元素原始*/
           clear:both;
   }
       div#right{
       width:450px;
       float:left;
       height:170px;
   }

   }

</style>
</head>
<body>

<div id="container">
<div id="left">
<h2>开班信息</h2>
C++难,原因,具有C语言底层特性,具有面向对象语言的抽象特性,因此同时具备
了底层和抽象的两个复杂维度,最终造成复杂度成倍提升.C++的复杂设计导致编程过
程中有许多陷阱和晦涩的含义,许多经验丰富的C++程序员也无法解决一些调试问题.
最致MFC发展也不大了.

</div>
<div id="main">
<h2>疯狂软件介绍</h2>
C++由于语言本身过度复杂，这甚至使人类难于理解其语义。
更为糟糕的是C++的编译系统受到C++的复杂性的影响，非常难
于编写，即使能够使用的编译器也存在了大量的问题，这些问题大多难
于被发现。
</div>
<div id="right">
<h2>公司动态</h2>
雷蒙德是自由党的成员。他是枪支权利倡导者。他赞同开源枪支组性的，而不是种
族主义。“ 渐进式竞选大石板成功地为候选人筹集资金，部分原因是要求科技工作
者提供捐款，以换取雷蒙德不发布类似的报价。
</div>
</div>
</body>
<script>
   alert(document.body.clientWidth);
</script>

二、css3中简单的动画效果

css3真是前端的一大新革命！博主如是道。= =

@keyframe规则：css3中引入动画的效果，利用keyframe规则可以实现多类动画的前端制作，可以让动画动起来噢~。

linear线性速度

<head>
<meta charset="utf-8">
<style>
   1div{
       width:400px;
       height:50px;
       border:1px solid black;
       background-color:red;
       padding:20px;
       transition:background-color 1s linear;

   }
   div{
       background-color:#f1f1f1;
       boreder:1px solid black;

       left:100px;
       width:60px;
       height:60px;
   }
   div:hover{
       background-color:rgba(241,23,41,0.6);
       display:block;
       animation-name:fkjava;
       animation-duration:5s;
       animation-iteration-count:1;
   }
   img#target{
       position:absolute;
       transition:left 1s linear ,top 1s linear;

   }
   #target:hover{
       transform:rotate(5deg);


   }
   @keyframes fkjava{
       /*定义动画开始处的关键帧 */
       0%{    top:101px;}
       20%{    transform:rotate(30deg) scale(1);}
       30%{    left:301px;}
       40%{    top:301px;}
       50%{   right:200px;}
       60%{   top:251px;}
       80%{ left:400px; }
       100%{   top:400px;}
   }
</style>
</head>
<body>


<hr>

<div>鼠标悬停、开始动画</div>
</body>
<script>
   var target = document.getElementById("target");
   target.style.left = "0px";
   target.style.top = "0px";
   document.onmousedown = function(evt)
   {
       //将鼠标事件XY坐标赋给气球图片的left、top
       target.style.left = evt.pageX + "px";
       target.style.top = evt.pageY + "px";

   }
   //事件2
   var originWidth = 200;
   var originHeight = 160;
   var zoom = function(scale,bgColor){
       var target1 = document.getElementById("target1");
       //设置缩放高宽
       target1.style.width = originWidth *scale + "px" ;
       target1.style.height = originHeight *scale + "px" ;
       target1.style.backgroundColor = bgColor;
   }

</script>

其中利用css中的transform的属性可以达到一些转换效果，如上例旋转、平移等等。

鱼眼动画效果*

此类动画效果可以在前端的美观设计上更添一筹。

<head>
<meta name="author">
<meta charset="utf-8">
<style>
   a:link{
       text-decoration:none;
   }

div>a{
       display:inline-block;
       text-align:center;
       width:120px;
       pdding:8px;
       background-color:#eee;
       border:2px solid black;border-radius:20px;
       position:absolute;
       }
   @keyframes fisheye{
       0%{
           transform:scale(1);
           background-color:#eee;
           border-radius:10px;
       }
       40%{
           transform:scale(1.5);
           background-color:red;
           border-radius:10px;
       }
       100%{
           transform:scale(1.5);
           background-color: white;
           border-radius:10px;
       }
       }
       div>a:hover{
           animation-name:fisheye ;
           animation-duration:3s;
           animation-iteration-count:infinite;

}
       @keyframes fkjava{
       /*定义动画开始处的关键帧 */
       0%{    top:101px;}
       20%{    transform:rotate(30deg) scale(1);}
       30%{    left:301px;}
       40%{    top:301px;}
       50%{   right:200px;}
       60%{   top:251px;}
       80%{ left:400px; }
       100%{   top:400px;}
   }
</style>
</head>
<body>
<div>
   <a id="div" href="http://baidu/com" alt="1">aaaa</a>

</div>
</body>
<script>
   var a=document.getElementById("#div");
       when("a.style.hover"==){

}
</script>

前端学习笔记7：响应式布局和简单动画效果相关推荐

前端学习day28：响应式布局、阿里图标等
1. 阿里图标使用场景及原理原理:将小图标定义成字体,通过引入字体来展示这些小图标.因为此时的小图标相当于是一个文字,所以支持文字对应的所有样式. 使用步骤 1.打开阿里图标官网(https:// ...
前端学习笔记之流式布局（百分比布局） 3.24
1 流式布局(百分比布局)概念流式布局,就是百分比布局,也称非固定像素布局. 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充. 流式布局方式是移动web开发 ...
Henry前端笔记之响应式布局与弹性布局
Henry前端笔记之响应式布局与弹性布局弹性布局 Rem布局的原理解析(em 与 rem区别 ): rem如何实现自适应布局使用CSS3 REM 和 VW 打造等比例响应式页面的便捷工作流从网易 ...
【Vue3】学习笔记-reactive响应式
[Vue3]学习笔记-reactive响应式用ref 设置响应式对象用reactive 设置响应式对象总结用ref 设置响应式对象 JS中设置对象 import { ref } from &q ...
html响应式布局教程,css3 media 响应式布局的简单实例
html> /* 小于200px*/ @media (min-width:200px ) and (max-width:500px ) { #p{ background: red; } } ...
响应式布局的简单案例演示
这篇文章是一个响应式布局的案例演示效果:最初是4部分都在一行显示,当满足最大宽度为700px时,只有两部分在一行显示,当最大宽度为360时,一行只显示一部分,代码如下 : 1. 结构代码 <d ...
移动Web开发--学习笔记三响应式项目实战（微金所）
响应式项目实战(微金所) 响应式项目开发流程选择一种屏幕格式进行开发相应功能模块完成后,测试是否响应式效果确保响应式效果满足要求进行下一个功能模块开发使用自定义字体图标创建自己的字体图标h ...
前端学习笔记之CSS网页布局
CSS网页布局阅读目录一网页布局方式二标准流三浮动流四定位流一网页布局方式 #1.什么是网页布局方式布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如wor ...
bootstrap table border粗细_Web前端开发(18)——Bootstrap响应式布局
使用步骤 ①下载Bootstrap 进入Bootstrap中文网(https://www.bootcss.com/)可以直接下载Bootstrap代码以及使用文档. ②将代码复制项目中下载下来之后会 ...

前端学习笔记7：响应式布局和简单动画效果

一、响应式布局

二、css3中简单的动画效果

鱼眼动画效果*

前端学习笔记7：响应式布局和简单动画效果相关推荐

最新文章

热门文章