css渐变玩法以及单边阴影

关键因素XFactor

已于 2024-05-27 20:23:46 修改

阅读量316

点赞数 1

分类专栏： CSS 文章标签： css 前端 html

于 2023-01-10 17:42:30 首次发布

本文链接：https://blog.csdn.net/weixin_52923266/article/details/128632925

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

渐变

1.渐变内容逐渐隐藏

看一下效果图

直接上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	    <style>
		    #box {
			    width: 200px;
			    height: 100px;
			    text-align: center;
			    line-height: 100px;
			    background: linear-gradient(to right,pink,rgba(255,255,255,0));
		    }
	    </style>
    </head>
	<body>
		<div id="box">银色子弹</div>
	</body>
</html>

2.渐变背景动态切换

看一下效果图

直接上代码

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body {
				margin: 0;
				width: 100%;
				height: 100vh;
				display: flex;
				justify-content: center;
				align-items: center;
				color: white;
				background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
				background-size: 400% 400%;
				animation: gradientBG 10s ease infinite;
			}
			@keyframes gradientBG {
				0% {
					background-position: 0% 50%;
				}
				50% {
					background-position: 100% 50%;
				}
				100% {
					background-position: 0% 50%;
				}
			}
		</style>
	</head>
	<body>
		<h1>第二名意味着你是头号输家</h1>
	</body>
</html>

单边阴影

box-shadow: 0px -7px 7px -7px red //上阴影
box-shadow: 0px 7px 7px -7px red //下阴影
box-shadow: 7px 0px 7px -7px red //右阴影
box-shadow: -7px 0px 7px -7px red //左阴影

内阴影

box-shadow: inset 0px 0px 26px 0px rgba(0, 145, 255, 1);

色彩的差值混合

color: #fff;
mix-blend-mode: difference;

关键因素XFactor

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css渐变玩法以及单边阴影

css渐变非常常用,比较炫酷,接来下我给大家分享两种玩法.
复制链接

扫一扫

专栏目录

css渐变玩法以及单边阴影

“相关推荐”对你有帮助么？