当前栏目: [前端开发基础]您现在的位置是:成都seo > 前端学习 > 前端开发基础 > 正文

移动web开发第一天,HTML5表单+CSS3动画,新增选择

2020-05-04 23:40前端开发基础 人已围观文章来源:未知文章作者:admin

简介向上复制一行:alt+shift+上 向下复制一行:alt+shift+下 中文简体: chinses 浏览器打开 on in browser 自动格式化 js css htm...

向上复制一行:alt+shift+上
向下复制一行:alt+shift+下
 
中文简体:
 
chinses
 
浏览器打开
 
on in browser
 
自动格式化 js css html 代码
 
JS-CSS-HTML Formateer 
 
自动重命名标签
Auto Rename Tag
 
2.2 HTML5新增标签
 
语义化标签
 
<header>:头部
<nav>:导航
<article>:内容
<section>:块级
<aside>:侧边栏
<footer>:尾部标签
 
多媒体标签
 
音频: 
<audio src="xin.mp3" controls="controls" autoplay="autoplay" loop="loop">
 
属性
autoplay autoplay 自动播放
controls controls 控件
loop loop 循环播放
src url 路径
 
兼容
<audio>
<source src="xin.mp3" type="audio/mpeg">
<source src="xin.ogg" type="audio/ogg">
您的浏览器太LOW了 不支持audio播放
</audio>
 
视频标签
<video src="xin.mp3" controls="controls" autoplay="autoplay" loop="loop"><video>
 
属性
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
muted muted 规定视频的音频输出应该被静音。
poster URL 封面显示图片
preload preload 如果出现该属性,则视频在页面加载时进行加载,并预备播放。
 
如果使用 "autoplay" 则忽略该属性。
 
src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。
 
 
兼容问题
 
1.功能效果
 
自动播放
 
<video autopaly="autoplay" muted="muted"  loop="loop" poster=“xiaomi.jpg”controls > 
<source src="media/video.mp4" type="video/mp4"/>
<source src="media/video.ogg" type="video/ogg"/>
您的浏览器太LOW了 不支持audio播放
</video>
 
------------------------------------
新增表单
<form>
<ul>
    <li>选择你喜欢的颜色: <input type="color" name="favcolor"></li>
    <li>日期: <input type="date" name="bday"></li>
    <li>生日 (月和年): <input type="month" name="bdaymonth"></li>
    <li>数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5"></li>
    <li>Search Google: <input type="search" name="googlesearch"></li>
    <li>电话号码: <input type="tel" name="usrtel"></li>
    <li>选择时间: <input type="time" name="usr_time"></li>
    <li>选择周: <input type="week" name="year_week"></li>
</ul>
 
表单,表单属性
 
</form>
 
 
H5新增表单属性
 
属性 说明
required required 必填
placeholder 文字 默认文字
autofocus autofocus 自动聚焦
autocomplete off/on 默认打开, 提交属性值 加上name属性
multiple multiple 多选文件上传
 
列子
<form action="">
 
    用户名:<input type="text" required="required" placeholder="请输入用户名" autofocus="autofocus" name="username" autocomplete="off">
    <input type="submit" value="提交">
</form>
 
 
-----------------------
CSS3属性选择器
 
属性选择器应用场景
 
1.属性值一样,规定样式一样。
2.以什么值开头,以什么结尾
3.包含属性值
 
类选择器,属性选择器,伪类选择器, 权重10
 
语法:
 
button[属性="值"]
 
 
 
结构伪类选择器  第几个
 
1.第几个
 
 
nth-child  选择是第几个 不管类型
 
 
li:nth-of-type () 满足指定类型元素
 
结构选择器权重 为10
 
伪元素使用:before after
 
权重为1
 
 
CSS 2D转换
 
转换 transform 位移,旋转,缩放
 
移动:translate 不会影响其他盒子
 
旋转: rotate
 
缩放: scale
 
 
盒子实现水平和垂直居中
transform:translateX(50%) :相对自身元素
 
p  {
 
position:absolute;
top:50%;
left:50%;
width:200px;
height:200px;
background-color:purple;
transform:translate(-50%,-50%);
 
行内元素没有效果
 
 
rotate 旋转
 
语法
 
transform:rotate(度数) deg
 
正数为顺时针,负数为逆时针 ,默认为元素中心旋转
 
 
-----------------------------------
 
三角
 
用伪元素写
 
--------------------------
 
设置旋转中心
 
transform-origin
 
语法
 
transform-origin: x y;
 
默认中心点
 
transform-origin: (50% 50%);
 
可以设置像素,可以跟方位名词
 
列子
 
transform-origin: left bottom;
 
transform-origin: 50px 50px;
 
 
div:hover {
transform: rotate(360deg);
}
----------------------------------------------
 
旋转中心案例
 
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            /* position: relative; */
            width: 200px;
            height: 200px;
            border: 1px solid pink;
            margin: 100px auto;
            background: palevioletred;
        }
        
        div::after {
            /* position: absolute; */
            display: block;
            content: "黑马";
            width: 200px;
            height: 200px;
            transform-origin: left bottom;
            /* transform: rotate(225deg); */
            transition: all 0.5s;
        }
        
        div:hover::after {
            transform: rotate(225deg);
        }
        
        div.a {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background: transparent;
            overflow: hidden;
        }
        
        .a::after {
            position: absolute;
            display: block;
            content: "黑马";
            width: 100%;
            height: 100%;
            transform-origin: left bottom;
            transform: rotate(115deg);
            transition: all 0.5s;
            background: rgb(4, 163, 184);
        }
        
        .a:hover::after {
            transform: rotate(0deg);
        }
    </style>
</head>
 
<body>
 
</body>
<div></div>
<div class="a"></div>
 
</html>
 
--------------------------------------------
 
放大,缩小
 
scale
 
语法
 
transform:scale(x,y); x,y 数字  是倍数的意思  
 
transform:scale(2,2); 宽度,高度变为2倍
 
transform:scale(2); 等比缩放
 
小于1 就是缩小
transform:scale(0.3);
 
应用场景  优势
 
以中心点, 不会撑开盒子
------------------------------------------------
 
2D 转换问题
 
动画复合写法
 
动画动作: 移动 ,旋转 ,放大
transform: translate(50px.50px) rotate(180deg) scale(1,2);
 
----------------------------------------------
CSS 动画
 
特点:自动播放
 
1.定义动画
 
@keyframes 定义动画
 
定义动画
 
@keyframes  move{
 
0% {
transform:translateX(0px);
}
100%{
transform:translateX(500px);
}
}
 
 
调用动画
 
调用动画
animation-name: move;
 
持续时间
animation-duration: 2s;
 
2.使用动画
--------------------------------------------
动画序列
 
@keyframes {
form {
transform:translateX(0px);
}
to {
transform:translateX(500px);
}
}
 
 
----------------------------------------
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Tags:

说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!

本栏推荐

标签云

站点信息

  • 文章统计103篇文章
  • 标签管理标签云
  • 微信公众号:扫描二维码,关注我们