web前端学习（三）css学习笔记部分（5）-- CSS动画--页面特效、HTML与CSS3简单页面效果实例
CSS动画--页面特效部分内容目前仅仅观看了解内容,记录简单笔记，之后工作了进行内容的补充
7. CSS动画--页面特效
7.1 2D、3D转换
7.1.1 通过CSS3转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸
转换是使元素改变形状、尺寸和位置的一种效果
可以使用2D、3D来转换元素
7.1.2 2D转换方法
translate()
rotate()
scale()
skew()
matrix()
7.1.3 3D转换方法：
rotateX()
rotateY()
7.2 过渡
1、通过使用CSS3，可以给元素添加一些效果
2、CSS3过渡是元素从一种样式转换成另一种样式
动画效果的CSS
动画执行的时间
3、属性
| 属性 | 描述 |
| transition | 设置四个过渡属性 |
| transition-property | 过渡的名称 |
| transition-duration | 过渡效果花费的时间 |
| transition-timing-function | 过渡效果的时间曲线 |
| transition-delay | 过渡效果开始时间 |
7.3 动画
1、通过CSS额，也可以进行创建动画了
2、CSS3的动画需要遵循@keyframes规则
规定动画的时长
规定动画的名称
7.4 多列
1、在CSS3中，可以创建多列来对文本或者区域进行布局
2、属性：
column-count
column-gap
column-rule
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
column-count: 3;
-webkit-column-count: 3;
-webkit-column-gap: 50px;
/*webkit是给谷歌浏览器老版本兼容用的*/
column-gap: 50px;
column-rule:5px outset #FF0000;
/*out是间隔线的样式*/
}
</style>
</head>
<body>
<div class="div1">
大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。
大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。
大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。
大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。
大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。
大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。
大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。
大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。
大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。
大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。
大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。
大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。
大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。
大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。
大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。
大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。
大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。
大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。
大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。
大家好，欢迎大家学习web前端开发技术，在这里大家将会收获很多东西，学习很多知识。
</div>
</body>
</html>
7.5 瀑布流效果（这里的并不是最好的瀑布流效果设计，这是竖着排顺序的，用了7.4的知识）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流2</title>
<style>
.container{
column-width: 250px;
-webkit-column-width: 250px;
-webkit-column-gap: 5px;
column-gap: 5px;
}
.container div,.container img{
width:250px;
margin:5px 0;
}
.container p{
text-align: center;
} </style>
</head>
<body>
<div class="container">
<div><img src="img/1.jpg" alt=""></div>
<p>这是第1张图片</p>
<div><img src="img/2.jpg" alt=""></div>
<p>这是第2张图片</p>
<div><img src="img/3.jpg" alt=""></div>
<p>这是第3张图片</p>
<div><img src="img/4.jpg" alt=""></div>
<p>这是第4张图片</p>
<div><img src="img/5.jpg" alt=""></div>
<p>这是第5张图片</p>
<div><img src="img/6.jpg" alt=""></div>
<p>这是第6张图片</p>
<div><img src="img/7.jpg" alt=""></div>
<p>这是第7张图片</p>
<div><img src="img/8.jpg" alt=""></div>
<p>这是第8张图片</p>
<div><img src="img/9.jpg" alt=""></div>
<p>这是第9张图片</p>
<div><img src="img/10.jpg" alt=""></div>
<p>这是第10张图片</p>
<div><img src="img/11.jpg" alt=""></div>
<p>这是第11张图片</p>
<div><img src="img/12.jpg" alt=""></div>
<p>这是第12张图片</p>
<div><img src="img/13.jpg" alt=""></div>
<p>这是第13张图片</p>
<div><img src="img/1.jpg" alt=""></div>
<p>这是第14张图片</p>
<div><img src="img/2.jpg" alt=""></div>
<div><img src="img/3.jpg" alt=""></div>
<div><img src="img/4.jpg" alt=""></div>
<div><img src="img/5.jpg" alt=""></div>
<div><img src="img/6.jpg" alt=""></div>
<div><img src="img/7.jpg" alt=""></div>
<div><img src="img/8.jpg" alt=""></div>
<div><img src="img/9.jpg" alt=""></div>
<div><img src="img/10.jpg" alt=""></div>
<div><img src="img/11.jpg" alt=""></div>
<div><img src="img/12.jpg" alt=""></div>
<div><img src="img/13.jpg" alt=""></div>
<div><img src="img/1.jpg" alt=""></div>
<div><img src="img/2.jpg" alt=""></div>
<div><img src="img/3.jpg" alt=""></div>
<div><img src="img/4.jpg" alt=""></div>
<div><img src="img/5.jpg" alt=""></div>
<div><img src="img/6.jpg" alt=""></div>
<div><img src="img/7.jpg" alt=""></div>
<div><img src="img/8.jpg" alt=""></div>
<div><img src="img/9.jpg" alt=""></div>
<div><img src="img/10.jpg" alt=""></div>
<div><img src="img/11.jpg" alt=""></div>
<div><img src="img/12.jpg" alt=""></div>
<div><img src="img/13.jpg" alt=""></div>
<div><img src="img/1.jpg" alt=""></div>
<div><img src="img/2.jpg" alt=""></div>
<div><img src="img/3.jpg" alt=""></div>
<div><img src="img/4.jpg" alt=""></div>
<div><img src="img/5.jpg" alt=""></div>
<div><img src="img/6.jpg" alt=""></div>
<div><img src="img/7.jpg" alt=""></div>
<div><img src="img/8.jpg" alt=""></div>
<div><img src="img/9.jpg" alt=""></div>
<div><img src="img/10.jpg" alt=""></div>
<div><img src="img/11.jpg" alt=""></div>
<div><img src="img/12.jpg" alt=""></div>
<div><img src="img/13.jpg" alt=""></div> </div>
</body>
</html>
8、html与css简单简单页面效果设计
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>极客学院</title>
<style>
*{
margin: 0px;
padding: 0px;
}
body{
background-color: snow;
}
.wrapper{
width: 80%;
height: 1000px;
background-color: antiquewhite;
margin: 0px auto;
}
.heading{
width: 100%;
height: 90px;
background-color: snow;
margin: 0px auto;
}
.heading_title{
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
color: burlywood;
}
.heading_nav{
padding-bottom: 30px;
padding-top: 30px;
width: 100%;
height: 30px;
position: relative;
}
ul{
margin-left: 40px;
float: left;
list-style-type: none;
padding-top: 6px;
padding-bottom: 6px;
}
li{
padding-left: 10px;
display: inline;
}
a:link,a:visited{
font-weight: bold;
color: darkgray;
text-align: center;
padding: 6px;
text-decoration: none;
}
a:hover,a:active{
color: dimgray;
}
.heading_img img{
border-radius: 30px;
display: inline;
width: 26px;
height: 26px;
box-shadow: 0 1px 1px rgba(0,0,0,0.2);
float: right;
}
.heading_soptlight form{
float: right;
width: 100px;
height: 26px;
position: relative;
margin-right: 50px;
}
form input{
height: 26px;
border-radius: 30px;
}
.body{
padding: 30px;
height: auto;
width: auto;
}
.body_title h3{
font-size: 30px;
font-family: Arial, Helvetica, sans-serif;
color: #333333;
}
.body_title p{
margin-top: 20px;
margin-bottom: 20px;
} .footing{
padding-top: 20px;
text-align: center;
font-size: 10px;
color: darkgray;
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="heading">
<div class="heading_nav">
<div class="heading_title">
极客学院
</div>
<div class="heading_navbar">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">职业课程</a></li>
<li><a href="#">技术问答</a></li>
<li><a href="#">VIP会员</a></li>
</ul>
</div>
<div class="heading_img">
<img src="jokul.jpg">
</div>
<div class="heading_soptlight">
<form>
<input type="text">
</form>
</div>
</div>
</div>
<div class="body">
<div class="body_title">
<h3>熟悉极客学院</h3>
<p>加入极客学院，学习最新实战教程，全面提升你的技术能力</p>
</div>
<hr/>
<hr/>
</div>
</div>
<div class="footing">
@极客学院
</div>
</div>
</body>
</html>
web前端学习（三）css学习笔记部分（5）-- CSS动画--页面特效、HTML与CSS3简单页面效果实例的更多相关文章
- Web前端与移动开发学习路线图
文章转载自「开发者圆桌」一个关于开发者入门.进阶.踩坑的微信公众号 这里整理的Web前端与移动开发学习路线图包含初中级两个部分,你可以通过百度云盘下载观看对应的视频 链接: http://pan.ba ...
- 想做web前端project师应该学习些什么？
偶然间看到这篇文章.感觉博主写的挺不错的,假设你想做web前端project师的话,建议您阅读下面这篇文章,事实上web前端project师所做的工作事实上就是站点设计,有些小公司的美工事实上就是做w ...
- 最全的WEB前端开发程序员学习清单
史上最全的WEB前端开发程序员学习清单! 今天为什么要给大家分享这篇文章呢,我发现最近来学前端的特别多,群里面整天都有人问:前端好找工作吗?前端要怎么学啊?前端工资怎么样?前端XX,前端XXX,虽然我 ...
- web前端开发常用的10个高端CSS UI开源框架
web前端开发常用的10个高端CSS UI开源框架 随着人们对体验的极致追求,web页面设计也面临着新的挑战,不仅需要更人性化的设计理念,还需要设计出更酷炫的页面.作为web前端开发人员,运用开源 ...
- Web前端开发最佳实践（9）：CSS代码太太乱，重复代码太多？你需要精简CSS代码
前言 提高网站整体加载速度的一个重要手段就是提高代码文件的网络传输速度.之前提到过,所有的代码文件都应该是经过压缩了的,这可提高网络传输速度,提高性能.除了压缩代码之外,精简代码也是一种减小代码文件大 ...
- 新手学习Web前端的三个高效学习方法，基础要重视
作为新手,出于对风险的担心,不免在学习一项新技能或者转投一个新行业的时候,有所犹豫与徘徊.毕竟,在这场类似冒险的选择中,我们需要投入时间.精力以及承受相关的经济损失.但是,只有勇敢迈出第一步,才能为生 ...
- web前端开发控件学习笔记之jqgrid+ztree+echarts
版权声明:本文为博主原创文章,转载请注明出处. 作为web前端初学者,今天要记录的是三个控件的使用心得,分别是表格控件jqgrid,树形控件ztree,图表控件echarts.下边分别进行描述. ...
- 2022年Web前端开发流程和学习路线（详尽版）
前言 前端侧重于人机交互和用户体验,后端侧重于业务逻辑和大规模数据处理.理论上,面向用户的产品里,所有问题(包括产品.设计.后端.甚至看不见的问题)的表现形式,都会暴露在前端,而只有部分问题(数据问题 ...
- web前端零基础入门学习！前端真不难！
现在互联网发展迅速,前端也成了很重要的岗位之一,许多人都往前端靠拢,可又无能为力,不知所措,首先我们说为什么在编程里,大家都倾向于往前端靠呢?原因很简单,那就是,在程序员的世界里,前端开发是最最简单的 ...
随机推荐
- UVA--624 CD(01背包+路径输出)
题目http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...
- 通过实体类生成建表SQL语句实现方法
import java.io.File; import java.io.FileOutputStream; import java.lang.reflect.Field; import java.ut ...
- collections中namedtuple的用法
我们知道tuple可以表示不变集合,例如,一个点的二维坐标就可以表示成: p = (1, 2) 但是,看到(1, 2),很难看出这个tuple是用来表示一个坐标的.这时,namedtuple就派上了用 ...
- python基础-迭代器
1.迭代:指的是一个重复的过程,每一次重复称为一次迭代,并且每一次重复的结果 是下一次重复的初始值 2.为什么要有迭代器 对于序列类型:str list tuple 可以依赖索引来迭代取值,但是对于d ...
- 廖雪峰Java10加密与安全-3摘要算法-1MD5
1.摘要算法 1.1 摘要算法(哈希算法/Hash/数字指纹): 计算任意长度数据的摘要(固定长度) 相同的输入数据始终得到相同的输出 不同的输入尽量得到不同的输出 1.2 摘要算法目的: 验证数据和 ...
- VirtualBox安装CentOS后分辨率和鼠标无缝切换问题
问题:VirtualBox安装完后出现分辨率只有800*600和1024*768,鼠标不能在虚拟机和本机件无缝切换. 解决办法:在终端中执行以下命令 yum install kernel yum in ...
- 【DM8168学习笔记6】学习思路整理
DavinciDM8168的开发是一套大的系统,包括ARM.DSP.以及他们的通信协作.对学习思路做简单总结: 一. 对于整体框架的把握 参考了一些文章.介绍davinci整体基础知 ...
- jmeter是什么
Apache JMeter 是Apache 组织开发的基于 Java 的压力测试工具: 适用的测试领域:地方 用于对软件做压力测试,它可以用于测试静态和动态资源,例如:静态文件,Java 小程序.CG ...
- mysql知识点回顾与梳理
一.sql语句执行顺序 from join on where group by avg,sum,count等各种函数 having select distinct order by(asc(升序),d ...
- UVa-401 Palindromes回文词
虽然是水题,但是容易错.参照了紫书的代码可以写的很简洁.主要还是注意常量数组的使用,能让代码变得简单许多 #include <iostream> #include <cstdio&g ...