HTML5笔记day09

最新推荐文章于 2024-05-13 11:57:37 发布

晚i风

最新推荐文章于 2024-05-13 11:57:37 发布

阅读量98

点赞数

本文链接：https://blog.csdn.net/qq_36836332/article/details/81545718

版权

1.动画
   1)animation
       1.动画帧定义：
           @keyframes name{
               from{

}
to{

               }
           }
           @keyframes name{
               0%{

               }
               100%{

               }
           }
       2.动画配置
           animation-name:动画名
           animation-duration:动画总时长
           animation-delay:延迟时间
           animation-fill-mode:填充模式
               -forwards动画结束后的收场动作
               -baackwards动画开始前准备动作
               -both两者同时设置
           animation-timing-function:
               -linnear
               -ease
               -ease-in
               -ease-out
               -ease-in-out
   2)transition过渡
       transition:属性/动画持续时间/延迟/时间曲线

       transition-property
       transition-duration
       transition-

   3)transform变形
   transition-
       1.rotate()
           单位为度数deg
           rotateZ()
           rotateX()
           rotateY()
       2.scale()
           参数为一个值，等比例缩放参数为两个值（x,y）
       3.skew()
           skewX
       4.translate()
2.媒体查询
   *相应式布局（newbalance、汇智网）
   0)屏幕的划分标准：
       手机       width<768px
       pad       768px<width<1024px
       pc       width>1024px

   1）用户终端标准不一
       电脑 pad 手机
       为电脑用户提供一套网页
       为pad用户提供一套网页
       为手机用户提供一套网页
       1.提供三套网站（大网站）
       2.提供一套响应式网站（小网站）
   2）媒体查询
       1.媒体联系
           TV
           screen
           color
           ...
       2.媒体属性
           width/height    视口宽高
           device-width/device-height 设备宽高
           orientation
           ...
       3.逻辑运算符
           and
           ,
           ...only/not
   3)如何运用
       1.在导入css时运用媒体查询
           <link rel="stylesheet" href="phone.css" media="" >
       2.在样式表中应用媒体查询表达式
           <style>
               @media )
           </style>

4.补充
   bootcdn
   1)字体图标库
       font-awesome
       iconfont
   2）动画库
       animate.css
       keyframes(导入应用)
   3)响应式布局，栅格系统（网格布局）
       bootstrap

       1.全局样式
       2.组件
       3.js插件

3.兼容性问题