CSS3幻灯片制作心得
大神勿喷,这是小弟自己学习的痕迹。
CSS3动画效果核心代码
1 @keyframes slideLeft { 2 0% { 3 left: -500px; 4 } 5 100% { 6 left: 0; 7 } 8 } 9 @keyframes slideBottom { 10 0% { 11 top: 350px; 12 } 13 100% { 14 top: 0; 15 } 16 } 17 @keyframes zoomIn { 18 0% { 19 transform: scale(0.1); 20 } 21 100% { 22 transform: none; 23 } 24 } 25 @keyframes rotate { 26 0% { 27 transform: rotate(-360deg) scale(0.1); 28 } 29 100% { 30 transform: none; 31 } 32 }
技术名词
1.height:auto 与 height: 100%
height:auto,是指根据块内内容自动调节高度。
height:100%,是指其相对父块高度而定义的高度,也就是按照离它最近且有定义高度的父层的高度来定义高度。
2. z-index (参考自 http://www.cnblogs.com/dolphinX/p/3262469.html)
z-index是针对网页显示中的一个特殊属性。
因为显示器是显示的图案是一个二维平面,拥有x轴和y轴来表示位置属性。
为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系。
z-index值 较大 的元素将叠加在z-index值 较小 的元素之上。
对于未指定此属性的定位对象,z-index 值为正数的对象会在其之上,而 z-index 值为负数的对象在其之下。
★ 只对定位元素有效
z-index属性适用于定位元素(position属性值为 relative 或 absolute 或 fixed的对象),
用来确定定位元素在垂直于显示屏方向(称为Z轴)上的层叠顺序,也就是说如果元素是没有定位的,对其设置的z-index会是无效的。
3.伪元素 ::after 和 ::before
::after是一个CSS伪元素,使用::after,你可以从CSS里往页面上新增内容(不再要在HTML里有相应的东西)。
虽然最终生成的东西并不是真正的DOM里的内容,但这些内容能像普通内容一样显示
::before跟::after完全类似,只是它插入的内容会出现在其它内容之前。
这两者的区别可以简单描述为:
想让插入的内容出现在其它内容前,使用::before,否者,使用::after。
在代码顺序上,::after生成的内容也比::before生成的内容靠后。如果按堆栈视角,::after生成的内容会在::before生成的内容之上。
content的值可以为:
字符串: content: "字符串"; – 特殊字符串需要转义或unicode编码。
图片:content: url(/path/to/image.jpg); – 图片会按原尺寸大小的插入,不能改变,因为渐变色实际上也是图像,所以,这些伪元素里也可以使用渐变色。
空: content: ""; – 可以用于清除左右浮动元素,也能够用于使用背景图片(这是可以设置高和宽,甚至使用background-size。)
计数器: content: counter(li); – 在列表时计算行数非常方便。
需要注意的是,你不能用它们插入HTML(至少这些HTML代码会被转义输出)。content: "<h1>nope</h1>";
4.background-size: length | percentage | cover | contain;
一:length
该属性值是设置背景图像的宽度和高度的,第一个值是宽度,第二个值是设置高度的。如果只设置第一个值,那么第二个值会自动转换为 “auto”;
二:percentage
该属性是以父元素的百分比来设置图片的宽度和高度的,第一个值是宽度,第二个值是高度。如果只设置一个值,那么第二个值会被设置为 “auto”;
三:cover (通常用于图片自适应缩放)
把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
四:contain
把图像扩展至最大尺寸,以使宽度和高度 完全适应内容区域。
实际静态效果图如下(图片引自空中网)
转载于:https://www.cnblogs.com/tim100/p/6031266.html
CSS3幻灯片制作心得相关推荐
- html普通幻灯片效果,超酷的CSS3幻灯片效果-前端开发博客_html/css_WEB-ITnose
对于 css3 的喜爱可谓日渐增加,无奈自己很忙,没有多少时间来研究,这段时间也做了很多这方面的项目,比如类似于QQ 的IM沟通工具界面,比如新的博客界面,比如这个css 幻灯片演示(拿来的). 如果 ...
- 制作 JS 广告的简易入门(二)利用 CSS3 技术制作广告
HTML5 Family: CSS3 Ads Versus Flash Ads http://www.sencha.com/blog/html5-family-css3-ads-versus-flas ...
- html 栏目切换幻灯片效果,很酷的切换效果 纯CSS3幻灯片实现
很酷的切换效果 纯CSS3幻灯片实现 11月 18, 2013 评论 (4) Sponsor CSS3实现给我们带来太多惊喜,FLASH能实现的动画,很多CSS3也可以实现,正如今天为大家展示的纯HT ...
- css3+jQuery制作导航菜单(带动画效果)
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>css ...
- 动漫风html源码,CSS3动画制作一个卡通风格的404错误页面代码
CSS3动画制作一个卡通风格的404错误页面代码(有动画效果) html> Css 404错误页 .error-container { text-align: center; font-size ...
- 【教程】超漂亮的CSS3按钮制作教程
利用CSS3属性制作按钮,我们只需要用到Gradient属性,不用使用任何图片素材和JavaScript代码,仅仅通过CSS就能制作出好看 的渐变按钮.按钮的大小可以通过CSS属性就能轻松的修改,而且 ...
- 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <! ...
- 计算机录入大赛,计算机文字录入PPT幻灯片制作大赛策划书
计算机文字录入PPT幻灯片制作大赛策划书 相关内容: "风筝满天飞,歌声多张扬"活动策划书活动主题:风筝满天飞,歌声多张扬本次活动象征生命与青春.热情与活力,我们舞台有多大我们梦想 ...
- 10个提升PPT幻灯片制作效率的方法
PPT是职场当中几乎每个人都有机会接触的工具,做PPT做的时间久了,要是你一直都在重复某些操作,但却没想办法提升效率. 这就不能怪别人都早早下班,而你还在苦逼苦逼地做着PPT了. 今天本文给大家总结了 ...
最新文章
- mysql系列之5--完全备份和增量备份
- DayDayUp:2019春节电影《疯狂的外星人》和《新喜剧之王》两部电影观后感
- MySQL高级-索引是什么
- 旧android 4 平板,如今的安卓平板值不值得买:小米平板4入坑指南
- java for list i_Java中ArrayList的fori和foreach效率比较
- web开发要学多久,HTML表格标签,薪资翻倍
- 论文浅尝 | Know-Evolve: Deep Temporal Reasoning for Dynamic KG
- 机器学习(三)k均值聚类
- MyCat分布式数据库集群架构工作笔记0012---高可用_Mycat双主双从复制原理
- 仿原生app,native特效
- VS2010 Express中文版ISO下载地址
- matlab 凸多边形,matlab练习程序(多边形顶点凹凸性)
- UP主分析丨B站“肝视频”第一人,追剧的速度都跟不上他。
- Flask报错:sqlite3.IntegrityError: NOT NULL constraint failed: step. date
- 给pdf、word、excel文件添加水印
- 人类小行星探测任务回顾
- DO、DTO、BO、VO、POJO等各种O浅学(总结)
- 宿主机使用wifi时虚拟机如何连网
- mybatis QueryWrapper的条件构造之apply、last
- flex布局左边固定,右边自适应,右边内容超出会影响布局
热门文章
- 使用while循环输入 1 2 3 4 5 6 8 9 10
- 字符集之间转换(UTF-8,UNICODE,Gb2312) c++
- C语言 数字和字符串的转换 error
- docker+open vswitch多宿主间容器互连构建tomcat服务
- CCF 201409-1 相邻数对
- k8s1.5.4挂载volume之nfs
- hpuoj--1093: 回文数(一)
- 英山往事之为母亲办六十大寿
- 哆啦A梦消除连连看游戏源码项目完整版
- Java---取得操作系统默认的代理