简单css3动画效果练习

最新推荐文章于 2022-03-05 22:36:16 发布

伪伪的喵喵

最新推荐文章于 2022-03-05 22:36:16 发布

阅读量1.8k

点赞数

分类专栏：前端练习文章标签： css3 动画

本文链接：https://blog.csdn.net/qq_32392057/article/details/60142062

版权

前端练习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

简单css3动画效果练习

知识点

简单伪元素的使用
布局练习
动画效果练习

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="../reset.css">
    <!-- <link href="https://fonts.googleapis.com/css?family=Bungee" rel="stylesheet"> -->
    <style>
        body {
            background: #ccc;
        }
        .demo {
            height: 200px;
            width: 300px;
            left: calc(50% - 150px);
            top: calc(50% - 100px);
            position: absolute;
            background-color: #333333;
            background: -moz-radial-gradient(rgba(121, 121,121, 0.5) 5%, rgba(51,51,51,0.7) 50%, rgba(0, 0, 0, 0.8));
            border-radius: 10px;
            cursor: pointer;
            text-align: center;
            overflow: hidden;

        }
        .demo span {
            color: #ffffff;
            font-family: 'Bungee', cursive;
            font-size: 25px;
            text-shadow: 2px 1px 1px gray;
            position: relative;
            top:-30px;
            transition: top 0.2s ease;
            -webkit-transition: top 0.2s ease;
            z-index: 10;
        }
        .demo:hover span{
            top:25px;
            transition: top 0.2s ease 0.2s;
            -webkit-transition: top 0.2s ease 0.2s;
        }
        .demo::before {
            content: '';
            height: 40px;
            width: 40px;
            border-radius: 50%;
            background-color: #339966;
            position: absolute;
            top: calc(50% - 20px);
            left: -100px;
            z-index: 1;
        }
        .demo::after {
            content: '';
            height: 30px;
            width: 30px;
            border-radius: 50%;
            background-color: #ff3333;
            position: absolute;
            top: calc(50% - 15px);
            left: 350px;
            z-index: 1;
        }
        @keyframes lefZoom {
            0% {
                left: -100px;
                transform: scale(1);
                background-color: #339966;
                opacity: 1;
            }
            35% {
                left: calc(50% - 20px); 
                transform: scale(1);
                background-color: #339966;
                opacity: 0.8;
            }
            40% {
                left: calc(50% - 10px); 
                transform: scale(1);
                background-color: #993366;
                opacity: 0.5;
            }
            100% {
                left: calc(50% - 5px);
                transform: scale(10);
                background-color: #993366;
                opacity: 0.8;
            }
        }
        @keyframes rigZoom {
            0% {
                left: 350px;
                opacity: 1;
            }
            35% {
                left: calc(50% + 0px);  
                opacity: 0.8;
            }
            40% {
                left: calc(50% - 5px);  
                opacity: 0.5;
            }
            100% {
                left: calc(50% - 5px);
                opacity: 0;
            }
        }
        .demo:hover::before {
            /*left: calc(50% - 20px);
            transition: left 0.2s ease;*/
            animation: lefZoom 0.7s ease 0.1s;
        }
        .demo:hover::after {
            animation: rigZoom 0.7s ease 0.1s;
        }
        .demo:hover {
            background-color: #993366;
            transition: background-color 0.2s ease 0.6s;
        }
    </style>
</head>
<body>
    <div class="demo">
        <span>demo</span>   
    </div>
</body>
</html>