【js】阴影文字效果

最新推荐文章于 2024-08-07 22:31:29 发布

莫兰迪不会没有瓶子

最新推荐文章于 2024-08-07 22:31:29 发布

阅读量635

点赞数

文章标签： php javascript xhtml ViewUI

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<meta name="viewport" content="initial-scale=0.5" />

<title>text shadow box - zachstronaut</title>

<link rel="stylesheet" href="/css/demo.css" type="text/css" />

<style type="text/css" media="all">
html
{
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
    background: black;
    color: #666;
    font-family: sans-serif;
}

.badgestronaut
{
    left: 620px;
}

.getmore
{
    left: 620px;
    top: 130px;
}

.contain
{
    padding-top: 20px;
    width: 600px;
}

h1
{
    font-size: 1em;
}

a {
    color: #0f0;
}

a:hover {
    text-decoration: none;
}

#text-shadow-box {
    position: relative;
    width: 598px;
    height: 406px;
    background: #666;
    overflow: hidden;
    cursor: none;
    border: 1px solid #333;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-user-select: none;
}

#text-shadow-box div.wall {
    position: absolute;
    top: 175px;
    left: 0;
    width: 100%;
}

#tsb-text {
    margin: 0;
    color: #999;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 80px;
    line-height: 0.5em;
    height: 1px;
    font-weight: bold;
    text-align: center;
}

div.wall div {
    position: absolute;
    background: #999;
    top: 42px;
    left: 0;
    height: 300px;
    width: 100%;
}

#tsb-spot {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(spotlight.png) top center;
}
</style>

<!-- begin auto analytics block -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-192935-6']);
_gaq.push(['_trackPageview']);

(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- end auto analytics block -->

</head>
<body>
    
<div class="badgestronaut">
    <p><a href="http://www.zachstronaut.com/">This CSS3 and JavaScript demo was created by zachstronaut.</a></p>

    <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.zachstronaut.com%2Flab%2Ftext-shadow-box%2Ftext-shadow-box.html&layout=button_count&show_faces=false&width=90&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:21px;" allowTransparency="true"></iframe>

    <a href="https://twitter.com/share" class="twitter-share-button" data-via="zacharyjohnson" data-lang="en">Tweet</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>

<p class="getmore"><a href="http://getfirebomb.com/">Want to see more from me? Click here!</a></p>

<div class="contain">

<div id="text-shadow-box">
<div class="wall">
    <p id="tsb-text">Text Shadow</p>
    <div></div>
</div>
<div id="tsb-spot"></div>
</div>

<h1>text shadow box, June 2009</h1>

<p>Move your cursor over the box to cast a shadow with the spotlight.  This demo uses the CSS property <code>text-shadow</code>, supported in Safari, Firefox 3.5, Opera, and Chrome.</p>

<p>Also check out my <a href="text-shadow-box2.html">more sophisticated example</a> that replaces the PNG spotlight with one generated by a CSS radial gradient and also casts a proper shadow for the ledge.</p>

<p>Created by Zachary Johnson.  Please check out my site, <a href="http://www.zachstronaut.com/">zachstronaut.com</a>.</p>

</div>

<script type="text/javascript" language="javascript" charset="utf-8">
/**
 * Zachary Johnson
 * June 2009
 * www.zachstronaut.com
 */
 
var text;
var spot;

///window.onload = init;
init();

function init() {
    text = document.getElementById('tsb-text');
    spot = document.getElementById('tsb-spot');
    
    document.getElementById('text-shadow-box').onmousemove = onMouseMove;
    document.getElementById('text-shadow-box').ontouchmove = function (e) {e.preventDefault(); e.stopPropagation(); onMouseMove({clientX: e.touches[0].clientX, clientY: e.touches[0].clientY});};
    
    onMouseMove({clientX: 300, clientY: 200});
}


function onMouseMove(e) {
    var xm = e.clientX - 300;
    var ym = e.clientY - 175;
    var d = Math.sqrt(xm*xm + ym*ym);
    text.style.textShadow = -xm + 'px ' + -ym + 'px ' + (d / 5 + 10) + 'px black';
    
    xm = e.clientX - 600;
    ym = e.clientY - 450;
    spot.style.backgroundPosition = xm + 'px ' + ym + 'px';
}
</script>

</body>
</html>

莫兰迪不会没有瓶子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【js】阴影文字效果

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en&
复制链接

扫一扫