移动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格式是否正确,采集符 ...
随机推荐
- 890. Find and Replace Pattern - LeetCode
Question 890. Find and Replace Pattern Solution 题目大意:从字符串数组中找到类型匹配的如xyy,xxx 思路: 举例:words = ["ab ...
- 645. Set Mismatch - LeetCode
Question 645. Set Mismatch Solution 思路: 遍历每个数字,然后将其应该出现的位置上的数字变为其相反数,这样如果我们再变为其相反数之前已经成负数了,说明该数字是重复数 ...
- Spring-Batch将CSV文件转为XML文件
1 介绍 用Spring Batch实现一个简单的需求,将csv文件转换成xml文件. csv文件如下:record.csv username, user_id, transaction_date, ...
- 一条更新SQL的内部执行及日志模块
一条更新SQL的内部执行 学习MySQL实战45讲,非常推荐学 还是老图: 上文复习 在执行查询语句的时候,会执行连接器(总要连上才能搞事情),然后去查询缓存(MySQL8+删除了),有数据返回,没数 ...
- PKUSC2022 游记
PKUSC2022 游记 Day1 上午随便看了点题,感觉没看什么题就开考了. 开考之后先看 T1,发现 T1 好像不是那么简单. T1 : 九条可怜有两个账号,她每次都会打 \(\rm rating ...
- python生产exe文件yi以及解释器配置等
原文链接:https://blog.csdn.net/weixin_42691768/article/details/81044666 https://www.cnblogs.com/paulwhw/ ...
- 想学设计模式、想搞架构设计,先学学UML系统建模吧您
UML系统建模 1 概述 1.1 课程概述 汇集UML及其相关的一些话题 回顾UML相关的符号与概念 以电商订单相关业务为例,借助UML完成系统建模 将UML变成提升建模效率,表达架构思想的工具 1. ...
- 学了WEB缓冲投毒-挖SRC的时候咋利用
学了WEB缓冲投毒-挖SRC的时候咋利用 昨天发了哥WEB缓存投毒的学习文章,但是除了理论和训练营并无实践,正巧翻到了一篇文章,感觉还有点关系,转的一个国外的老哥的文章. 微信公众号:小惜渗透,欢迎大 ...
- gitlab备份迁移与升级
升级计划: https://docs.gitlab.com/ee/update/index.html#upgrade-paths 1. 安装gitlab(和源版本必须保持一致) wget https: ...
- Linux 源码编译安装软件
程序包编译安装的步骤: 源代码-->预处理-->编译-->汇编-->链接-->执行 多文件:文件中的代码之间,很可能存在跨文件依赖关系 1.编译源码的项目工具 使用相关的 ...