按比例变化,同时又限制最大宽高

".start-wrap {",
" width:40%;",
" top: 83.21%;",
" max-width: 143px;",
" max-height: 2px;",
" position: absolute;",
" left: 50%;",
" transform: translate(-50%,0%);",
"}",

背景透明,内容不透明:

div {
background: rgba(0, 0, 0, 0.2) none repeat scroll !important;/* rgba(0, 0, 0, 0.2) 前三个确定颜色,最后0.2确定透明度 */
/*实现FireFox背景透明,文字不透明*/
background: #ffffff;
filter: Alpha(opacity=20);
/*实现IE背景透明,文字不透明*/
width: 200px;
height: 300px;
color: #000000;
font-size: 20px;
font-weight: bold;
}

整体透明:

opacity:0.4;

style="background-color:transparent;"

css样式优先级:

left:50% !important;
 
 

1,div横竖居中显示

宽度用百分比,高度根据实际情况而定,div的最大宽高都做了限制

".start-wrap {",
" width:34.5%;",
" position: absolute;",
" left: 50%;",
" transform: translate(-50%,-50%);",
" top: 50%;",
" max-width: 143px;",
" max-height: 52px;",
"}",

2,transform动画特效

例如:

.timepoint{
width:7.25%;
height:88.24%;
position:absolute;
right: 30%;
top: -40%;
background-image: url("$15885866%");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
transition: all 0.5s;
transform: scale(0);
transition-delay: 1s;
}

1秒的时间比例从0到1。

js调用:

div.timepoint.transform = "scale(1)",
 
 
 
 
        // js给元素增减css样式
        // $(".stp4button").addClass("animation"),
        // $(".stp4button").removeClass("animation"),

z-index 为 -1 是隐藏

    $("#mian_nor").css("z-index", "-1"),
    $("#yi_nor").css("z-index", "1"))

H5_0013:CSS特色样式集的更多相关文章

  1. Normalize.css – HTML5-ready 的css重置样式集

    Normalize.css 是一个可定制的 css文件,使浏览器呈现的所有元素,更一致和符合现代标准.它正是针对只需要统一的元素样式.该项目依赖于研究浏览器默认元素风格之间的差异,精确定位需要重置的样 ...

  2. 漂亮的CSS按钮样式集以及在线生成工具

    以前我们制作一样带带阴影.圆角或3D感的按钮都需要用图片来制作,但CSS3出来后就可以不用图片了,由于是代码写的按钮样式,在Retina上浏览依然清晰美观.虽然不错,但我们写一个阴影+质感的按钮还是挺 ...

  3. css字体样式+文本样式

    font-family属性值:具体字体名或者字体集 如果是中文或者有单词之间有空格,需要加双引号 字体集: Serif (有装饰线) Sans-serif (无装饰线) Monospace Cursi ...

  4. 精简的网站reset 和 css通用样式库

    参考链接:http://www.zhangxinxu.com/wordpress/2010/07/我是如何对网站css进行架构的/ reset.css body{ line-height:1.4; c ...

  5. css初始化样式代码

    为什么要初始化CSS? CSS初始化是指重设浏览器的样式.不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一.如果没对CSS初始化往往会出现浏览器之间的页面差异.每次新开发 ...

  6. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  7. html / css打印样式

    最近做公司后台系统,需要打印贴箱标签,按照正常打印A4纸的标准,测试的效果不是自己想要的,文字排版布局都乱了,查了一些资料,需要设置的东西我总结了一下: 显示器(screen)和打印机(printer ...

  8. CSS常用样式及示例

    CSS常用样式及示例 一.简介      层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...

  9. 第 15 章 CSS 文本样式[下]

    学习要点: 1.文本总汇 2.文本样式 3.文本控制 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一.文本总汇 本节课, ...

随机推荐

  1. php面试笔记(5)-php基础知识-自定义函数及内部函数考点

    本文是根据慕课网Jason老师的课程进行的PHP面试知识点总结和升华,如有侵权请联系我进行删除,email:guoyugygy@163.com 在面试中,考官往往喜欢基础扎实的面试者,而函数相关的考点 ...

  2. sun.misc.Unsafe中一些常用方法记录

    sun.misc.Unsafe中一些常用方法记录 前情摘要 sun公司提供了可以用于直接操作内存的类,这个类就是sun.misc.Unsafe.因为Java本身是不会涉及到直接操作内存的,Java A ...

  3. lwip stats

    lwip统计量分两种,一种是lwip自己的,一种是snmp的. 直接用snmp的 /* ----------------------------------- ---------- Statistic ...

  4. 一条Sql的Spark之旅

    背景 ​ SQL作为一门标准的.通用的.简单的DSL,在大数据分析中有着越来越重要的地位;Spark在批处理引擎领域当前也是处于绝对的地位,而Spark2.0中的SparkSQL也支持ANSI-SQL ...

  5. win10上使用linux命令

    (1)可以用windows自带的powershell,但是 ll,vim等命令不能使用 (2)Windows更新==>针对开发人员==>开启开发人员模式,然后在控制面板==>程序与功 ...

  6. CommunityServer的编译

    1. 简介 Community Server是一个免费的开源协作系统,用于管理文档.项目.客户关系和电子邮件通信,可以在私有服务器上安装和配置.它的组成分为: 1. OnlyOfficeJabber  ...

  7. docker jenkins 前端node项目 自动化部署异常 env: ‘node’: No such file or directory

    出现问题是docker jenkins 里面没有自动安装node导致找不到这个Node命令 解决方案:手动安装nodejs # 进入jenkins对应容器中 # docker exec -it [对应 ...

  8. 基于arduino的气象站

    bmp180的简介: • 压力范围:~1100hPa(海拔 米~- 米) • 电源电压:.8V~.6V(VDDA), .62V~.6V(VDDD) • 尺寸:.6mmx3.8x0.93mm • 低功耗 ...

  9. docker入门整理(1)--安装

    1.安装批量命令: CentOS7操作系统下. 包含卸载旧版本.安装依赖包.添加最新Yum源.安装docker-ce最新稳定版本.启动docker等: sudo yum remove docker \ ...

  10. 经济学人精读笔记9:打出租out了,“飞的”时代要来了!

    经济学人精读笔记9:打出租out了,"飞的"时代要来了! 标签(空格分隔): 经济学人 Part 1 Flying taxis are taking off to whisk pe ...