首页 前端知识 【HTML样式】倾斜卡片 药丸加载动画 纸卷切换 水平播报等有创意的样式 每周更新

【HTML样式】倾斜卡片 药丸加载动画 纸卷切换 水平播报等有创意的样式 每周更新

2024-08-30 20:08:21 前端知识 前端哥 823 976 我要收藏

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>


转载请注明出处或者链接地址:https://www.qianduange.cn//article/17207.html
标签
评论
发布的文章

npm install 报错解决记录

2024-09-09 00:09:08

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!