会跳动的图片

最新推荐文章于 2023-10-26 14:04:21 发布

零點壹度ideality

最新推荐文章于 2023-10-26 14:04:21 发布

阅读量970

点赞数 1

分类专栏： HTML5 文章标签： html5 图片前端

本文链接：https://blog.csdn.net/student9128/article/details/52928468

版权

HTML5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

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

<!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>