当前位置： 移动技术网 > IT编程>网页制作>CSS > 2020-08-09

2020-08-09

2020年08月10日  | 移动技术网IT编程  | 我要评论
项目介绍，这是一个unity阅读器的项目，模仿生活中的书籍，githup链接：Ui介绍：登录界面：整体色调为蓝色 ，背景蓝色的海底加光影，主题部分背景为圆角半透明矩形，内容有账号和密码这两个输入框，和登录和注册这个按钮，按下登录按钮就会进入我们阅读的房间，按下注册按钮就会转跳到注册界面。阅读界面：阅读界面由一本书和三个按钮构成，书籍我采用了羊皮纸的复古风，护眼又美观。按钮分别为取消按钮（退出阅读界面），设置按钮（设置书本中字体的样式和大小），书架按钮（选择书籍）。设置界面：设置界面我加入了相框的

纯css动画-小熊奔跑案例

代码：

<style>
        body {
            background-color: #ccc;
        }
        
        div {
            position: absolute;
            width: 200px;
            height: 100px;
            background: url(pictures/bear.png) no-repeat;
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
            animation: bear .4s steps(8) infinite, move 3s forwards;
        }
        
        @keyframes bear {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -1600px 0;
            }
        }
        
        @keyframes move {
            0% {
                left: 0;
            }
            100% {
                left: 50%;
                transform: translateX(-50%);
            }
        }
    </style>

结果：

小熊奔跑
小熊奔跑案例-取材百度浏览器-参考哔哩哔哩Pink老师

 

本文地址：https://blog.csdn.net/weixin_43577209/article/details/107900027

您可能感兴趣的文章:

如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网