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

".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. Vscode使用

    一. Vscode使用 1. 点击最下方的错误警告显示条,出现四个选项最后一个为终端命令(dos命令) 2. 提交代码输入提交信息,打勾提交,选择类似刷新按钮进行推送 3. 同步代码点击类似刷新按钮即 ...

  2. React之虚拟DOM中的Diff算法

    一.React中的setState ( 异步函数,异步获取数据 ) 若操作的时间间隔短,它可以将多个setState结合成一个setState,减少虚拟DOM的比对次数,提高性能 二.同层虚拟DOM对 ...

  3. 阿里云ECS服务器,mysql无法外网访问

    可参考https://www.jianshu.com/p/7a41734b502e 问题原因 未授权远程IP地址登录.root用户默认只能在localhost也就是本机登录 解决方案 在服务器上登录数 ...

  4. windows下python3使用pip安装scrapy提示安装失败

    我的环境:     python3.6,     win10,      原因:不能成功安装twisted,因为twisted与高版本的python有兼容问题. 解决:1,先下载twisted二进制文 ...

  5. 高灵敏度自带DSP降噪算法的audio codec解决方案

    背景调研   随着AI渗透到各行各业,人们对语音的需求也越来越大,最近一两年,各种AI音频设备如雨后春笋般冒出.各种智能AI设备的推出,意味者市场对低成本的音频采集设备越来越多.针对这种情况,我们开发 ...

  6. 常见的MIME类型与00截断

    常见的MIME类型 1)超文本标记语言.html文件的MIME类型为:text/html 2)普通文本.txt文件的MIME类型为:text/plain 3)PDF文档.pdf的MIME类型为:app ...

  7. Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案

    Vue实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案   by:授客 QQ:1033553122   开发环境   Win 10   Vue 2.9.6   node-v ...

  8. Galactic Collegiate Programming Contest Gym - 101572G 模拟

    #include<bits/stdc++.h> using namespace std; int n,m; struct node { int id; int slove; int pen ...

  9. 10.HanLP实现k均值--文本聚类

    笔记转载于GitHub项目:https://github.com/NLP-LOVE/Introduction-NLP 10. 文本聚类 正所谓物以类聚,人以群分.人们在获取数据时需要整理,将相似的数据 ...

  10. 将小账本上传到GitHub

    在假期的时候我已经注册好了用户 https://www.cnblogs.com/1234yyf/p/12312072.html 然后我将我的小账本上传到GitHub上面:一步一步跟着就可以上传成功!! ...