移动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格式是否正确,采集符 ...
随机推荐
- ThreadLocal夺命11连问
前言 前一段时间,有同事使用ThreadLocal踩坑了,正好引起了我的兴趣. 所以近期,我抽空把ThreadLocal的源码再研究了一下,越看越有意思,发现里面的东西还真不少. 我把精华浓缩了一下, ...
- 138_Power BI&Power Pivot特殊半累加度量
博客:www.jiaopengzi.com 焦棚子的文章目录 请点击下载附件 一.背景 半累加度量(semi-additive measure),在DAX建模分析的时候经常遇见:应用场景诸如银行存款. ...
- typescript 的安装和检测是否安装成功
全局安装typescript npm install -g typescript 检查typescript是否安装成功 tsc -v
- Spring Cloud OpenFeign 的 5 个优化小技巧!
OpenFeign 是 Spring 官方推出的一种声明式服务调用和负载均衡组件.它的出现就是为了替代已经进入停更维护状态的 Feign(Netflix Feign),同时它也是 Spring 官方的 ...
- Hadoop配置与安装
基础配置 1.关闭防火墙 systemctl stop firewalld.service #停止firewall systemctl disable firewalld.service #禁止fir ...
- vue大型电商项目尚品汇(前台篇)day05
紧急更新第二弹,然后就剩下最后一弹,也就是整个前台的项目 一.购物车 1.加入购物车(新知识点) 加入到购物车是需要接口操作的,因为我们需要将用户的加入到购物车的保存到服务器数据库,你的账号后面才会在 ...
- uniapp小程序webSocket封装使用
目录 1,前言 2,代码实现 3,使用 3.1,初始化 3.2,发送消息 3.3,接收消息 1,前言 最近在做IOT的项目,里面有个小程序要用到webSocket,借这个机会,封装了一个uniapp小 ...
- Linux静默安装Oracle21C
Linux静默安装Oracle21C 1.修改主机名及配置hosts [root@localhost ~]# hostname # 查看主机名 [root@localhost ~]# hostname ...
- 3D还原货拉拉女孩身亡真相,这一环值得反思!
货拉拉女孩跳车身亡的消息,让人惋惜又震惊.司机多次偏离原始路线,女孩最终选择跳车,结果不幸身亡. 货拉拉女孩跳车真相被3D还原 有人质疑平台监管不力,造成如此惨剧,有人吐槽企业压榨员工,司机绕路是不得 ...
- 前端学习 linux —— shell 编程
前端学习 linux - shell 编程 shell 原意是"外壳",与 kernel(内核)相对应,比喻内核外的一层,是用户和内核沟通的桥梁.shell 有很多种,国内通常使用 ...