在搞清楚这个问题之前,我们得先弄清楚H5和css3有哪些惊人的特性

首先我们来看下H5的新特性,canvas标签,多媒体标签(audio/video) 离线存储, 新的表单元素, 新的表单控件 地理定位等等,要说道惊人效果,其中canvas audio video 还有地理定位等就可以够玩一年 但题目中的一个纯字,一下子就将这一群一棒子打死… 因为要玩出惊人效果,就不得不用到js…那么,剩下的可用的就剩语义化标签,表单控件,新元素等等了.就语义化标签来说,本身存在的意义仅仅在于”语义化”而已,在视觉上,基本上和普通元素没什么区别,所以也就无从谈起什么惊人效果.那么就剩下表单元素和新增的表单元素类型…

就对于我们开发者而言,就表单元素新增的各种特性,还真算得上有些有用的效果,比如,新增表单类型中的date.要知道,在以前的版本中,这种东西除了用插件,就只能自己手写,不光是各种事件处理,dom操作,还得编写复杂的日历dom结构布局.各种考虑兼容,一不小心,就在哪个版本挂掉了,可是即便用上了插件,也还得去各种查询api,更主要的是,这些都会增加你的项目体积以及程序复杂程度.然而,当date类型出来之后,我要做的仅仅是只需要将input的type属性变成date即可 就像这样:

[html] view plain copy

<input type=“date” />

然后你就会得到这样的结果:

这在表单开发的过程中可以大大提高开发效率,同时还能有效减小项目体积以及项目的稳定定.然而,好景不长.很快我们发现这个新增的功能很难由我们自己去定义样式,并且每个浏览器上的显示风格都不一样,这意味着如果项目需求对页面的还原度要求很高的话,这个功能瞬间变成鸡肋,也就谈不上什么惊人了,充其量算是个效果….

也就是说就html部分,能带给我们的惊人效果实在是有限,这就只能看css了

首先,css本身就是用于处理样式的,而”惊人效果”无外乎就是视觉体验,这刚好就是css的拿手好戏.css3中新增的特性非常丰富:2D/3D转换,过渡,动画,圆角,阴影,渐变等等等等

其中2D/3D转换就能很轻易的写出3D场景

transform : rotateY(45deg); 即可实现如上效果

想要更高级? 没问题,咱们来个动效


搞定,咱们来看看效果,还是挺不错的吧.

实际上我们甚至可以通过过渡,加上伪类选择器,来通过纯css来实现轮播图效果

至于渐变,我们可以通过设置颜色的位置值来实现分界线效果,然后通过巧妙的重复渐变,能够画出如下图案:


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/news/451450.shtml
繁体地址,请注明出处:http://hk.pswp.cn/news/451450.shtml
英文地址,请注明出处:http://en.pswp.cn/news/451450.shtml

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

FPGA数据传输模块设计

摘要 FPGA适合于大量数据处理的应用&#xff0c;广泛应用于嵌入式系统。本文设计的FPGA模块需要对GPS、便携打印机和串口数据进行处理&#xff0c;将详细介绍如何设计FPGA和不同外设之间的数据传输。同时&#xff0c;在RTL编码中&#xff0c;编写使综合与布局布线效果更佳的代码…

java获取当前时间戳的方法

获取当前时间戳 //方法 一 System.currentTimeMillis(); //方法 二 Calendar.getInstance().getTimeInMillis(); //方法 三 new Date().getTime(); 获取当前时间 SimpleDateFormat df new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");//设置日期格式 String date df.…

解决Linux 忘记root 密码的办法

今天突然遇到一个问题&#xff0c;那别人的 linux 系统发现root 密码竟然不知道&#xff0c;这就尴尬了。经过一番百度&#xff0c;记录下 如何修改root 密码 1&#xff1a;开机linxu 按E 键 2&#xff1a;继续按E 键 3:选择 kernel..... 按E 4&#xff1a;在rhgb quiet 后面加…

tomcat的class加载的优先顺序

来源&#xff1a;https://bbs.csdn.net/topics/80459833Tomcat的class加载的优先顺序一览 最先是$JAVA_HOME/jre/lib/ext/下的jar文件。环境变量CLASSPATH中的jar和class文件。\$CATALINA_HOME/common/classes下的class文件。\$CATALINA_HOME/commons/endorsed下的jar文件。\$C…

简单理解Hadoop(Hadoop是什么、如何工作)

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 一、Hadoop主要的任务部署分为3个部分&#xff0c;分别是&#xff1a;Client机器&#xff0c;主节点和从节点。主节点主要负责Hadoop两个…

JPA @Id 和 @GeneratedValue 注解详解

Id&#xff1a; Id 标注用于声明一个实体类的属性映射为数据库的主键列。该属性通常置于属性声明语句之前&#xff0c;可与声明语句同行&#xff0c;也可写在单独行上。 Id标注也可置于属性的getter方法之前。 GeneratedValue&#xff1a; GeneratedValue 用于标注主键的生…

Factorials 阶乘

