HTML5 知识点（第一节）

页面美化和页面特效

图片边框
过渡
动画
平移、缩放、旋转、倾斜

综合样例

图片边框
语法：border-image: border-image-source border-image-slice border border-image-width border-image-repeat；

属性

<style type="text/css">border-image-source:路径border-image-slice:图片切割位置border-image-width: 边框宽度border-image-repeat: 排列方式 （常用取值如下）space:在不切断图片的情况下，平铺图片并保留一定间距填满整个空间repeat:平铺切分图填满整个空间stretch:拉伸切分图填满整个空间（默认值）round:平铺并拉伸填满整个空间，不切割图片</style>

过渡

   1. 过渡属性
<style type="text/css">body:hover{transition-delay: ;  过渡开始前的延迟（延迟）transition-duration: ; 过渡持续时间（时间）transition-property: ; 应用过渡的属性（样式）transition-timing-function: ; 过渡期间计算中间值（速度曲线）transform: ; 过渡的简写}
</style>

2. 过渡速度值

<style type="text/css">body:hover{transition-timing-function: ;常用属性值ease:慢速开始，接着加速，然后慢速结束（默认值）linear:相同速度开始到结束ease-in:慢速开始ease-out:慢速结束ease-in-out:慢速开始，慢速结束}
</style>

动画
1. 语法

<style type="text/css">@keyframes name{from{起始样式}to{结束样式}}
或@keyframes name{0%{样式}50%{样式}100%{样式}}标签名：动作{animation:关键帧名 持续时间 动画速度 延迟时间 播放次数 ;}
</style>

2. 动画属性

<style type="text/css">animation-delay: ;  开始前延迟时间animation-direction: ; 循环播放时间和是否反向播放 取值：normal 或 alternateanimation-duration: ;  动画播放的持续时间animation-iteration-count: ; 动画播放次数 取值：infinite 或 数值animation-name: ; 动画名称animation-play-state: ; 允许动画暂停和重新播放 取值：running 或 pausedanimation-timing-function: ; 动画期间计算中间值的方式，确定动画播放速度的变化</style>

平移、缩放、旋转、倾斜
1.变换属性

2. transform的属性值

3. transform- origin属性的值

4. CSS3中的角度单位

