帧动画和过渡动画

帧动画


<html>
    <head>
        <meta charset="UTF-8">
        <title>帧动画title>
        
        <style type="text/css">
            .zhen{
                background: red;
                width: 60px;
                height: 60px;
            }
            @-webkit-keyframes demo{
                from{
                    background: red;
                }
                20%{
                    background: blue;
                }
                50%{
                    background: yellow;
                }
                to{
                    background: green;
                }
            }
            .zhen:hover{
                animation: 2s demo;
            }
        style>
    head>
    <body>

        <div class="zhen">

        div>

    body>
html>

过渡动画


<html>
    <head>
        <meta charset="utf-8" />
        <title>过渡动画title>

        
        <style type="text/css">
        *{
            margin: 0 auto;
            padding: 0;
        }
            .logo:hover{
                transform: rotate(360deg) scale(2);
            }
            .logo{
                transition: all 3s ease-in-out;
                margin: 0 auto;
                width: 200px;
                height: 300px;
                margin-left: 500px;
            }
            ul{
                float: left;
                width: 100%;
                height: 400px;
                list-style: none;
            }
            ul li{
                width: 200px;
                height: 300px;
                float: left;
                padding-left: 10px;
            }
            img{
                transition: all 2s ease;
            }
            img:hover{
                transform: rotate(360deg);
            }
        style>
    head>
    <body>
        
        <img src="img/a8.jpg" class="logo"/>
        <ul>
            <li><img src="img/a8.jpg"/>li>
            <li><img src="img/a8.jpg"/>li>
            <li><img src="img/a8.jpg"/>li>
            <li><img src="img/a8.jpg"/>li>
            <li><img src="img/a8.jpg"/>li>
        ul>
        <ul>
            <li><img src="img/a8.jpg"/>li>
            <li><img src="img/a8.jpg"/>li>
            <li><img src="img/a8.jpg"/>li>
            <li><img src="img/a8.jpg"/>li>
            <li><img src="img/a8.jpg" style=""/>li>
        ul>
    body>
html>

你可能感兴趣的:(前端h5,css3,javascript...)