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

Love The Way You Lie 2021-07-25 01:12 431阅读 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 条评论，431人围观）

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

相关阅读

相关 CSS 发光按钮悬停动画

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

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

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

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

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

相关 CSS——设置背景

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

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

相关 css 背景色动画

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

向右看齐/ 2023年03月14日 13:20/ 0 赞/ 25 阅读

相关 css动画呼吸的按钮

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

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

相关 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 赞/ 280 阅读

相关 css设置背景

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

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

相关 css背景铺满

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

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

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

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

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

相关 css动画提交按钮省略号加载动画

做法: 给按钮的文字添加伪类,然后利用阴影是移动和原本元素大小相同的原理在动画中依次添加多个水平方向移动的阴影代码示例: <!DOC

不念不忘少年蓝@/ 2021年07月24日 19:58/ 0 赞/ 574 阅读