Description N的阶乘写作N!表示小于等于N的所有正整数的乘积。阶乘会很快的变大&#xff0c;如13!就必须用32位整数类型来存储&#xff0c;70&#xff01;即使用浮点数也存不下了。你的任务是找到阶乘最后面的非零位。举个例子,5!1*2*3*4*5120所以5!的最后面的非零位是2&#x…

硬件模块设计思想

硬件模块设计">模块设计,顾名思义就是将各个不同的功能做成独立的模块。然后将各个模块组合成不同的产品。 对于一个公司硬件模块化设计,从设计之初,调试,到样机及产品生产的过程应该是这样&#xff1a; 1.     了解产品需求 2.     根据需求,选择合适的处理…

java中的lastIndexOf( )函数是什么意思

int x a.lastIndexOf(b),表示b字符串在a字符串中最后出现的位置。如 a "abcdabcd";b"d";那么x的值为7.

2 分钟读懂大数据框架 Hadoop 和 Spark 的异同

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 谈到大数据&#xff0c;相信大家对Hadoop和Apache Spark这两个名字并不陌生。但我们往往对它们的理解只是提留在字面上&#xff0c;并没有…

操作系统文件编程知识

文件的创建和读写 当我们需要打开一个文件进行读写操作的时候&#xff0c;我们可以使用系统调用函数open。使用完成以后我们调用另外一个close函数进行关闭操作。 该函数使用的头文件如下&#xff1a; #include <fcntl.h> #include <unistd.h> #include <sys/ty…

论述HTML5平台的若干重要特性

开发者已凭借网页技术制作出创收丰厚的游戏作品许多年&#xff1a;《部落战争》凭借静态网页页面大获成功&#xff0c;《Farmville》凭借Flash开拓出新的疆域。但如今越来越多人觉得&#xff0c;未来HTML5将变成游戏的主要平台。为什么HTML5如此颇具趣味&#xff0c;它是否真的…

多GPU使用详解

目录&#xff1a; 介绍 记录设备状态 手动分配状态 允许GPU内存增长 在多GPU系统是使用单个GPU 使用多个 GPU 一、介绍 在一个典型的系统中&#xff0c;有多个计算设备。在 TensorFlow 中支持的设备类型包括 CPU 和 GPU。他们用字符串来表达&#xff0c;例如&#xff1a; “/cp…

图片上传的两种方式

总的说图片上传有两种方式&#xff0c;一种是把图片文件写到数据库中&#xff0c;另一种是存到服务器文件目录中。写到数据库中的图片文件需要转换成二进制流的格式&#xff0c;占用数据库空间比较多&#xff0c;适合少量图片的存储&#xff0c;比如说&#xff0c;系统中某些小…

最好理解的: spring ioc原理讲解,强烈推荐!

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 IOC&#xff08;DI&#xff09;&#xff1a;java程序中的每个业务逻辑至少需要两个或以上的对象来协作完成。通常&#xff0c;每个对象在…

微信小程序 - 回到自己位置(map)

演示效果&#xff1a; 图片资源 index.js 1 /** 2 * 回到自己位置&#xff0c;在cover-image上绑定点击事件即可. 3 */ 4 clickcontrol(e) { 5 let mpCtx wx.createMapContext("map"); 6 mpCtx.moveToLocation(); 7 }, 转载于:https://www.cnbl…

uwsgi搭配nginx

uwsgi搭配nginx可以做域名解析和负载均衡uWSGI&#xff0c;既不用wsgi协议也不用fcgi协议&#xff0c;而是自创了一个uwsgi的协议&#xff0c;据说该协议大约是fcgi协议的10倍那么快。uWSGI的主要特点如下&#xff1a;◆超快的性能。◆低内存占用&#xff08;实测为apache2的mo…

如何让tomcat服务器运行在80端口,并且无需输入项目名即可访问项目()

这个问题最开始遇到的时候是半年前,自己买了个服务器玩,但是域名解析的时候出了问题,我查了查资料才知道腾讯云是默认解析到80端口,而且还改不了. 首先是修改tomcat运行端口号,默认是8080,但是我们可以通过修改配置文件更改, 打开conf/server.xml文件找到这个地方,: 将8080改为…

tailf、tail -f、tail -F三者区别

tail -f 等同于--followdescriptor&#xff0c;根据文件描述符进行追踪&#xff0c;当文件改名或被删除&#xff0c;追踪停止 tail -F 等同于--followname --retry&#xff0c;根据文件名进行追踪&#xff0c;并保持重试&#xff0c;即该文件被删除或改名后&#xff…

使用图形芯片加速电子自动化设计应用程序

以往EDA应用性能瓶颈主要受两方面因素制约&#xff0c;首先大多数应用都是单线程的&#xff0c;而CPU和GPU架构拥有几十到数千的并行内核&#xff0c;其次是应用程序内存延迟问题。目前EDA应用已经部署到传统的常规处理器上。最重要的是这些应用促使人们设计出并行或向量处理器…