css动画模板

最新推荐文章于 2024-11-04 14:16:34 发布

激进的土豆

最新推荐文章于 2024-11-04 14:16:34 发布

阅读量260

点赞数 1

分类专栏： html+css+js 文章标签： css html javascript

本文链接：https://blog.csdn.net/weixin_49627122/article/details/126512280

版权

html+css+js 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

1.幽灵按钮：鼠标悬停改变按钮样式

2.360软件管家LOGO：

3.Google文字图标:

1.幽灵按钮：鼠标悬停改变按钮样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>幽灵按钮</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        body{
            background: #666;
        }

        .btn{
            width: 200px;
            height: 50px;
            background-color: mediumblue;
            text-align: center;
            line-height: 50px;

            position: relative;
        }
        .btn a{
            text-decoration: none;
            color: #fff;
            font: bold 20px Arial;
        }
        
        .btn-border-top, .btn-border-bottom{
            height: 5px;
            background-color: #fff;
            position: absolute;
            width: 0;
        }

        .btn-border-top{
            right: 0;
            top: 0;
        }

        .btn-border-bottom{
            left: 0;
            bottom: 0;
        }

        .btn:hover .btn-border-top{
            transition: .3s;
            width: 100%;
            background-color: mediumblue;
        }
        .btn:hover .btn-border-bottom{
            transition: .3s;
            width: 100%;
            background-color: mediumblue;
        }

        .btn:hover{
            background-color: #fff;
        }
        .btn:hover a{
            color: mediumblue;
        }

        .btn-group{
            width: 700px;
            display: flex;
            justify-content: space-between;
            margin: 100px 0 0 100px;
        }
    </style>
</head>
<body>
    <div class="btn-group">
        <div class="btn">
            <div class="btn-border-top"></div>
            <a href="#;">HTML5</a>
            <div class="btn-border-bottom"></div>
        </div>
        <div class="btn">
            <div class="btn-border-top"></div>
            <a href="#">CSS3</a>
            <div class="btn-border-bottom"></div>
        </div>
        <div class="btn">
            <div class="btn-border-top"></div>
            <a href="#">Javascript</a>
            <div class="btn-border-bottom"></div>
        </div>
    </div>
</body>
</html>

2.360软件管家LOGO：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div {
                width: 200px;
                height: 200px;
                display: inline-block;
            }
            .div1,.div4{
                border-bottom-left-radius: 50%;
                border-top-right-radius: 50%;
            }
            .div2,.div3{
                border-bottom-right-radius: 50%;
                border-top-left-radius: 50%;
            }
            /* 区块属性：定义一个元素的显示方式 */
            .div1{
                background-color: green;
            }
            .div2 {
                background-color: blue;
            }
            .div3 {
                background-color: yellow;
            }
            .div4 {
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="div1"></div>
        <div class="div2"></div><br>
        <div class="div3"></div>
        <div class="div4"></div>
    </body>
</html>

3.Google文字图标:

主要考虑的是e旋转的问题，因为谷歌的e是斜着的.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        p{
            font-size: 80px;  /*字体大小*/
            letter-spacing: -2px; /*字母间距*/
            /*font-weight:900;*/  /*加粗*/
            font-family:Ebrima,Arial,Helvetica, Sans-Serif;
        }
        span.g{
            color: rgb(66,133,244);
        }
        span.o1{
            color: rgb(234,67,53);
        }
        span.o2{
            color: rgb(251,188,5);
        }
        span.l{
            color: rgb(52,168,83);
        }
        span.e{
            color: rgb(234,67,53);
            display:inline-block;   /*设置元素旋转*/
            transform:rotate(-15deg);

        }
        
    </style>
</head>
<body>
    <p><span class="g">G</span><span class="o1">o</span><span class="o2">o</span><span class="g">g</span><span class="l">l</span><span class="e">e</span></p>
</body>
</html>

未完待续。。。