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的更多相关文章

  1. PHP. 01. C/S架构、B/S架构、服务器类型、服务器软件、HTTP协议/服务器、数据库、服务器web开发、PHP简介/常见语法、PHPheader()、 PHP_POST/GET数据获取和错误处理

    C/S架构 Client/Server 指客户端,服务器 架构的意思 优点:性能性高:可将一部分的计算工作放在客户端上,服务器只需处理出局即可   洁面炫酷,可使用更多系统提供的效果 缺点:更新软件需 ...

  2. 超全的web开发工具和资源

    首页 新闻 产品 地图 动态 城市 帮助 论坛 关于 登录 注册 · 不忘初心,继续前进,环境云V2接口正式上线 · 环境云测点地图全新改版 · 祝福各位环境云用户中秋快乐!   平台信息 培训互动 ...

  3. 移动Web开发调研

    背景 在移动互联网浪潮下,移动设备普及,对配置需要考虑移动端设备可访问性.Web作为最贴近用户的配置手段,面向从PC端传统页面,向移动端页面的转型. 概念 PC Web: 面向传统PC电脑的浏览器开发 ...

  4. Java Web开发中MVC设计模式简介

    一.有关Java Web与MVC设计模式 学习过基本Java Web开发的人都已经了解了如何编写基本的Servlet,如何编写jsp及如何更新浏览器中显示的内容.但是我们之前自己编写的应用一般存在无条 ...

  5. 【原创】三分钟教你学会MVC框架——基于java web开发(2)

    没想到我的上一篇博客有这么多人看,还有几位看完之后给我留言加油,不胜感激,备受鼓励,啥都别说了,继续系列文章之第二篇.(如果没看过我第一篇博客的朋友,可以到我的主页上先浏览完再看这篇文章,以免上下文对 ...

  6. Web开发基本准则-55实录-Web访问安全

    Web开发工程师请阅读下面的前端开发准则,这是第一部分,强调了过去几年里我们注意到的Web工程师务须处理的Web访问安全基础点.尤其是一些从传统软件开发转入互联网开发的工程师,请仔细阅读,不要因为忽视 ...

  7. web开发中的 emmet 效率提升工具

    web开发中的 emmet 效率提升工具 可以用来快速生成html 代码. 并且给各种IDE.编辑器提供了插件支持,sublime ,webstorm等. 如在webstorm中安装好emmet之后, ...

  8. 静态Web开发 HTML

    静态Web开发 一章 HTML(Hyper Text Markup Language) 1节html入门 HTML超文本标记语言由浏览器解释执行开发人员编写的超文本文档就是网页 XHTMLHTML升级 ...

  9. WEB开发中常用的正则表达式

    在计算机科学中,正则表达式用来描述或者匹配一系列符合某个句法规则的字符串的单个字符串.在WEB开发中,正则表达式通常用来检测.查找替换某些符合规则的字符串,如检测用户输入E-mai格式是否正确,采集符 ...

随机推荐

  1. wait、notify和notifyAll方法学习

    wait.notify和notifyAll方法 wait() 方法会使该锁资源释放,然后线程进入等待WAITING状态,进入锁的waitset中,然后等待其他线程对锁资源调用notify方法或noti ...

  2. Vue3 与依赖注入

    Vue3 与依赖注入 本文写于 2021 年 2 月 19 日 在 React 中,我们可以通过 context 与 useContext 实现单例.注入--等诸多特性. 详细请看上一篇文章:如何利用 ...

  3. 167. Two Sum II - Input array is sorted - LeetCode

    Question 167. Two Sum II - Input array is sorted Solution 题目大意:和Two Sum一样,这里给出的数组是有序的 思路:target - nu ...

  4. vue跑马灯vue3-marquee

    安装vue3-marquee 如果您使用的是 npm: npm install vue3-marquee@latest --save 如果您使用的是yarn: yarn add vue3-marque ...

  5. MySql实例关于ifnull,count,case when,group by(转力扣简单)

    给定表 customer ,里面保存了所有客户信息和他们的推荐人. id   | name | referee_id|+------+------+-----------+|    1 | Will ...

  6. 多态——JavaSE基础

    多态 同一个方法可以根据对象的不同采取不同的动作 一个对象的实际类型是确定的,但可以指向对象的引用类型有很多 基本条件: 有继承关系 子类重写父类方法 父类引用指向子类对象Father f1 = ne ...

  7. React简单教程-2-ts和组件参数

    前言 在上一章:React 简单教程-1-组件 我们知道了 React 的组件是什么,长什么样,用 js 和 HTML 小小体验了一下组件.在这一章,我们将使用 typescript(简称 ts) 来 ...

  8. Oracle常见问题解决方法

    1.设置数据库用户的密码有效期为 无限制 --查询proile文件名 SELECT username,PROFILE FROM dba_users; --查询文件 的密码保护策略 SELECT * F ...

  9. Hyperledger Fabric 智能合约开发及 fabric-sdk-go/fabric-gateway 使用示例

    前言 在上个实验 Hyperledger Fabric 多组织多排序节点部署在多个主机上 中,我们已经实现了多组织多排序节点部署在多个主机上,但到目前为止,我们所有的实验都只是研究了联盟链的网络配置方 ...

  10. ShardingSphere-proxy-5.0.0部署之分表实现(一)

    一.说明 环境准备:JDK8+     mysql 5.x 官网:https://shardingsphere.apache.org/ 下载地址:https://archive.apache.org/ ...