HTML样式分享
- 前言
- 倾斜卡片
- 药丸加载
- 纸卷切换
- 水平滚动播报
- 圆形菜单
- 滚动介绍
前言
这些样式有些是在网络上收集的 有些是自己写的 希望能给读者在编写html样式时提供一些帮助 每周都会更新 喜欢的点个赞和关注吧~
倾斜卡片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{
font-size: 17px;
line-height: 30px;
font-weight: 400;
-moz-osx-font-smoothing: grayscale;
word-break: break-word;
-webkit-font-smoothing: antialiased;
font-family: "Epilogue", sans-serif;
margin: 0;
background: #fff;
}
* {
box-sizing: border-box;
}
.creative-cards{
padding: 120px 0;
position: relative;
}
.creative-cards .container {
max-width: 1320px;
width: 100%;
padding-right: .75rem;
padding-left: .75rem;
margin-right: auto;
margin-left: auto;
}
.creative-cards .container .row{
display: flex;
flex-wrap: wrap;
}
.creative-cards .container .row .card-column {
flex: 0 0 auto;
width: 33.33333333%;
text-align: center;
max-width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.card-details {
width: 80%;
margin: auto;
position: relative;
transition: .3s ease-in-out;
}
.card-details:before {
content: "";
width: 190px;
height: 380px;
background: #f7f6f2;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) skew(-20deg, 0deg);
z-index: -1;
transition: .3s ease-in-out;
}
.card-details:hover:before{
background-color: #fffab3;
}
.card-icons {
width: 140px;
height: 150px;
position: relative;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
}
.card-icons:before {
content: "";
position: absolute;
top: 0;
left: 0;
border: 1px solid;
width: 100%;
height: 100%;
transform: skew(-20deg, 0deg);
background: #fff;
border-color: #ffee02;
transition: .3s ease-in-out;
}
.card-details:hover .card-icons:before{
background-color: #ffee02;
}
.card-icons img{
position: relative;
width: 70px;
height: 70px;
}
.card-details h3{
margin-bottom: 15px;
margin-top: 50px;
font-weight: 700;
font-size: 1.75rem;
line-height: 1.2;
}
.card-details h3 a{
color: #000;
text-decoration: none;
}
.card-details p{
font-size: 16px;
line-height: 30px;
color: #444;
font-weight: 400;
margin-bottom: 30px;
}
.read-more-btn {
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid;
border-radius: 100%;
margin: auto;
background: #fff;
transform: translateX(-10px);
opacity: 0;
visibility: hidden;
border-color: #ffee02;
transition: .3s ease-in-out;
text-decoration: none;
}
.read-more-btn i{
color: #000;
font-size: 12px;
}
.card-details:hover .read-more-btn{
transform: translateX(0);
opacity: 1;
visibility: visible;
}
@media (max-width: 992px) {
.creative-cards .container .row .card-column {
flex: 0 0 auto;
width: 50%;
margin-bottom: 40px;
}
}
@media (max-width: 480px) {
.creative-cards .container .row .card-column {
flex: 0 0 auto;
width: 100%;
margin-bottom: 20px;
}
.card-details{
width: 100%;
}
.read-more-btn{
transform: translateX(0px);
opacity: 1;
visibility: visible;
}
}
</style>
</head>
<body>
<section class="creative-cards style-one">
<div class="container">
<div class="row">
<div class="card-column">
<div class="card-details">
<div class="card-icons">
<!--放置自定义图标 可以是svg等其他格式-->
</div>
<h3><a href="">跳转页面</a></h3>
<p>文本</p>
<a class="read-more-btn" href=""><i class="fa-solid fa-angles-right"></i></a>
</div>
</div>
<div class="card-column">
<div class="card-details">
<div class="card-icons">
<!--放置自定义图标 可以是svg等其他格式-->
</div>
<h3><a href="">跳转页面</a></h3>
<p>文本</p>
<a class="read-more-btn" href=""><i class="fa-solid fa-angles-right"></i></a>
</div>
</div>
<div class="card-column">
<div class="card-details">
<div class="card-icons">
<!--放置自定义图标 可以是svg等其他格式-->
</div>
<h3><a href="">跳转页面</a></h3>
<p>文本</p>
<a class="read-more-btn" href=""><i class="fa-solid fa-angles-right"></i></a>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
药丸加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="content">
<div class="pill">
<div class="medicine">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
</div>
<div class="side"></div>
<div class="side"></div>
</div>
</div>
</body>
<style>
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at 50% 100%, #262b2f, #000);
}
.content {
width: 50vmin;
height: 50vmin;
background: #fff0;
display: flex;
align-items: center;
justify-content: center;
}
.pill {
background: #fff0;
width: 15vmin;
height: 40vmin;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
transform: rotate(180deg);
animation: spin 4s linear 0s infinite;
}
@keyframes spin {
100% { transform: rotate(-540deg);}
}
.pill .side {
background: #f7c340;
position: relative;
overflow: hidden;
width: 11vmin;
height: 15vmin;
border-radius: 6vmin 6vmin 0 0;
}
.pill .side + .side {
background: #d9680c;
border-radius: 0 0 6vmin 6vmin;
border-top: 1vmin solid #621e1a;
animation: open 2s ease-in-out 0s infinite;
}
@keyframes open {
0%, 20%, 80%, 100% { margin-top: 0; }
30%, 70% { margin-top: 10vmin; }
}
.pill .side:before {
content: "";
position: absolute;
width: 2vmin;
height: 10vmin;
bottom: 0;
right: 1.5vmin;
background: #fff2;
border-radius: 1vmin 1vmin 0 0;
animation: shine 1s ease-out -1s infinite alternate-reverse;
}
.pill .side + .side:before {
bottom: inherit;
top: 0;
border-radius: 0 0 1vmin 1vmin;
}
.pill .side:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
border-radius: 6vmin 6vmin 0 0;
border: 1.75vmin solid #00000022;
border-bottom-color: #fff0;
border-bottom-width: 0vmin;
border-top-width: 1vmin;
animation: shadow 1s ease -1s infinite alternate-reverse;
}
.pill .side + .side:after {
bottom: inherit;
top: 0;
border-radius: 0 0 6vmin 6vmin;
border-top-color: #fff0;
border-top-width: 0vmin;
border-bottom-width: 1vmin;
}
@keyframes shine {
0%, 46% { right: 1.5vmin; }
54%, 100% { right: 7.5vmin; }
}
@keyframes shadow {
0%, 49.999% { transform: rotateY(0deg); left: 0; }
50%, 100% { transform: rotateY(180deg); left: -3vmin; }
}
.medicine {
position: absolute;
width: calc(100% - 6vmin);
height: calc(100% - 12vmin);
background: #fff0;
border-radius: 5vmin;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.medicine i {
width: 1vmin;
height: 1vmin;
background: #47c;
border-radius: 100%;
position: absolute;
animation: medicine-dust 1.75s ease 0s infinite alternate;
}
.medicine i:nth-child(2n+2) {
width: 1.5vmin;
height: 1.5vmin;
margin-top: -5vmin;
margin-right: -5vmin;
animation-delay: -0.2s;
}
.medicine i:nth-child(3n+3) {
width: 2vmin;
height: 2vmin;
margin-top: 4vmin;
margin-right: 3vmin;
animation-delay: -0.33s;
}
.medicine i:nth-child(4) {
margin-top: -5vmin;
margin-right: 4vmin;
animation-delay: -0.4s;
}
.medicine i:nth-child(5) {
margin-top: 5vmin;
margin-right: -4vmin;
animation-delay: -0.5s;
}
.medicine i:nth-child(6) {
margin-top: 0vmin;
margin-right: -3.5vmin;
animation-delay: -0.66s;
}
.medicine i:nth-child(7) {
margin-top: -1vmin;
margin-right: 7vmin;
animation-delay: -0.7s;
}
.medicine i:nth-child(8) {
margin-top: 6vmin;
margin-right: -1vmin;
animation-delay: -0.8s;
}
.medicine i:nth-child(9) {
margin-top: 4vmin;
margin-right: -7vmin;
animation-delay: -0.99s;
}
.medicine i:nth-child(10) {
margin-top: -6vmin;
margin-right: 0vmin;
animation-delay: -1.11s;
}
.medicine i:nth-child(1n+10) {
width: 0.6vmin;
height: 0.6vmin;
}
.medicine i:nth-child(11) {
margin-top: 6vmin;
margin-right: 6vmin;
animation-delay: -1.125s;
}
.medicine i:nth-child(12) {
margin-top: -7vmin;
margin-right: -7vmin;
animation-delay: -1.275s;
}
.medicine i:nth-child(13) {
margin-top: -1vmin;
margin-right: 3vmin;
animation-delay: -1.33s;
}
.medicine i:nth-child(14) {
margin-top: -3vmin;
margin-right: -1vmin;
animation-delay: -1.4s;
}
.medicine i:nth-child(15) {
margin-top: -1vmin;
margin-right: -7vmin;
animation-delay: -1.55s;
}
@keyframes medicine-dust {
0%, 100% { transform: translate3d(0vmin, 0vmin, -0.1vmin); }
25% { transform: translate3d(0.25vmin, 5vmin, 0vmin); }
75% { transform: translate3d(-0.1vmin, -4vmin, 0.25vmin); }
}
</style>
<script>
</script>
</html>
纸卷切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="toggle">
<input type="checkbox" id="btn">
<label for="btn">
<span class="thumb"></span>
</label>
</div>
</body>
<style>
:root {
--sz: 10vmin;
--tr: all 0.5s ease 0s;
}
* {
box-sizing: border-box;
transition: var(--tr);
}
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(205deg, #5c6279, #2d303b);
}
.toggle {
position: relative;
width: calc(var(--sz)* 4);
height: calc(var(--sz)* 2);
display: flex;
align-items: center;
justify-content: center;
filter: drop-shadow(-2px 2px 4px #0003);
}
.toggle:before {
content: "";
position: absolute;
width: 2vmin;
top: 4vmin;
height: calc(100% - 4vmin);
background: #fff;
left: -1.9vmin;
clip-path: polygon(0% 0%, 18% 8%, 2% 39%, 21% 80%, 2% 90%, 15% 105%, 100% 100%, 100% 0%);
}
.toggle:after {
content: "";
position: absolute;
width: 0.2vmin;
top: 4vmin;
left: 12.25vmin;
height: calc(100% - 4vmin);
background: repeating-linear-gradient(180deg, #ccc6 0 0.8vmin, #fff calc(0.8vmin + 1px) calc(0.8vmin + 2px));
}
input {
display: none;
}
label[for=btn] {
position: absolute;
width: calc(var(--sz)* 4);
height: calc(var(--sz)* 2);
background: linear-gradient(90deg, #fff 30%, #fff0 30%);
background-size: 100% calc(100% - 4vmin);
background-repeat: no-repeat;
background-position: 0 4vmin;
transition: background-size 0.5s ease 0s;
}
#btn:checked + label {
background-size: 260% calc(100% - 4vmin);
}
label[for=btn]:before, label[for=btn]:after {
content: "ON";
position: absolute;
width: 50%;
text-align: center;
height: 100%;
line-height: 23vmin;
font-size: 8vmin;
font-family: Arial, Helvetica, serif;
transform: scaleY(1.1);
padding: 0 2vmin;
color: #9acd32;
text-shadow: 0 1px 2px #0008, 0 -2px 1px #eee;
}
label[for=btn]:after {
content: "OFF";
right: 0.5vmin;
padding: 0;
color: #292929cc;
text-shadow: 0 -2px 2px #0008, 0 1px 2px #fff4;
z-index: -10;
text-align: right;
}
.thumb {
position: absolute;
width: calc(calc(var(--sz)* 2) - calc(var(--sz) / 3));
height: calc(calc(var(--sz)* 2) - calc(var(--sz) / 30));
top: calc(calc(var(--sz) / 10) + calc(var(--sz) / -1.65));
left: calc(calc(var(--sz) / 3) + calc(var(--sz) / 50));
top: calc(calc(var(--sz) / 10) + calc(var(--sz) / -15));
left: calc(calc(var(--sz) / 10) + calc(var(--sz)* 0.35));
background: repeating-conic-gradient(from -90deg at 0.15vmin 90%, #d3d5de80 0 25%, #fff0 0 100%), repeating-conic-gradient(from -90deg at 0.15vmin 90%, #d3d5de80 0 25%, #fff0 0 100%), repeating-conic-gradient(from -90deg at 0.15vmin 90%, #d3d5de80 0 25%, #fff0 0 100%), #fff;
border-radius: 50% 50% 50% 50% / 15% 15% 15% 15%;
box-shadow: calc(var(--sz)* -0.35) calc(var(--sz)* 0.35) calc(var(--sz) / 30) 0 #0004;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
overflow: hidden;
background-repeat: repeat-y, repeat-y, repeat-y, no-repeat;
background-size: 50% 1vmin, 50% 1vmin, 50% 1vmin, 100% 100%;
background-position: -90% 0, 5% 0, 185% 0, 0 0;
}
#btn:checked + label .thumb {
transition: var(--tr);
left: calc(calc(100% - calc(calc(var(--sz)* 2) - calc(var(--sz) / 3))) - calc(calc(var(--sz) / 10) + calc(var(--sz)* -0.075)));
background-position: 150% 0, 150% 0, 285% 0, 0 0;
}
.thumb:before {
content: "";
position: absolute;
width: 100%;
height: 25%;
background: radial-gradient(ellipse at 50% 50%, #999696 2.75vmin, #fff0 calc(2.75vmin + 2px) 100%), #d3d5de;
border-radius: 100%;
bottom: 0;
}
</style>
<script>
</script>
</html>
水平滚动播报
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="tag-scrollers">
<div class="tag-scroller">
<ul class="tag-list">
<li>自定义文字1</li>
<li>自定义文字22</li>
<li>自定义文字333</li>
<li>自定义文字4444</li>
<li>自定义文字55555</li>
<li>自定义文字6666</li>
<li>自定义文字777</li>
<li>自定义文字88</li>
<li>自定义文字9</li>
<li>自定义文字10</li>
</ul>
</div>
</div>
</body>
<style>
:root {
--dark: #252A2E;
--light: #F5F5F5;
--background: var(--light);
--text: var(--dark);
--border: var(--dark);
}
@media (prefers-color-scheme: dark) {
:root {
--background: var(--dark);
--text: var(--light);
--border: var(--light);
}
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
display: grid;
min-block-size: 100vh;
place-content: center;
background: var(--background);
color: var(--text);
}
.tag-scrollers {
width: 100%;
max-width: 1200px;
overflow: hidden;
}
.tag-scroller {
display: grid;
gap: 1.5rem;
mask: linear-gradient(90deg, #0000, var(--background) 15%, var(--background) 85%, #0000);
}
.tag-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
}
@media (prefers-reduced-motion) {
.tag-list {
flex-flow: row nowrap;
overflow: auto;
scrollbar-width: none;
scrollbar-color: transparent transparent;
}
.tag-list::-webkit-scrollbar-track {
background: transparent;
}
.tag-list::-webkit-scrollbar-thumb {
background: transparent;
}
.tag-list::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
}
.tag-list li {
font-family: system-ui;
font-size: 1.125rem;
line-height: 1;
padding: 0.625rem 1.375rem;
border: 2px solid var(--border);
border-radius: 10ch;
white-space: nowrap;
}
.tag-scroller.scrolling .tag-list {
width: max-content;
flex-wrap: nowrap;
animation: horizontal-scroll var(--duration) var(--direction, normal) linear infinite;
}
.tag-scroller.scrolling .tag-list:nth-child(even) {
--direction: reverse;
}
.tag-scroller:hover .tag-list {
animation-play-state: paused;
}
@keyframes horizontal-scroll {
to {
transform: translateX(calc(-50% - .75rem));
}
}
</style>
<script>
const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
if (mediaQuery && !mediaQuery.matches) {
const tagScroller = document.querySelector(".tag-scroller");
const allTags = tagScroller.querySelectorAll("li");
function createElement(tagName, className = "") {
const elem = document.createElement(tagName);
elem.className = className;
return elem;
}
function scrollersFrom(elements, numColumns = 2) {
const fragment = new DocumentFragment();
elements.forEach((element, i) => {
const column = i % numColumns;
const children = fragment.children;
if (!children[column]) fragment.appendChild(createElement("ul", "tag-list"));
children[column].appendChild(element);
});
return fragment;
}
const scrollers = scrollersFrom(allTags, 2);
tagScroller.innerHTML = "";
tagScroller.appendChild(scrollers);
addScrolling();
function addScrolling() {
tagScroller.classList.add("scrolling");
document.querySelectorAll(".tag-list").forEach((tagList) => {
const scrollContent = Array.from(tagList.children);
scrollContent.forEach((listItem) => {
const clonedItem = listItem.cloneNode(true);
clonedItem.setAttribute("aria-hidden", true);
tagList.appendChild(clonedItem);
});
tagList.style.setProperty("--duration", (tagList.clientWidth / 100) + "s");
});
}
}
</script>
</html>
圆形菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="navbar">
<ul class="menu">
<li><a href="#">空间</a></li>
<li><a href="#" >首页</a></li>
<li><a href="#" >活动</a></li>
<li><a href="#" >教程</a></li>
<li><a href="#" >发布</a></li>
<li><a href="#" >隐藏</a></li>
<li><a href="#">其他</a></li>
<li><a href="#" >其他</a></li>
</div>
</body>
<style>
body{
background-color: rgb(182, 209, 42);
}
.navbar {
width: 150px;
height: 150px;
line-height: 150px;
border-radius: 50%;
background:white;
margin: 70px auto;
position: relative;
cursor: pointer;
text-align: center;
font-size: 1.75em;
font-weight: bold;
color: #383838;
opacity: 0.1;
transition: 0.24s 0.2s;
}
.navbar .menu {
list-style: none;
padding: 0;
margin: 0;
position: absolute;
top: -75px;
left: -75px;
border: 150px solid transparent;
cursor: default;
border-radius: 50%;
transform: scale(0);
transition: transform 1.4s 0.07s;
z-index: -1;
}
.navbar:hover{
opacity: 1;
}
.navbar:hover .menu {
transition: transform 0.4s 0.08s, z-index 0s 0.5s;
transform: scale(1);
z-index: 1;
}
.navbar .menu li {
position: absolute;
top: -100px;
left: -100px;
transform-origin: 100px 100px;
transition: all 0.5s 0.1s;
}
.navbar:hover .menu li {
transition: all 0.6s;
}
.navbar .menu li a {
transition:all .4s ease 0s;
width: 45px;
height: 45px;
line-height: 45px;
border-radius: 50%;
background: white;
position: absolute;
font-size: 60%;
color: #2860F8;
transition: 0.6s;
text-decoration: none;
}
.navbar .menu li a:hover {
background-color: #2860F8;
color:white;
}
.navbar:hover .menu li:nth-child(1) {
transition-delay: 0.02s;
transform: rotate(85deg);
}
.navbar:hover .menu li:nth-child(1) a {
transition-delay: 0.04s;
transform: rotate(635deg);
}
.navbar:hover .menu li:nth-child(2) {
transition-delay: 0.04s;
transform: rotate(125deg);
}
.navbar:hover .menu li:nth-child(2) a {
transition-delay: 0.08s;
transform: rotate(595deg);
}
.navbar:hover .menu li:nth-child(3) {
transition-delay: 0.06s;
transform: rotate(165deg);
}
.navbar:hover .menu li:nth-child(3) a {
transition-delay: 0.12s;
transform: rotate(555deg);
}
.navbar:hover .menu li:nth-child(4) {
transition-delay: 0.08s;
transform: rotate(205deg);
}
.navbar:hover .menu li:nth-child(4) a {
transition-delay: 0.16s;
transform: rotate(515deg);
}
.navbar:hover .menu li:nth-child(5) {
transition-delay: 0.1s;
transform: rotate(245deg);
}
.navbar:hover .menu li:nth-child(5) a {
transition-delay: 0.2s;
transform: rotate(475deg);
}
.navbar:hover .menu li:nth-child(6) {
transition-delay: 0.12s;
transform: rotate(285deg);
}
.navbar:hover .menu li:nth-child(6) a {
transition-delay: 0.24s;
transform: rotate(435deg);
}
.navbar:hover .menu li:nth-child(7) {
transition-delay: 0.14s;
transform: rotate(325deg);
}
.navbar:hover .menu li:nth-child(7) a {
transition-delay: 0.28s;
transform: rotate(395deg);
}
.navbar:hover .menu li:nth-child(8) {
transition-delay: 0.16s;
transform: rotate(365deg);
}
.navbar:hover .menu li:nth-child(8) a {
transition-delay: 0.32s;
transform: rotate(355deg);
}
.navbar:hover .menu li:nth-child(9) {
transition-delay: 0.18s;
transform: rotate(405deg);
}
.navbar:hover .menu li:nth-child(9) a {
transition-delay: 0.36s;
transform: rotate(315deg);
}
</style>
<script>
</script>
</html>
滚动介绍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
font-weight: 600;
font-size: 75px;
}
.text {
position: absolute;
width: 600px;
left: 50%;
margin-left: -25vw;
height: 40px;
top: 50%;
margin-top: -20px;
display: flex;
justify-content: center;
align-items: center;
}
p {
display: inline-block;
vertical-align: top;
margin: 0;
}
.word {
position: absolute;
width: 300px;
opacity: 0;
}
.letter {
display: inline-block;
position: relative;
float: left;
transform: translateZ(25px);
transform-origin: 50% 50% 25px;
}
.letter.out {
transform: rotateX(90deg);
transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.letter.behind {
transform: rotateX(-90deg);
}
.letter.in {
transform: rotateX(0deg);
transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.wisteria {
color: #8e44ad;
}
.belize {
color: #2980b9;
}
.pomegranate {
color: #c0392b;
}
.green {
color: #16a085;
}
.midnight {
color: #2c3e50;
}
</style>
</head>
<body>
<div class="text">
<div><p>自定义标题</p>
<p>
<span class="word wisteria">介绍1</span>
<span class="word belize">介绍2</span>
<span class="word pomegranate">介绍3</span>
<span class="word green">介绍4</span>
<span class="word midnight">介绍5</span>
</p></div>
</div>
<script>
var words = document.getElementsByClassName('word');
var wordArray = [];
var currentWord = 0;
words[currentWord].style.opacity = 1;
for (var i = 0; i < words.length; i++) {
splitLetters(words[i]);
}
function changeWord() {
var cw = wordArray[currentWord];
var nw = currentWord == words.length-1 ? wordArray[0] : wordArray[currentWord+1];
for (var i = 0; i < cw.length; i++) {
animateLetterOut(cw, i);
}
for (var i = 0; i < nw.length; i++) {
nw[i].className = 'letter behind';
nw[0].parentElement.style.opacity = 1;
animateLetterIn(nw, i);
}
currentWord = (currentWord == wordArray.length-1) ? 0 : currentWord+1;
}
function animateLetterOut(cw, i) {
setTimeout(function() {
cw[i].className = 'letter out';
}, i*80);
}
function animateLetterIn(nw, i) {
setTimeout(function() {
nw[i].className = 'letter in';
}, 340+(i*80));
}
function splitLetters(word) {
var content = word.innerHTML;
word.innerHTML = '';
var letters = [];
for (var i = 0; i < content.length; i++) {
var letter = document.createElement('span');
letter.className = 'letter';
letter.innerHTML = content.charAt(i);
word.appendChild(letter);
letters.push(letter);
}
wordArray.push(letters);
}
changeWord();
setInterval(changeWord, 4000);
</script>
</body>
</html>
