移动web开发01










































pc端的支持情况。IE9以下的版本就会全军覆没。移动端就不会出现版本支持问题。










因为第一个孩子是p,但是他又是在span里面选,所以根本选不出来,报错。改成第二个孩子才可以选出来。



这样就可以选出span第一个元素了。

ul里面如果有很多子元素的话就用nth-of-type好一点。ul里面只有li的话也可以用nth-of-type。


清除浮动的时候出现过。







和数学的xy轴不一样。





第二点是前面学习的定位没有的特性。定位本来就是脱标的。

让一个盒子水平垂直居中!!






过渡就看到效果了。



加上动画效果









最后加上动画效果。

还有不要看到溢出部分。(加在父盒子上。)
















中间用空格隔开就好,如果不按顺序写,就会先进行旋转,再位移,位移就不是基于初始位置的位移了。是基于旋转后位置的位移。而且也会沿着你旋转的方向位移,之前是顺时向右,现在可能是逆时向左了。




不需要鼠标的经过和离开。过渡完成不了。




动画名称一开始就定义了。












也要注意顺序,持续时间一定要在何时开始的前面。

















可以实现打字机效果。

用steps,不能用ease,因为















z轴不用百分数,直接会精确到具体数值(px)。
借助透视才能看到xyz的变化。类似于3d电影必须要有3d眼镜才能看到效果一样。













正值旋转就是向屏幕里面方向旋转,负值的话就是向外(朝我们方向)旋转。一定要正负值。








矢量!!!所以根据xy的大小判断旋转的方向和大小


















要实现背靠背!!



增加立体感!












必须先移动后旋转,顺序不能乱。



做前面盒子的往前移动而不是后盒子的往后移动。因为要围着中心点旋转。正方体,不向前移动的话,翻转的就不是一个正方体的中心点翻转。


box加过渡,鼠标经过旋转。

加浮动。






加透视才有效果。




去section里面加3d效果。

section加自动旋转效果

鼠标放上去停止旋转。



针对不同的浏览器写不同的样式。













移动web开发01的更多相关文章
- PHP. 01. C/S架构、B/S架构、服务器类型、服务器软件、HTTP协议/服务器、数据库、服务器web开发、PHP简介/常见语法、PHPheader()、 PHP_POST/GET数据获取和错误处理
C/S架构 Client/Server 指客户端,服务器 架构的意思 优点:性能性高:可将一部分的计算工作放在客户端上,服务器只需处理出局即可 洁面炫酷,可使用更多系统提供的效果 缺点:更新软件需 ...
- 超全的web开发工具和资源
首页 新闻 产品 地图 动态 城市 帮助 论坛 关于 登录 注册 · 不忘初心,继续前进,环境云V2接口正式上线 · 环境云测点地图全新改版 · 祝福各位环境云用户中秋快乐! 平台信息 培训互动 ...
- 移动Web开发调研
背景 在移动互联网浪潮下,移动设备普及,对配置需要考虑移动端设备可访问性.Web作为最贴近用户的配置手段,面向从PC端传统页面,向移动端页面的转型. 概念 PC Web: 面向传统PC电脑的浏览器开发 ...
- Java Web开发中MVC设计模式简介
一.有关Java Web与MVC设计模式 学习过基本Java Web开发的人都已经了解了如何编写基本的Servlet,如何编写jsp及如何更新浏览器中显示的内容.但是我们之前自己编写的应用一般存在无条 ...
- 【原创】三分钟教你学会MVC框架——基于java web开发(2)
没想到我的上一篇博客有这么多人看,还有几位看完之后给我留言加油,不胜感激,备受鼓励,啥都别说了,继续系列文章之第二篇.(如果没看过我第一篇博客的朋友,可以到我的主页上先浏览完再看这篇文章,以免上下文对 ...
- Web开发基本准则-55实录-Web访问安全
Web开发工程师请阅读下面的前端开发准则,这是第一部分,强调了过去几年里我们注意到的Web工程师务须处理的Web访问安全基础点.尤其是一些从传统软件开发转入互联网开发的工程师,请仔细阅读,不要因为忽视 ...
- web开发中的 emmet 效率提升工具
web开发中的 emmet 效率提升工具 可以用来快速生成html 代码. 并且给各种IDE.编辑器提供了插件支持,sublime ,webstorm等. 如在webstorm中安装好emmet之后, ...
- 静态Web开发 HTML
静态Web开发 一章 HTML(Hyper Text Markup Language) 1节html入门 HTML超文本标记语言由浏览器解释执行开发人员编写的超文本文档就是网页 XHTMLHTML升级 ...
- WEB开发中常用的正则表达式
在计算机科学中,正则表达式用来描述或者匹配一系列符合某个句法规则的字符串的单个字符串.在WEB开发中,正则表达式通常用来检测.查找替换某些符合规则的字符串,如检测用户输入E-mai格式是否正确,采集符 ...
随机推荐
- 接口测试使用Python装饰器
写接口case时,有时需要对cae做一些共性的操作,最典型的场景如:获取case执行时间.打印log等. 有没有一种办法来集中处理共性操作从而避免在每个case中都写相同的代码(如:每个case都需要 ...
- grafana展示zabbix统计
1.安装grafana 参照官网文档:https://grafana.com/grafana/download 我这边是centos系统,执行这两个命令 wget https://dl.grafa ...
- html5 tts(文字朗读)
在 chrome 下使用比较好的中文语音包. 注意 speechSynthesis.getVoices() 有时候可能会返回空数组,需要做验证 var zhCnLangs = speechSynthe ...
- 以圆类 Circle 及立体图形类 Solid 为基础设计圆柱类 Cylinder
学习内容:以圆类 Circle 及立体图形类 Solid 为基础设计圆柱类 Cylinder 代码示例: import java.util.Scanner;class Point3{ private ...
- OpenHarmony3.1 Release版本特性解析——硬件资源池化架构介绍
李刚 OpenHarmony 分布式硬件管理 SIG 成员 华为技术有限公司分布式硬件专家 OpenHarmony 作为面向全场景.全连接.全智能时代的分布式操作系统,通过将各类不同终端设备的能力进行 ...
- vue跑马灯vue3-marquee
安装vue3-marquee 如果您使用的是 npm: npm install vue3-marquee@latest --save 如果您使用的是yarn: yarn add vue3-marque ...
- 前端5jQuery
内容概要 jQuery简介 查找标签 jQuery操作标签 jQuery事件操作 jQuery动画效果(了解) 前端第三方框架(基础) 内容详情 jQuery简介
- 前端4BOM与DOM
内容概要 BOM操作(了解) DOM操作 DOM操作标签 获取值操作 属性操作 事件 -事件案例 内容详情 BOM操作(了解)
- 13. L1,L2范数
讲的言简意赅,本人懒,顺手转载过来:https://www.cnblogs.com/lhfhaifeng/p/10671349.html
- Centos使用crontab自动定时备份mysql的脚本
在我们网站上线之后免不了需要备份数据库,为什么要备份呢?我给大家列出了3个理由. 1.防止数据丢失 2.防止数据改错了,可以用来恢复 3.方便给客户数据 以 上几点告诉我们要经常备份,当然我今天给大家 ...