按键动态颜色加深、提亮、颜色变化+css中opacity属性使用方法

最新推荐文章于 2024-05-01 12:01:29 发布

盛小鱼er

最新推荐文章于 2024-05-01 12:01:29 发布

阅读量474

点赞数 1

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_63937626/article/details/131472968

版权

在目前css与html学习中，我仅学到了使用opacity 在css中实现动态改变按键的明暗度。

- 按键变深

效果图：

按键变深

实现方式：在dw中创建html文件与css文件，在新建HTML中通过左上角“文件”--“附加样式表”信件的css文件。

<html lang="en">
				<head>
					<meta charset="UTF-8">
					<meta name="viewport" content="width=device-width, initial-scale=1.0">
					
					<link href="页面名字.css" rel="styleSheet" type="text/css" />
				</head>
					</html>

					<div>
							<center>
							<a class="btn btn-1" >Name 1</a>
							<a class="btn btn-2">Name 2</a>
							<a class="btn btn-3">Name 3</a>
							<a class="btn btn-4">Name 4</a>
							
							</center>
						</div>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

div {
    margin: 10px;
}

a {
    outline: 0;
    text-decoration: none;
    cursor: pointer;
}

.btn {
    padding: 15px 20px; /*按键长宽定义*/
    background:#5F8365;/*原底色*/
    box-shadow: 0 10px 7px rgba(127, 127, 127, .3);/*按键阴影，可自己调试*/
    display: inline-block;
    color: #fff;/*字体颜色*/
    font-size: 20px;/*字体大小*/
    border-radius: 14px;/*按键框圆角大小*/
    transition: all 0.3s;/*按键框颜色变化速度*/
    margin: 14px;/*按键框之间距离*/
}
.btn-1 {
    opacity: .8;
}

.btn-1:hover {
    opacity: 1;
}
.btn-2 {
    opacity: .8;
}

.btn-2:hover {
    opacity: 1;
}
.btn-3 {
    opacity: .8;
}

.btn-3:hover {
    opacity: 1;
}
.btn-4 {
    opacity: .8;
}

.btn-4:hover {
    opacity: 1;
}

opacity属性设置0（完全透明）到1（完全不透明）
具体可以自己调试

- 按键提亮

效果图：
按键提亮
实现方式：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    
</head>
	</html>
<body>
    <div>
		
		<center>
        <a class="btttn btttn-1">查看更多</a>
        
        </center>
		
    </div>
	</body>


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

div {
    margin: 0;
}

a {
    outline: 0;
    text-decoration: none;
    cursor: pointer;
}

.btttn {
    padding: 10px 100px;
    background:#CC9000;
    box-shadow: 0 10px 7px rgba(127, 127, 127, .3);
    display: inline-block;
    color:#FFFFFF;
    font-size: 16px;
	transition:  0.3s;
    border-radius: 44px;
	
    margin: 55px;
}
.btttn-1:hover {
    filter: brightness(1.3);
}

- 按键变色

效果图：

按键变色

实现方式：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>尝试</title>	
<style type="text/css">
@import url("尝试.css");/*用附加样式表导入你的css*/
</style>
	
</head>

<body>
	
	<div>
		<center>
        <a class="btn btn-1" >首页</a> //用class定义名字
        <a class="btn btn-2" >院系专业</a>
		</center>
    </div>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	
</body>
</html>

@charset "utf-8";
/* CSS Document */

/* 按键变色 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

div {
    margin: 0;
}

a {
    outline: 0;
    text-decoration: none;
    cursor: pointer;
}

.btn {
    padding: 20px 26px;
    background:#FFFFFF;
    box-shadow: 0 10px 7px rgba(127, 127, 127, .3);
    display: inline-block;
    color:#040404;
    font-size: 16px;
	transition:  0.3s;
    border-radius: 14px;
    
    margin: 14px;
}
.btn-1:hover {
	background:#23126C;/*定义按键变化的颜色*/
	color:#FFFFFF;/*定义按键变化后字体颜色*/
}
.btn-2:hover {
	background:#7C7FB1;
	color:#FFFFFF;

}