CSS hover背景变色文字弹出卡片动画效果

代码语言:html

所属分类:悬停

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
@keyframes mymove
        {
            from {
                margin-top: 40px;
            }
            to {
                margin-top: 15px;
            }
        }
        ​
@-webkit-keyframes mymove /*Safari and Chrome*/
        {
            from {
                margin-top: 40px;
            }
            to {
                margin-top: 15px;
            }
        }
@keyframes changecolor
        {
            from {
                background: white;
                color: blue;
            }
            to {
                background: blue;
                color: white;
            }
        }

@-webkit-keyframes changecolor /*Safari and Chrome*/
        {
            from {
                background: white;
                color: blue;
            }
            to {
                background: blue;
                color: white;
            }
        }
        .card {

            margin: 30px auto;
            background: white;
            color: blue;
            border: 1px solid grey;
            text-align: center;
            width: 200px;
            height: 100px;
            overflow: hidden;
        }
        .card .fa {
            margin-top: 40px;
        }
        .card p {.........完整代码请登录后点击上方下载按钮下载查看

网友评论0