css实现卡片悬浮填充颜色动画效果代码-html代码-BFW代码库

css实现卡片悬浮填充颜色动画效果代码

代码语言：html

所属分类：悬停

代码描述：css实现一个文字卡片鼠标悬浮上去颜色从右侧填充值左侧动画效果代码。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        @import url("https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=devanagari,latin-ext");
        	* {
        	padding:0;
        	margin:0;
        	box-sizing:border-box;
        	font-family:"Poppins",sans-serif
        }
        body {
        	background-color:#343a40;
        	display:flex;
        	justify-content:center;
        	align-items:center;
        	min-height:100vh;
        	user-select:none
        }
        .card {
        	border-radius:10px;
        	filter:drop-shadow(0 5px 10px 0 #fff);
        	width:400px;
        	height:180px;
        	background-color:#fff;
        	padding:20px;
        	position:relative;
        	z-index:0;
        	overflow:hidden;
        	transition:.6s ease-in
        }
        .card::bef.........完整代码请登录后点击上方下载按钮下载查看