CSS3 animation的简单使用

作者: 你这个锤子 | 来源:发表于2023-03-26 20:49 被阅读0次

H5动画效果
CSS3动画
网页高级知识点（三）
CSS3 Animation
用css实现幻灯片效果
css3学习笔记
2017-06-18
ajax请求等候效果
前端之路——在less中创建动画
CSS3 animation动画

例子1效果描述:按钮循环滑过闪亮栅格条
例子2效果描述:按钮上浮并放大(动一下)
效果图

效果图片段.png

例子1 css

       .ccc{
            width: 120px;
            height: 40px;
            overflow: hidden;
            margin:30px 0;
            position: relative;
        }
        .ccc div {
            width: 120px;
            height: 40px;
            border-radius: 4px;
            text-align: center;
            line-height: 40px;
            color: #333333;
            background-color: #ecec29;
        }
        .ccc i {
            width: 30px;
            height: 100px;
            display: block;
            position: absolute;
            z-index: 3;
            border-left: 16px solid #fff;
            border-right: 8px solid #fff;
            opacity: .5;
            left: 0;
            top: -20px;
            -webkit-transform: rotate(20deg); /* Chrome, Safari, Opera */
            transform: rotate(20deg);
            animation: mymove 5s infinite;
            -webkit-animation: mymove 5s infinite; /* Safari 和 Chrome */
        }
        @keyframes mymove
            { from {left:-60px;} to {left:150px;} }
        @-webkit-keyframes mymove /*Safari and Chrome*/
            { from {left:-60px;} to {left:150px;} }

    <div class="ccc">
        <div>参加会议</div>
        <i></i>
    </div>

例子2

        .bbb {
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            background: #ecec29;
            -webkit-transition: width 2s, height 2s, -webkit-transform 1s;
            transition: width 2s, height 2s, transform 1s;
        }
        .bbb:hover {
            width: 102px;
            height: 102px;
            box-shadow: 0 12px 8px r gba(191, 191, 191, .2);
            transform: translateY(-4px);
        }

    <div class="bbb">确定</div>