移动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格式是否正确,采集符 ...
随机推荐
- 简单的 useState 实现
简单的 useState 实现 本文写于 2020 年 10 月 21 日 以下是一段非常简单的 React 代码: const App = () => { const [n, setN] = ...
- 初学者都能懂得 Git 说明
初学者都能懂得 Git 说明 本文写于 2020 年 8 月 10 日 网上有很多非常优秀的 Git 教程,但是他们都是面向有一定基础的开发者的. 可是对于没什么基础的初学者甚至是偶尔操作代码的设计师 ...
- 使用RoslynSyntaxTool工具互相转换C#代码与语法树代码
项目地址 MatoApps/RoslynSyntaxTool: 此工具能将C#代码,转换成使用语法工厂构造器(SyntaxFactory)生成等效语法树代码 (github.com) 基础概念 S ...
- 自学c语言
C 语言是一种通用的.面向过程式的计算机程序设计语言. 当前最新的 C 语言标准为 C18 前期准备 C 编译器 写在源文件中的源代码是人类可读的源.它需要"编译",转为机器语言 ...
- [codeforces] 暑期训练之打卡题(一)
每个标题都做了题目原网址的超链接 Day1<Vanya and Lanterns> 题意: 一条长度为 l 的街道,在这条街道上放置了n个相同的灯,街道一端位置记为0,每个灯的位置在ai处 ...
- 《Mybatis 手撸专栏》第9章:细化XML语句构建器,完善静态SQL解析
作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 你只是在解释过程,而他是在阐述高度! 如果不是长时间的沉淀.积累和储备,我一定也没有 ...
- MongoDB 设置用户和密码
每日一句 Zeal without knowledge is fire without light. 没有知识的热忱犹如火之无光. 给每个数据库设置单独的管理员 我们除了可以设置数据库的超级管理员以外 ...
- 行列式&矩阵树定理
行列式: 参考 oi-wiki 定义 对于一个\(n*n\)的矩阵A行列式取值(标量) \(det(A)=|A|=\sum\limits_p(-1)^{\tau(p)}\prod\limits_{i= ...
- 「ARC 139F」Many Xor Optimization Problems【线性做法,踩标】
「ARC 139F」Many Xor Optimization Problems 对于一个长为 \(n\) 的序列 \(a\),我们记 \(f(a)\) 表示从 \(a\) 中选取若干数,可以得到的最 ...
- PyTorch DataSet Normalization torchvision.transforms.Normalize()
特征缩放, 在这种情况下,我们不仅仅考虑是一个值的数据集,我们考虑的是具有多个特征和相关的值的样本或元素的数据集. 假如正在处理一个人的数据集, 归一化数据集有许多不同的 ...