text样式
- 目前这两个属性只有webkit内核的Safari和Chrome支持,例如: -webkit-text-stroke: 3.3px #2A75BF;
- text-fill-color:颜色值,和color属性差不多都是文字的样式;
- 同时使用text-fill-color和color属性,text-fill-color将覆盖color属性的颜色值;
- text-fill-color可以使用透明值,即:text-fill-color:transparent
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
#box
{ line-height:150px; text-align:center; font-size:100px; font-family:'Microsoft YaHei'; white-space:normal; font-weight:bold;
}
p
{
margin:0; position:relative; height:150px;
}
p.p1
{
color:#fff; text-shadow:0 0 1px #666,2px 2px 10px #999; /*效果叠加*/
}
p.p2
{color:#ff6699; text-shadow:8px 8px 1px #fdc9c9; -webkit-text-stroke:3px #fff;}
p.p3
{color:#a0a0a0; text-shadow:8px 8px 1px #d3d3d3; -webkit-text-stroke:3px #fff;}
p.p4
{color:rgba(255,255,255,0.1); text-shadow:2px 2px 50px #ffcda1; -webkit-text-stroke:3px #ffcda1; background:url(Images/img.png) no-repeat center -120px; -webkit-background-clip:text; }
</style>
<script>
window.onload = function () {
var aSpan = document.getElementById("box").getElementsByTagName("span");
var aP = document.getElementById("box").getElementsByTagName("p");
var aArr = []; //按显示顺序存放span文字数组; for (var i = 0; i < aP.length; i++) {
var aSpans = aP[i].getElementsByTagName("span"); //获取每行的span
if (i % 2) { //如果是单行,1.3.5...则从最后一个字开始存放;
for (var j = aSpans.length - 1; j >= 0; j--) {
aArr.push(aSpans[j]);
aSpans[j].style.left = aSpans[j].offsetTop + "px";
aSpans[j].style.left = aSpans[j].offsetLeft + "px"; //给每个文字定位,确定每个文字显示的绝对位置
}
}
else { //如是双行,0.2.4...则按顺序存放;
for (var j = 0; j < aSpans.length; j++) {
aArr.push(aSpans[j]);
aSpans[j].style.left = aSpans[j].offsetTop + "px";
aSpans[j].style.left = aSpans[j].offsetLeft + "px"; //定位
}
}
} //将所有span设为绝对定位,缩小为0%;
for (var i = 0; i < aSpan.length; i++) {
aSpan[i].style.position = "absolute";
aSpan[i].style["WebkitTransform"] = "scale(0)";
} //开始逐个显示文字
for (var i = 0; i < aArr.length; i++) {
starMove(aArr[i], 100, i) //参数分别为:需显示的对象数组,目标值即实际字体大小,当前文字显示的索引号
}
}; //参数分别为:需显示的对象数组,文字大小,当前文字显示的索引号
function starMove(obj, target, i) {
obj.iNub = 0; //当前值
obj.iSpeed = 0; //速度
obj.timer = setTimeout(function () {
clearTimeout(obj.timer);
obj.timer = setInterval(function () {
domove(obj, target);
},14) //单个文字以0.014秒的频率由小变大的显示出,;
}, (i * 200 + 200)); //(i * 200 + 100)为每个文字显示延时时间;
} //参数分别为:需显示的对象数组,文字大小目标值
function domove(obj, target) {
obj.iSpeed += (target - obj.iNub) / 16; //+(100-0)/16 显示速度越来越快; obj.iSpeed *= 0.91;
if (obj.iNub == target && Math.abs(obj.iSpeed) < 4) { //速度小到4或目标值等于预设值时
clearInterval(obj.timer); //停止晃动
}
else {
obj.iNub += obj.iSpeed;
// alert(obj.iNub)
obj.style["WebkitTransform"] = "scale(" + (obj.iNub / 100) + ")";
} }
</script>
</head>
<body>
<div id="box">
<p class="p1"><span>全</span><span>剧</span><span>终</span><span>,</span></p>
<p class="p2"><span>看</span><span>见</span><span>满</span><span>场</span><span>空</span><span>座</span><span>椅</span><span>,</span></p>
<p class="p3"><span>灯</span><span>亮</span><span>起</span><span>,</span><span>这</span><span>故</span><span>事</span><span>,</span></p>
<p class="p4"><span>真</span><span>实</span><span>又</span><span>象</span><span>虚</span><span>幻</span><span>的</span><span>情</span><span>景</span></p>
</div>
</body>
</html>
text样式的更多相关文章
- HTML 样式表
样式代码 样式代码与属性代码区别 样式代码必须带单位 属性不需要 多个样式代码之间用分号隔开 同一个样式里面 用空格 多个属性之间用空格隔开 举例 1.背景样式 .r { backgr ...
- 【Android 应用开发】 ActionBar 样式详解 -- 样式 主题 简介 Actionbar 的 icon logo 标题 菜单样式修改
作者 : 万境绝尘 (octopus_truth@163.com) 转载请著名出处 : http://blog.csdn.net/shulianghan/article/details/3926916 ...
- Windows Phone开发(16):样式和控件模板
原文:Windows Phone开发(16):样式和控件模板 在前面资源一文中也提过样式,样式就如同我们做HTML页排版时常用到的CSS样式表,它是对于特定娄型的可视化元素,应该可以直接说是针对控件的 ...
- 样式(Style)和主题(Theme)资源——样式资源
样式和主题资源都是用于对Android应用进行“美化”的,只要充分利用Android应用的样式和主题资源,开发者可以开发出各种风格的Android应用. 样式资源: 如果我们经常需要对 ...
- Expression Blend实例中文教程(12) - 样式和模板快速入门Style,Template
在上一篇,介绍了Visual State Manager视觉状态管理器,其中涉及到控件的样式(Style)和模板(Template),本篇将详细介绍样式(Style)和模板(Template)在Sil ...
- [android] 安卓自定义样式和主题
简单练习自定义样式和主题,样式是加在View上,主题是加在Application或者Activity上 styles.xml <?xml version="1.0" enco ...
- 【Android 应用开发】 ActionBar 样式具体解释 -- 样式 主题 简单介绍 Actionbar 的 icon logo 标题 菜单样式改动
作者 : 万境绝尘 (octopus_truth@163.com) 转载请著名出处 : http://blog.csdn.net/shulianghan/article/details/3926916 ...
- 样式和模板快速入门Style,Template
http://www.cnblogs.com/jv9/archive/2010/04/14/1711520.html 样式(Style)和模板(Template)的定义 在Silverlight中,样 ...
- React Native之ListView使用
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
随机推荐
- (转)nio 字符集
字符集 概述 根据 Sun 的文档,一个 Charset 是“十六位 Unicode 字符序列与字节序列之间的一个命名的映射”.实际上,一个 Charset 允许您以尽可能最具可移植性的方式读写字符序 ...
- JSP中的TAG文件和TLD文件小结
在jsp文件中,可以引用tag和tld文件. 1.对于tag文件 <%@ taglib prefix="ui" tagdir="/WEB-INF/tags" ...
- STL_算法_区间的比較(equal、mismatch、 lexicographical_compare)
C++ Primer 学习中.. . 简单记录下我的学习过程 (代码为主) //全部容器适用 equal(b,e,b2) //用来比較第一个容器[b,e)和第二个容器b2开头,是否相等 e ...
- AppIcon尺寸
- java new map
import com.google.common.collect.Maps; public static Map<String, Object> configMap2 = new Conc ...
- Lr_debug_message,Lr_output_message,Lr_error_message,Lrd_stmt,Lrd_fetch
今天在群里,问了 Lr_debug_message,Lr_output_message,Lr_error_message,Lrd_stmt,Lrd_fetch.下 面我整理了下Lr_debug_mes ...
- iOS 音频视频图像合成那点事
代码地址如下:http://www.demodashi.com/demo/13420.html 人而无信不知其可 前言 很久很久没有写点什么了,只因为最近事情太多了,这几天终于闲下来了,趁此机会,记录 ...
- iOS 仿支付宝密码支付
代码地址如下:http://www.demodashi.com/demo/11484.html 一.准备工作 xcode 主要实现输入密码的时候不可见 二.程序实现 实现思路怎样 在支付宝输入密码的时 ...
- Qt for Android 开发大坑
Qt for Android 开发大坑 作者: qyvlik Qt 5.5.1 这里说一说比較常见的 Qt 开发安卓的大坑. 希望同学们不要做无谓的挣扎,跳过这些坑. 输入框 首当其冲的是输入框,Qt ...
- C语言-常用知识和技巧
1. char string[MAXSIZE], *tmp = string; 2."&&", "||", "?:", &q ...