收藏=学会,学到=赚到
空闲时间,会继续更新的哦,点赞关注不迷路
一)文字进入不同背景色,呈现不同颜色
通过差值算法(mix-blend-mode)
效果图
代码
<!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>
.title {
color: #fff;
font-size: 3em;
transition: 0.5s;
/*差值算法*/
mix-blend-mode: difference;
}
.banner:hover .title {
transform: translateX(355px);
}
.banner {
margin: auto;
width: 80%;
padding: 0 20px;
border: 2px solid;
line-height: 8rem;
background: linear-gradient(45deg, #fff 0 50%, #000 50% 100%);
}
</style>
</head>
<body>
<div class="banner">
<div class="title">
不忘初心,方得始终
</div>
</div>
</body>
</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 {
padding: 50vh 0;
text-align: center;
font-size: 4em;
background: url('./image/image.png') center/100vw no-repeat;
}
h1 {
background: linear-gradient(180deg, #f30a0a 0 50%, #e88a8a00 50% 100%) center center/100vw 100vh fixed;
background-clip: text;
/* center center居中 100vw 100vh大小 fixed固定在视口中*/
-webkit-background-clip: text;
color: transparent;
/*文字自己的颜色*/
-webkit-text-stroke: 2px #f30a0a;
/*描边*/
}
</style>
</head>
<body>
<h1>
不忘初心,方得始终
</h1>
</body>
</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>
.card {
width: 550px;
font-size: 1.5em;
margin: auto;
background: repeating-linear-gradient(45deg, #f7b449 0 10px, #fff 10px 20px, rgb(0, 136, 255) 20px 30px, #fff 30px 40px) -20% 0%/200% 200%;
padding: 5px;
border-radius: 10px;
transition: 0.5s;
}
.card:hover {
background-position: 0 0;
box-shadow: 5px 5px 5px rgb(191, 190, 190);
}
.container {
background: #fff;
padding: 10px;
border-radius: inherit;
}
</style>
</head>
<body>
<div class="card">
<div class="container">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel pariatur consequuntur vero optio ullam dicta
similique, ipsum voluptate corporis laboriosam. Eum facere repellendus animi eos sit voluptatibus pariatur saepe
hic.
</div>
</div>
</body>
</html>