css动画倾斜设置按钮背景填满

Love The Way You Lie 2021-07-25 01:12 363阅读 0赞

代码示例:

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	<link rel="stylesheet" href="./index.css">
    	<style>
    
    		.btn{ 
    			text-decoration: none;
    			border: solid 5px orange;
    			position: relative;
    			overflow: hidden;
    		}
    		.btn::after{ 
    			content: '';
    			width: 0;
    			height: 100%;
    			position: absolute;
    			transform: skewX(45deg);
    			background-color: #8A2BE2;
    			left: -50%;
    			z-index: -1;
    			transition:.5s;
    		}
    		.btn:hover::after{ 
    			width: 200%;
    			
    		}
    			
    	</style>
    	</head>
    	<body class='me'>
    		<div class='box'>
    
    			<a href="" class='btn'>按钮</a>
    		</div>
    
    	</body>
    </html>

效果图:  
![在这里插入图片描述][20200619203129430.png]![在这里插入图片描述][2020061920314225.png]

[20200619203129430.png]: https://img-blog.csdnimg.cn/20200619203129430.png
[2020061920314225.png]: /images/20210724/d4589f1772934ec59d2ed0a6b6b26a88.png

发表评论取消回复

表情：

评论列表（有 0 条评论，363人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS 发光按钮悬停动画

CSS 发光按钮悬停动画 ![在这里插入图片描述][f0ab3728486e4032bda8cfc73f55c638.gif_pic_center] CSS 发光按钮悬停动

末蓝、/ 2023年10月14日 14:30/ 0 赞/ 66 阅读

相关 css背景透明(css背景透明度怎么设置)

CSS 背景颜色透明怎么弄外层div: background-color: rgba(255, 255, 255, 0.9); /\ 白色并且阿尔法通道是0.9\/

我会带着你远行/ 2023年09月26日 13:14/ 0 赞/ 24 阅读

相关 CSS——设置背景

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">

Myth丶恋晨/ 2023年08月17日 16:10/ 0 赞/ 134 阅读

相关 css动画呼吸的按钮

animation: animat 1.1s infinite; @keyframes animat { 0%{ transform:

心已赠人/ 2023年02月21日 02:29/ 0 赞/ 25 阅读

相关 CSS背景铺满全屏

html { background: url(images/bg.png) no-repeat center center fixed; -webkit-backgro

Love The Way You Lie/ 2022年08月18日 11:41/ 0 赞/ 206 阅读

相关 css设置背景

css2设置背景相关属性有如下： background : 简写属性，作用是将背景属性设置在一个声明中。 background-color : 设置元素的背景颜色。

小咪咪/ 2022年06月06日 02:24/ 0 赞/ 316 阅读

相关 css背景图设置

.bgImg1\{width: 200px; height: 500px; border: 1px solid \999; background-image: ur

Bertha 。/ 2022年06月05日 00:54/ 0 赞/ 265 阅读

相关 css背景铺满

html { background: url(bg.jpg) no-repeat center center fixed; -webkit-background-siz

Bertha 。/ 2022年06月03日 08:46/ 0 赞/ 245 阅读

相关 css 背景样式设置

背景颜色设置 background-color:red background-color:rgba(x,x,x,透明度) 设置背景

迷南。/ 2021年07月25日 01:18/ 0 赞/ 598 阅读

相关 css动画倾斜设置按钮背景填满

代码示例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti

Love The Way You Lie/ 2021年07月25日 01:12/ 0 赞/ 364 阅读