HTML5+CCS3


新增语义化标签

  • header 头部标签
  • nav 导航标签
  • article 内容标签
  • section 块级标签
  • aside 侧标栏标签
  • footer 尾部标签

*pc端存在兼容问题,HTML5主要应用在移动端

H5新增多媒体标签

  • 音频 <audio
    • 音频格式 ogg,MPEG 3,wav
    • 常见属性:controls, autoplay,loop,src
  • 视频 <video
    • 视频格式 ogg, MPEG 4,web
    • 在谷歌浏览器中添加静音属性来自动播放

新增表单标签

  • input
    • email,url,date,time,month,week,number,tel,search,color
  • 属性
    • ==placeholder==,占位符
    • autofocus,自动聚焦,鼠标定位到输入框
    • ==multiple==,多分件提交
    • autocomplete,保留输入历史纪录

CCS3

CCS3属性选择器

  • E[attr] 选择具有att属性的E元素
    • button[disable] 选择的既有button属性又有disable属性
  • ==类选择器、属性选择器、伪类选择器权重为10==
  • E[att=”val”] 选择具有att属性,且属性值等于val的E元素
  • E[att^=”val”] 选择具有att属性,且属性值以val开头的E元素
  • E[att$=”val”] 选择具有att属性,且属性值以val结尾的E元素
  • E[att*=”val”] 选择具有att属性,且属性值中含有val的E元素

CCS3结构伪类选择器

  • E:first-child 匹配父元素中的第一个子元素E
  • E:nth-child(n) 匹配父元素中的第n个子元素E
    • ==n可以是数字、关键字或者公式==
    • 常见关键字 even偶数,odd奇数
    • 如果n是公式,则从零开始计算

CCS 3伪元素选择器(两个冒号)

  • ::before(清除浮动)在元素内部前面插入内容
  • ::after 在元素内部后面插入内容
    • before和after必须有content属性
    • 创建的元素属于行内元素
    • 在dom看不见创建的元素,所以被称作伪元素
    • ==伪元素和标签选择器一样,权重为1==

CCS3 2D转换

2D转换之移动

  • transform:translate(x,y) 参数可以是像素值,也可以是百分比,如果里面的参数是%,移动的距离是盒子自身的宽度或者高度
  • ==之前使用position定位时,用margin-top居中,在CCS3中可以直接使用top和translate(-50%,50%)组合==

2D转换之旋转

  • transform:routate(n==deg==)
  • 案列:鼠标悬浮图片旋转,在hover中写旋转,在本身写过渡 ==过渡写在本身上,谁做动画给谁加==
  • 案例:三角形,保留盒子的两条边,再将盒子旋转

2D转换中心点

  • transform-origion:x y;
    • x y默认转换的中心点是元素的中心点
    • 还可以设置像素或者方位名词(top,bottom等)
  • 案例:旋转(鼠标悬浮,切换盒子)

2D转换之缩放

  • transform:scale(x,y) 里面的数字是倍数的意思
    • 直接修改高度和宽度,==会影响其他盒子==
    • scale能设置缩放中心点,向四周扩散
  • 案例:图片放大(鼠标悬浮,图片放大)
  • 案列:分页按钮

2D转换综合写法

  • 同时使用多个转换,其格式为transform:translate() rotate() scale()
  • 其顺序会影响转换的效果(先旋转会改变坐标轴方向)
  • ==当我们同时有位移和其他属性时,位移放在最前面==

CCS3动画

相比于过渡,动画可以实现更多变化,更多控制,连续播放等效果

  • from和to等价于 0%和100%

    @keyframe 动画名称 { 
        0% { 表示第0帧
            
        }
        100% {
            
        }
    }
  • animation 属性

    • animation-name 动画名称
    • animation-duration 完成时间
  • animation 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态

  • 运动曲线细节

    • linear 动画从头到尾运动的速度是相同的
    • ease 动画开始慢,中间快,后来慢
    • step(s) 指定动画分几步完成
  • 案例 hotmap


    <style>
        body {
            background-color: #333;
        }
        .map {
            position: relative;
            width: 747px;
            height: 616px;
            background: url(./img/map.png) no-repeat;

            margin: 0 auto;
        }
        .city {
            position: absolute;
            top: 226px;
            right: 193px;
            color: #fff;
        }
        .dotted {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #9ff;
        }
        .city div[class^="pop"] {
            /* 保证我们小波纹在父盒子里面水平垂直居中 放大之后就会中心向四周发散 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            box-shadow: 0 0 12px #9f9ffd;
            border-radius: 50%;
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
            /* animation: pop 1.5s linear infinite; */
        }
        .city div.pop2 {
            animation-delay: 0.4s;
        }
        
        .city div.pop3 {
            animation-delay: 0.8s;
        }
        
        @keyframes pop{
            0% {

            }
            70% {
                width: 40px;
                height: 40px;
                opacity: 1;
            }
            100% {
                width: 70px;
                height: 70px;
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <div class="map">
        <div class="city">
            <div class="dotted"></div>
            <div class="pop1"></div>
            <div class="pop2"></div>
            <div class="pop3"></div>
        </div>
    </div>

CCS3 3D转换

  • 特点:近大远小

  • 3D位移: translate3d(x,y,z)

    • translateZ沿着Z轴移动,单位为px
  • 3D旋转: rotate3d(x,y,z)

  • 透视: perspective

    • ==透视写在被观察元素的父盒子上面==
    • d表示眼睛距离屏幕的距离,z表示物体距离屏幕的距离
  • 3D呈现 transform-style

    • 控制子元素以3D空间显示
    • transform-style:preserve-3d
  • 案例:两面翻转的盒子

    • box为翻转的盒子,front为前面的盒子,back为后面的盒子。

    • ccs样式

      • box指定大小,切记要添加3D呈现
      • back盒子要沿着y轴翻转180deg
      • 最后鼠标经过,box沿着y轴旋转180deg
      <div class="box">
          <div class="front"></div>
          <div class="back"></div>
      </div>
  • 案例:3D导航栏

  • 案例:旋转木马


文章作者: linxueya
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 linxueya !
评论
  目录
喜迎
春节