<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js+css炫酷3d立体卡通文字特效</title>
<link href="https://fonts.googleapis.com/css?family=Rubik:700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/reset.min.css" />
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
<style type="text/css">
/* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
.wrapper {
text-align: center;
padding: 2rem;
background: linear-gradient(-45deg, #fff 30%, #ddd 50%, #fff);
background-size: 100%;
background-repeat: no-repeat;
height: 600px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
box-sizing: border-box;
box-shadow: inset 0 0 1rem rgba(0, 0, 10, 0.5);
}
.content {
font-family: 'Rubik';
font-size: 6rem;
font-weight: 900;
letter-spacing: .04em;
display: block;
word-spacing: 3rem;
line-height: 1.4;
text-transform: uppercase;
}
.content div {
display: inline;
}
.content span {
display: inline-block;
}
.content span:hover {
animation: wobble 200ms;
}
.content span:nth-child(1n) {
color: #F18829;
text-shadow: #ef7b11 1px 1px, #f7bd89 -1px -1px, #f37841 -2px -2px 6px, #f49d4f -2px -2px, #f49d4f -1px -2px, #f49d4f -1px -3px, #f49d4f -2px -4px, #f49d4f -2px -5px, #f49d4f -3px -6px, #F18829 -4px -7px, rgba(0, 0, 5, 0.4) 3px 4px 5px, rgba(0, 0, 5, 0.2) -3px -4px 5px;
transform: rotate(-3deg);
}
.content span:nth-child(2n) {
color: #00B9ED;
text-shadow: #00a5d4 1px 1px, #54d9ff -1px -1px, #08f2ff -2px -2px 6px, #17ccff -2px -2px, #17ccff -1px -2px, #17ccff -1px -3px, #17ccff -2px -4px, #17ccff -2px -5px, #17ccff -3px -6px, #00B9ED -4px -7px, rgba(0, 0, 5, 0.4) 3px 4px 5px, rgba(0, 0, 5, 0.2) -3px -4px 5px;
transform: rotate(3deg) translateY(4%);
}
.content span:nth-child(3n) {
color: #ED5053;
text-shadow: #eb393c 1px 1px, #f7acae -1px -1px, #ef6780 -2px -2px 6px, #f17577 -2px -2px, #f17577 -1px -2px, #f17577 -1px -3px, #f17577 -2px -4px, #f17577 -2px -5px, #f17577 -3px -6px, #ED5053 -4px -7px, rgba(0, 0, 5, 0.4) 3px 4px 5px, rgba(0, 0, 5, 0.2) -3px -4px 5px;
transform: rotate(-3deg);
}
.content span:nth-child(4n) {
color: #00AF4F;
text-shadow: #009643 1px 1px, #16ff7f -1px -1px, #00c939 -2px -2px 6px, #00d861 -2px -2px, #00d861 -1px -2px, #00d861 -1px -3px, #00d861 -2px -4px, #00d861 -2px -5px, #00d861 -3px -6px, #00AF4F -4px -7px, rgba(0, 0, 5, 0.4) 3px 4px 5px, rgba(0, 0, 5, 0.2) -3px -4px 5px;
transform: rotate(-2deg);
}
.content span:nth-child(5n) {
color: #8E509F;
text-shadow: #7f478e 1px 1px, #ba8fc6 -1px -1px, #8e5cad -2px -2px 6px, #a266b2 -2px -2px, #a266b2 -1px -2px, #a266b2 -1px -3px, #a266b2 -2px -4px, #a266b2 -2px -5px, #a266b2 -3px -6px, #8E509F -4px -7px, rgba(0, 0, 5, 0.4) 3px 4px 5px, rgba(0, 0, 5, 0.2) -3px -4px 5px;
transform: rotate(3deg) translateY(-2%);
}
.content span:nth-child(6n) {
color: #F9DE00;
text-shadow: #e0c700 1px 1px, #ffee60 -1px -1px, #ffbe14 -2px -2px 6px, #ffe723 -2px -2px, #ffe723 -1px -2px, #ffe723 -1px -3px, #ffe723 -2px -4px, #ffe723 -2px -5px, #ffe723 -3px -6px, #F9DE00 -4px -7px, rgba(0, 0, 5, 0.4) 3px 4px 5px, rgba(0, 0, 5, 0.2) -3px -4px 5px;
transform: rotate(5deg) translateY(1%);
}
@keyframes wobble {
50% {
transform: translate(2%, 2%);
}
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<div class="htmleaf-container">
<header class="htmleaf-header">
<h1>js+css炫酷3d立体卡通文字特效 <span>Alphabet Magnet Text Styling</span></h1>
<div class="htmleaf-links">
<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.jb51.net/" title="脚本之家" target="_blank"><span> 脚本之家</span></a>
<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.jb51.net/" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
</div>
</header>
<div class="htmleaf-content">
<div class="wrapper">
<div class="content">
Alphabet Magnet Text Styling
</div>
</div>
</div>
</div>
<script type="text/javascript">
'use strict';
var container = document.querySelector('.content');
var content = container.innerText;
function formatContent(content, container) {
var contentArray = content.split(' ');
var formattedContent = document.createElement('div');
contentArray.map(function (word) {
formattedContent.appendChild(createWord(word));
});
console.log(contentArray);
container.replaceChild(formattedContent, container.firstChild);
};
function createWord(characters) {
var word = document.createElement('div');
var wordArray = characters.split('');
wordArray.map(function (char) {
word.appendChild(formatCharacter(char));
});
word.appendChild(formatCharacter(' '));
return word;
}
function formatCharacter(text) {
var text = text === ' ' ? ' ' : text;
var character = document.createElement('span');
character.innerHTML = text;
return character;
}
formatContent(content, container);
</script>
</body>
</html>
js+css炫酷3d立体卡通文字特效源码.zip
版权申诉
155 浏览量
2022-11-01
01:17:40
上传
评论
收藏 62KB ZIP 举报
js+css炫酷3d立体卡通文字特效源码.zip （11个子文件） 
132689949153861070 js_CSS3_3Dwenzi css 
reset.min.css 773B htmleaf-demo.css 6KB style.css 3KB related 
2.jpg 30KB 1.jpg 24KB fonts icomoon.woff 1KB
icomoon.svg 2KB icomoon.eot 2KB icomoon.ttf 1KB
index.html 6KB scss style.scss 2KB资源评论
