美文网首页
css简单动效

css简单动效

作者: 轻丨尘 | 来源:发表于2019-01-27 19:23 被阅读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
  • 模拟ios手机相册吸附效果
<!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

相关文章

  • css简单动效

    简单的css3动效 直接上代码 摆钟 景色动效 相册 模拟ios手机相册吸附效果

  • 值得收藏的CSS库

    Single Element CSS Spinners CSS3加载动效，经常会需要一些动效来表达系统处于加载或处...

  • 论状态动效中的信息传递

    首先我们简单的先将游戏内动效分为两类：“状态”动效和“行为”动效。状态动效：永远单向传递信息行为动效：动效基于交互...

  • css动效相关

    Duration and easing - Motion - Google design guidelines (...

  • 动效篇（3）－－CSS极简动效鉴赏与制作

    （一）牛人动效 （二）动效制作与详解（详解见代码块中的注释！！！） 1.搭建基本形状 HTML CSS 2.加入动...

  • CSS动画

    过渡 transition 属性 示例 参考： 动效落地方法 优秀的 CSS 交互动效示例 支持：nternet ...

  • 动效解决方案 Animate.css

    一、 Animate.css 是一个跨浏览器的动效基础库，是许多基础动效的解决方案。从经典的弹跳动效到独特的扭曲动...

  • CSS 推荐

    30 秒 CSS(一些 CSS 代码片段) cssfx(一些 css 动效代码片段) Box Shadow Gen...

  • 好玩的CSS动效~

    Loading动画-01 Loading动画-02 蚀刻文本 渐变字 悬停下划线动画 鼠标光标梯度跟踪 溢出滚动渐...

  • 返回顶部有动效且随着改变屏幕大小不会改变位置

    一般右下角的返回顶部按钮，点击后会返回顶部，但是没有动效，想要加上动效的话，除了用css html,body{ s...

网友评论

      本文标题：css简单动效

      本文链接：https://www.haomeiwen.com/subject/wwdnjqtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|css简单动效|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！