css简单动效

2019-01-27  本文已影响0人  轻丨尘

简单的css3动效

直接上代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>弧形运动效果</title>
    <style>
        *{margin: 0;padding: 0;box-sizing: border-box}
        body{background: #222}
        .stage{width: 120px;height: auto;margin: 0 auto;position: relative;transform: rotate(-30deg);transform-origin: center top;animation:sway 2.2s infinite alternate ease-in-out}
        .watch{ width:100%;height:auto;}
        .seconds{position: absolute;width: 8%;height: auto;bottom: 11.5%;left: 45.5%;transform-origin: center 72.4%;animation:second 60s infinite linear}
        @keyframes sway{
            to{
                transform: rotate(30deg);
            }
        }
        @keyframes second{
            to{
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
<div class="stage">
    <img src="http://p0.qhimg.com/t0197c451833414523e.png" alt="钟表" class="watch"/>
    <img src="http://p9.qhimg.com/t0145f1ae8ad6753b05.png" alt="秒针" class="seconds">
</div>
</body>
</html>
摆钟.png 
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>css3 hover</title>
    <style>
        *{margin: 0;padding: 0;box-sizing: border-box}
        .demo,.img,.mask,.border{width: 300px;height: 300px}
        .demo{position: relative;display: inline-block;margin: 50px auto}
        .img{border-radius: 50%;background-repeat: no-repeat;background-size:cover;background-position:center;}
        .mask{position: absolute;top: 0;left: 0;border-radius: 50%;text-align: center;color:rgba(255,255,255,0);line-height: 300px;
            transition:all .5s ease-in;}
        .border{border: 10px solid #072256;border-left-color:#E07514;border-top-color:#E07514;position: absolute;top: 0;left: 0;
            border-radius: 50%;transition:all 0.5s ease-in }
        .demo:hover .mask{background: rgba(0,0,0,0.5);color:rgba(255,255,255,1);}
        .demo:hover .border{transform: rotate(180deg)}
    </style>
</head>
<body>
<a href="javascript:void(0)" class="demo">
    <div class="img" style="background-image:url(http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg)"></div>
    <div class="mask">
        <p>welcome to</p>
    </div>
    <div class="border"></div>
</a>
</body>
</html>
景色效果.png 
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>气泡loading效果</title>
    <style>
        *{margin: 0;padding: 0;box-sizing: border-box}
        body{background: #222;}
        .cardfan{width: 300px;height: 200px;margin: 2rem auto;}
        .cardfan img{position: absolute;border: 10px solid #fff;box-shadow: 4px 4px 3px rgba(0,0,0,0.2); transform-origin: center 400px;transition: transform 0.7s ease}
        .cardfan img:first-child{transform: rotate(5deg)}
        .cardfan:hover img:first-child{transform: rotate(25deg)}
        .cardfan img:last-child{transform: rotate(-5deg)}
        .cardfan:hover img:last-child{transform: rotate(-25deg)}
    </style>
</head>
<body>
<div class="cardfan">
    <img src="http://p3.qhimg.com/t0166077e858154cdb6.jpg" alt="" width="300" height="200"/>
    <img src="http://p7.qhimg.com/t01c9fca4f9a05cd8c4.jpg" alt="" width="300" height="200"/>
    <img src="http://p0.qhimg.com/t01fad64ae21ddd6221.jpg" alt="" width="300" height="200"/>
</div>
</body>
</html>
相册简单效果.png 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Iphone相册标题吸顶</title>
    <style>
        *{margin:0;padding: 0;box-sizing: border-box}
        ul,li{list-style: none}
        :root {
            font-size: calc(2vw + 1vh)
        }
        body {
            font-size: 1rem
        }
        .title{
            position: sticky;
            position: -webkit-sticky;
            top: 0;
            padding: 0.5rem;
            background: #fff;
        }
        .photo-list{
            display: flex;
            flex-wrap: wrap;
            padding: 0.5rem;
            padding-bottom: 0;
        }
        .photo-item{
            flex-basis:22%;
            margin-right: 1%;
            margin-bottom: 1%;
        }
        img{
            display: block;
            width: 100%;
        }
    </style>
</head>
<body>
<ul class="sticky-list">
    <li class="sticky-item">
        <div class="title">2018年1月1日</div>
        <ul class="photo-list">
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
        </ul>
    </li>
</ul>
<ul class="sticky-list">
    <li class="sticky-item">
        <div class="title">2018年2月1日</div>
        <ul class="photo-list">
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
        </ul>
    </li>
</ul>
<ul class="sticky-list">
    <li class="sticky-item">
        <div class="title">2018年3月1日</div>
        <ul class="photo-list">
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
        </ul>
    </li>
</ul>
<ul class="sticky-list">
    <li class="sticky-item">
        <div class="title">2018年4月1日</div>
        <ul class="photo-list">
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
        </ul>
    </li>
</ul>
<ul class="sticky-list">
    <li class="sticky-item">
        <div class="title">2018年5月1日</div>
        <ul class="photo-list">
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
        </ul>
    </li>
</ul>
<ul class="sticky-list">
    <li class="sticky-item">
        <div class="title">2018年6月1日</div>
        <ul class="photo-list">
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
        </ul>
    </li>
</ul>
<ul class="sticky-list">
    <li class="sticky-item">
        <div class="title">2018年7月1日</div>
        <ul class="photo-list">
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
        </ul>
    </li>
</ul>
<ul class="sticky-list">
    <li class="sticky-item">
        <div class="title">2018年8月1日</div>
        <ul class="photo-list">
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
        </ul>
    </li>
</ul>
<ul class="sticky-list">
    <li class="sticky-item">
        <div class="title">2018年9月1日</div>
        <ul class="photo-list">
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
        </ul>
    </li>
</ul>
<ul class="sticky-list">
    <li class="sticky-item">
        <div class="title">2018年10月1日</div>
        <ul class="photo-list">
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
            <li class="photo-item"><img src="http://ww3.sinaimg.cn/mw690/9c7cd2cdjw1e60hntjcq2j211y0lcq5e.jpg" alt=""/></li>
        </ul>
    </li>
</ul>
</body>
</html>
相册吸附效果.png
上一篇下一篇

猜你喜欢

热点阅读