会跳动的图片

前端 HTML 评论

目前HTML5比较流行，Android+H5开发也比较常见，所以想看看H5的知识。由于没有基础，只能从头学起。这里在视频网址看到一个会跳动的图片。感觉挺好的，自己记录一下。
下面是效果图：

废话不多说，直接上代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跳动的图片</title>
    <style type="text/css">
        /*所有浏览器左上角的margin和padding为0*/
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 500px;
            height: 500px;
            border: 1px gray solid;
            margin: 50px auto; /*自动适应屏幕，距离上边界50px*/
            transform-style: preserve-3D; /*div里面显示的效果是3D*/
            perspective: 1200px;
        }

        .h5 {
            width: 300px;
            height: 300px;
            /*border: 1px blue solid;*/
            display: block; /*block 块的意思*/
            margin: 50px auto; /*auto是左右居中*/
            /*背景图的宽和高300px 437px*/
            /*0px 0px表示偏移量*/
            background: url(img/ke1.png) 0px 0px / 300px 300px no-repeat;
        / / 设置背景 -webkit-box-shadow: inset hoff voff blur color;
            box-shadow: -7px 10px 10px #333; /*添加阴影*/
            transform: rotateX(60deg) rotateY(3deg) rotateZ(-25deg); /*旋转效果*/
            transition: all 1s ease-out; /*慢速结束*/

        }

        .h5:hover {
            transform: rotate3D(0, 0, 0, 0deg); /*鼠标移动上去，选择变为0度*/
            box-shadow: -100px 100px 10px #fff; /*阴影*/
        }
    </style>
</head>
<body>
<div class="container"><a class="h5" href=""></a></div>
</body>
</html>

代码下载

KevinAndroid developer

个人简介。