综合样例

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title></title>    <style type="text/css">*{margin: 0;padding:0;}.D1{text-align: center;font-family: "agency fb";color:  #FFFAF0;width: 800px;background:orange;margin: 10px auto 10px auto;}.D2{text-align: center;width: 800px;list-style: none;overflow: hidden;margin: 0px auto 10px auto;background:  orange;}.D3{color:black ;letter-spacing: 1px;text-align: center;  height: 45px;width: 800px;line-height: 45px;margin: 0px auto 10px auto;background:  #FFE4C4;}.D4{color: black;height: 330px;font-family: "agency fb";line-height: 35px;width: 800px;background: #FFE4C4 ;letter-spacing: 1px;text-align: center; margin: 0px auto 10px auto;}.D5{margin: 0 auto 10px auto;width:800px;overflow: hidden;}.D6{height:80px;width: 800px;background:  orange;}.D2 li{float: left;width:25%;}  .D2 a{padding: 5px 0px;width: 100%;height: 30px;font-family: "agency fb";line-height: 30px;text-align: center;text-decoration: none;display: block;color:  #FFFAF0;}.D2 a:hover{                    background: #c00;}.D5 img {width:196px;}.D6 p{font-family: "agency fb";font-size: 20px;color: white;height: 73px;line-height:73px;text-align: center;}  </style></head>
<body>
<h1 class="D1">TFBOYS</h1>
<ul class="D2">    <li><a href="https://baike.baidu.com/item/TFBOYS/9083733?fr=aladdin">全员介绍</a></li><li><a href="https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gb18030&word=tfboys%D5%D5%C6%AC%B4%F3%C8%AB%D7%EE%D0%C22020&fr=ala&ala=1&alatpl=normal&pos=0&dyTabStr=MCwzLDIsNCwxLDYsNSw4LDcsOQ%3D%3D">全员照片</a></li><li><a href="https://www.9ku.com/geshou/47135.htm">全员歌曲</a></li><li><a href="https://www.baidu.com/sf/vsearch?pd=video&wd=TFBOYS%E5%8F%82%E5%8A%A0%E7%9A%84%E6%89%80%E6%9C%89%E7%BB%BC%E8%89%BA&tn=vsearch&lid=a2a4f978000e7ae8&ie=utf-8&rsv_pq=a2a4f978000e7ae8&rsv_spt=5&rsv_bp=1&f=8&atn=index">全员综艺</a></li></ul>
<p class="D3">故事《TF》  讲述了三个小孩出道的故事和经历。</p>
<p class="D4">人人都很羡慕TFBOYS的三小只年纪轻轻就能有现在的社会地位，能够<br />给家里带来很大的利益而我们还在接受这家长的资金支持，他们登上了<br />国际的舞台王俊凯在服装走秀中表现良好和外国多位知名男模特不相上<br />下，王源，易烊千玺更是以一口流利的中文让老外目瞪口呆，他们代表<br />着我们国家新一代青年的风采面貌。但是在这风光的背后他们又承受着<br />怎样的不为人知的心酸呢？台上一分钟，台下十年功。这句话说得一点<br />也不假，我们只看到了他们在舞台上的风光，却忽略了他们在台下的努<br />力与汗水，这些比我们普通人付出的要多很多。“天将降大任于斯人也，<br />必先苦其心志，劳其筋骨，饿其体肤······”
<div class="D5"><div><img style="height: 130px;" src="6.jpeg" ><img src="b-ssl.duitang-1.jpeg" ><img style="height: 130px;" src="4.jpeg" ><img src="5.jpeg" >  </div>    <div class="D6"><p>四叶草在未来唯美盛开,现在只要你做我的花海</p></div></div></body>
</html>

HTML5 知识点（第一节）相关推荐

C语言基础理论中易错易忘易忽略知识点第一节
二进制:Binary 八进制:Octal 十六进制:Hexadecimal 十进制:Decimal 1> ASCII值: 数值小于32 : ...
第一节：别出心裁的HTML5简介
来了来了,总算来了,新一个系列的连载,是:<HTML5开发>.想必部分期待reactjs和nodejs的同学会失望,但是,前端君怎么舍得让你难过.这次选择HTML5,只是顺序的问题.热门的 ...
第一章计算机基础知识第一节,第一章计算机基础知识第一节
第一章计算机基础知识第一节.了解计算机尊敬的各位评委老师: 大家好!我今天说课的题目是<了解计算机>.我将从以下五方面来谈谈对这节课的设计:即说教材.学情分析.说教法和学法.说教学过程 ...
思维导图下载注册安全_2019安全工程师《建筑实务》第二章第一节考点：物料提升机思维导图...
2019安全工程师<安全生产专业实务-建筑施工安全>第二章第一节考点:物料提升机思维导图,本节的大部分知识点前两节塔式起重机和施工升降机相似,大家可以对比之前考点的思维导图来理解记忆,本知 ...
android 教程概要,Android精通教程-第一节Android入门简介
前言大家好,我是 Vic,今天给大家带来Android精通教程-第一节Android入门简介的概述,希望你们喜欢每日一句 If life were predictable it would cea ...
Kotlin学习笔记第二章类与对象第一节类与继承(补)
参考链接 Kotlin官方文档 Kotlin docs | Kotlin 本系列为参考Kotlin中文文档 kotlin官方文档2020版.pdf-其它文档类资源-CSDN下载第二章第一节类与继 ...
数据结构第一节课感受
在第一节课中,老师让同学朗读重点自然段并让同学提出问题进行解答,在过程中我们能够很好的集中精神吸收知识也了解到了很多老师的学习方法,为数据结构的学习打下很好的基础. 在阅读完绪论之后,我对知识点做了以 ...
第一节计算机课开场白,第一节课有趣的开场白
我是一名新老师,请问第一堂课的开场白怎么讲我:上课学生:起立我:同学们好学生:老师好我:请坐我:很高兴见到大家. 我是你们的英语(或其他的学科)老师我叫* 老师有一个小小的请求. 大家一 ...
第一节：基础概念介绍（黄老师）
最近偶然在网上看到韦东山老师的课程--7天物联网智能家居实战训练,常常在关于Linux学习或者嵌入式学习的文章中看到韦东山老师的名字,但是还从来没有实际听过,因为大家都说要先从51,再过渡到STM32 ...

HTML5 知识点（第一节）

页面美化和页面特效

HTML5 知识点（第一节）相关推荐

最新文章

热门文章