web前端：按钮转化变色，阴影box-shadow使用,动画属性transform:translate(-x,-y)居中样式

最新推荐文章于 2024-06-29 20:30:00 发布

cevent

最新推荐文章于 2024-06-29 20:30:00 发布

阅读量320

点赞数

分类专栏：微信小程序文章标签： css html css3 js less

本文链接：https://blog.csdn.net/weixin_37056888/article/details/112160011

版权

微信小程序专栏收录该内容

28 篇文章 0 订阅

订阅专栏

1.less

* {
    margin: 0;
    padding: 0;
    body {
        a {
            //a标签不可以设置宽高，需要display：inline-block
            display: inline-block;
            //未知宽高下居中使用trnasform:translate(x,y)
            width: 100px;
            height: 30px;
            //原本装饰样式decoration为none
            text-decoration: none;
            position: absolute;
            background: skyblue;
            text-align: center;
            font: 20px/30px "微软雅黑";
            font-weight: bold;
            color: white;
            border: 1px solid darkcyan;
            //阴影:box-shadow:x-px , y-px ,模糊程度？px #color 
            box-shadow: 2px 2px 5px #4682B4;
            /**
                                        新居中方法
             1. top、height：百分比参照包含块的高度
             2. lefe、margin、padding、width：百分比参照包含块的宽度
             3. translate(-50%,-50%)：百分比参照自身元素的宽高
             4. background、position：百分比参照，图片区域--》图片位图的像素值
             */
            top: 50%;
            left: 50%;
            //定位点在元素自身的宽高--》兼容性不高
            transform: translate(-50%, -50%);
            margin: auto;
            transition: 1.5s;
        }
        &:hover a {
            color: white;
            background: steelblue;
        }
    }
}

2.css

* {
  margin: 0;
  padding: 0;
}
* body a {
  display: inline-block;
  width: 100px;
  height: 30px;
  text-decoration: none;
  position: absolute;
  background: skyblue;
  text-align: center;
  font: 20px/30px "微软雅黑";
  font-weight: bold;
  color: white;
  border: 1px solid darkcyan;
  box-shadow: 2px 2px 5px #4682B4;
  /**
                                        新居中方法
             1. top、height：百分比参照包含块的高度
             2. lefe、margin、padding、width：百分比参照包含块的宽度
             3. translate(-50%,-50%)：百分比参照自身元素的宽高
             4. background、position：百分比参照，图片区域--》图片位图的像素值
             */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
  transition: 1.5s;
}
* body:hover a {
  color: white;
  background: steelblue;
}

3.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>light button高亮按钮</title>
	</head>
	<body>
		<a href="javascript:;">Home</a>
	</body>
	<link rel="stylesheet" href="css/less024.css" />
</html>

4.效果图

cevent

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端：按钮转化变色，阴影box-shadow使用,动画属性transform:translate(-x,-y)居中样式

1.less* { margin: 0; padding: 0; body { a { //a标签不可以设置宽高，需要display：inline-block display: inline-block; //未知宽高下居中使用trnasform:translate(x,y) width: 100px; height: 30px;
复制链接

扫一扫

专栏目录