h5c3经典动画案例

最新推荐文章于 2023-08-31 21:52:12 发布
最新推荐文章于 2023-08-31 21:52:12 发布
阅读量234 收藏
点赞数 3
文章标签： css html css3 html5 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_75016516/article/details/132461415
版权

01手风琴

    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        ul,
        li {
            list-style: none;
        }

        body {
            background-color: #efefef;
        }

        .content {
            padding: 20px;
            width: 800px;
            height: 125px;
            /* box-sizing: border-box; */
            border-radius: 10px;
            margin: 100px auto 0px;
            background-color: white;
            overflow: hidden;
        }

        .content ul {
            width: 120%;
            height: 100%;
        }

        .content ul li {
            /* (800-50)/6  */
            width: 125px;
            height: 125px;
            border-radius: 10px;
            overflow: hidden;
            float: left;
            margin-right: 10px;
            /* 过渡 */
            transition: all 1s;
        }

        .content ul li:last-child {
            margin-right: 0px;
        }

        .content ul li img {
            width: 575px;
            height: 100%;
        }

        .content:hover li {
            width: 35px;
        }

        .content ul li:hover {
            width: 575px;
        }
    </style>
</head>

<body>
    <div class="content">
        <ul>
            <li>
                <img src="../images/1.jpg" alt="">
            </li>
            <li>
                <img src="../images/2.jpg" alt="">
            </li>
            <li>
                <img src="../images/3.png" alt="">
            </li>
            <li>
                <img src="../images/4.jpg" alt="">
            </li>
            <li>
                <img src="../images/5.jpg" alt="">
            </li>
            <li>
                <img src="../images/6.jpg" alt="">
            </li>
        </ul>
    </div>
</body>

02小米商城

    <style>
        body {
            background-color: #f5f5f5;
        }

        .content {
            width: 234px;
            height: 300px;
            text-align: center;
            background-color: #fff;
            margin: 100px auto;

            /* /过渡 */
            transition: all 1s;
        }

        .content:hover {
            transform: translate(0px, -5px);
            box-shadow: 3px 10px 16px 0px #ccc;

        }

        .content img {
            width: 160px;
            height: 160px;
        }
    </style>
</head>

<body>
    <div class="content">
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202308081914_12255c6dc58e78e32afe9665b13fbaaa.png?thumb=1&w=200&h=200&f=webp&q=90"
            alt="">
    </div>
</body>

03风车

    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .content {
            width: 405px;
            height: 400px;
            margin: 100px auto;

            transition: all 30s;
        }

        .rod {
            position: absolute;
            width: 20px;
            height: 465px;
            border-radius: 10px;
            background-image: linear-gradient(to right bottom, #FF7F50, #FFD700);
            left: 50%;
            transform: translate(-63%, 193px);
            z-index: -1;
        }

        .content .top div,
        .content .bottom div {
            float: left;
        }

        .content .top {
            width: 100%;
            height: 200px;
        }

        .content .bottom .right,
        .content .top .left {
            width: 200px;
            height: 200px;
            /* 渐变色 */
            background-image: linear-gradient(to right bottom, skyblue, pink);
            /* border-radius: 左上角  右上角 右下角 左下角; */
            border-radius: 0px 200px 0px 200px;
        }



        .content .bottom .left,
        .content .top .right {
            width: 200px;
            height: 200px;
            /* 渐变色 */
            background-image: linear-gradient(to right top, skyblue, pink);
            /* border-radius: 左上角  右上角 右下角 左下角; */
            border-radius: 200px 0px 200px 0px;
        }

        .content .top .right {
            background-image: linear-gradient(to right bottom, #A0522D, #F0E68C);
        }

        .content .bottom .left {
            background-image: linear-gradient(to right top, aqua, springgreen);
        }

        .content .bottom .right {
            background-image: linear-gradient(to right top, #FF4500, #C71585);
        }

        .content:hover {
            transform: rotate(3600deg);
        }
    </style>
</head>

<body>
    <div class="rod"></div>
    <div class="content">
        <div class="top">
            <div class="left"></div>
            <div class="right"></div>
        </div>
        <div class="bottom">
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </div>
</body>

04-3d旋转

    <style>
        body {
            /* 透视 */
            perspective: 1000px;
        }

        .box {
            width: 400px;
            height: 600px;
            /* background-color: red; */
            margin: 100px auto;
            background-image: url(../images/liu.jpg);
            background-size: cover;
            background-repeat: no-repeat;
            transition: all 3s;

            /* 背部可见性 */
            backface-visibility: hidden;
        }

        .box:hover {
            /* transform: rotateX(180deg); */
            transform: rotateY(180deg);
            /* transform: rotateZ(180deg); */
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

05开门案例

   <style>
        /* 透视 */
        body {
            perspective: 1000px;
        }

        .content {
            width: 500px;
            height: 400px;
            border: 1px solid red;
            margin: 100px auto;
            /* 透视 父元素 */
            perspective: 1000px;

            position: relative;

            background-image: url(https://img0.baidu.com/it/u=1856123620,3576811447&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .content div {
            width: 50%;
            /* float: left; */
            height: 100%;
            background-image: url(../images/bg.png);
            transition: all 1s;
            position: absolute;
        }

        .content .left {
            top: 0px;
            left: 0px;
            /* 修改变形原点 */
            transform-origin: left center;
        }

        .content .right {
            top: 0px;
            right: 0px;
            /* 修改变形原点 */
            transform-origin: right center;
        }

        .content:hover .left {
            transform: rotateY(-100deg);
        }

        .content:hover .right {
            transform: rotateY(100deg);
        }
    </style>
</head>

<body>
    <div class="content">
        <!-- <h1>开门大吉</h1> -->
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

06-3d魔方

   <style>
        body {
            /* 透视 */
            perspective: 1000px;
        }

        .content {
            width: 300px;
            height: 300px;
            /* border: 1px solid red; */
            margin: 280px auto 0px;
            transform: rotateX(-30deg) rotateY(30deg);

            /* 保留3d效果 */
            transform-style: preserve-3d;
            transition: all 50s;
        }

        .content:hover {
            transform: rotateX(-3000deg) rotateY(3000deg);
        }

        .content .view {
            width: 300px;
            height: 300px;
            position: relative;

            /* 保留3d效果 */
            transform-style: preserve-3d;

        }


        .content .view div {
            width: 300px;
            height: 300px;
            position: absolute;
            text-align: center;
            line-height: 300px;
            color: white;
            font-size: 28px;
            transition: all 1s;
        }

        .content .view div:nth-child(1) {
            background-color: pink;
            transform: translateZ(150px);
        }

        .content .view div:nth-child(2) {
            background-color: skyblue;
            transform: rotateX(90deg) translateZ(150px);
        }

        .content .view div:nth-child(3) {
            background-color: purple;
            transform: rotateY(-90deg) translateZ(150px);
        }

        .content .view div:nth-child(4) {
            background-color: orange;
            transform: rotateY(90deg) translateZ(150px);
        }

        .content .view div:nth-child(5) {
            background-color: aqua;
            transform: rotateY(180deg) translateZ(150px);
        }

        .content .view div:nth-child(6) {
            background-color: springgreen;
            transform: rotateX(-90deg) translateZ(150px);
        }


        .content .view:hover div:nth-child(1) {
            transform: translateZ(200px);
        }

        .content .view:hover div:nth-child(2) {
            transform: rotateX(90deg) translateZ(200px);
        }

        .content .view:hover div:nth-child(3) {
            transform: rotateY(-90deg) translateZ(200px);
        }

        .content .view:hover div:nth-child(4) {
            transform: rotateY(90deg) translateZ(200px);
        }

        .content .view:hover div:nth-child(5) {
            transform: rotateY(180deg) translateZ(200px);
        }

        .content .view:hover div:nth-child(6) {
            transform: rotateX(-90deg) translateZ(200px);
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="view">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
        </div>
    </div>
</body>

07大商创案例

    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: red;
            margin: 100px auto;

            /* 起始位置 */
            transform: rotateZ(30deg);
            /* 改变变形原点 */
            transform-origin: right bottom;
            /* 透明 */
            opacity: 0;

            /* 应用动画 */
            animation: boxmove 2s ease 1;
            /* 动画之外的状态 */
            /* backwards 动画完成之后停留在第一帧 */
            /* forwards 动画完成之后停留在最后一帧 */
            animation-fill-mode: forwards;
        }

        /* 创建自定义动画 */
        @keyframes boxmove {
            form {
                transform: rotateZ(30deg);
                opacity: 0;
            }

            to {
                transform: rotateZ(0deg);
                opacity: 1;
            }
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

08自行车案例

    <style>
        img{
            width: 120px;
            height: 158px;
            /* 动画简写 */
            animation: carMove 5s linear 1;
        }

        @keyframes carMove{
            0%{
                transform: translateX(0px);
            }
            25%{
                transform: translateX(800px);
            }
            50%{
                transform: translateX(800px) rotateY(180deg);
            }
            75%{
                transform: translateX(0px) rotateY(180deg);
            }
            100%{
                transform: translateX(0px) rotateY(0deg);
            }
        }
    </style>
</head>
<body>
    <img src="../images/car.jpg" alt="">
</body>

09充电小球

    <style>
        body {
            background-color: #8B4513;
        }

        .circle {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background-color: #00FA9A;
            margin: 200px auto;
            box-shadow: 0px 0px 20px 5px #00FA9A;
            overflow: hidden;
            text-align: center;
            position: relative;
        }

        .circle span {

            z-index: 2;
            position: absolute;
            top: 34%;
            left: 9px;
        }

        .circle::after {
            content: "";
            display: block;
            width: 300px;
            height: 300px;
            border-radius: 120px;
            background-color: white;
            position: absolute;
            top: -142px;
            left: -100px;
            /* 应用动画 */
            animation: circleMove 10s linear 1 forwards;
        }

        @keyframes circleMove {
            from {
                transform: translateY(0px) rotate(0deg);
            }

            to {
                transform: translateY(-168px) rotate(1000deg);
            }
        }
    </style>

</head>

<body>
    <div class="circle">
        <span class="txt">当前电量: 0%</span>
    </div>

    <script>
        // 
        var txt = document.querySelector(".txt");
        var num = 0;
        var timerid = setInterval(function () {
            num += 0.1
            if (num >= 100) {
                clearInterval(timerid)
            } else {
                txt.innerHTML = "当前电量:" + num.toFixed(2) + "%";
            }
        }, 10)
    </script>
</body>

飞不起来的飞机耶耶耶
关注
重温前端基础（一） HTML、CSS、H5C3
←か淡定☆ ヾ 的博客
10-10 1702
目录0. WEB 标准构成1. HTML1.1 HTML概念1.2 超文本含义1.3 页面语言1.4 字符集1.5 标签语义化1.6 常用标签1.7 图像标签 img1.8 链接标签1.9 锚点定位 0. WEB 标准构成 构成： 主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。 标准 说明 结构 结构用于对网页元素进行整理和分类，咱们主要学的是HTML。 表现 表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS
H5C3进阶—HTML5+CSS3新增标签
luolin_forest的博客
06-09 376
CSS3 2D动画
HTML5 Canvas旋转动画的2个代码例子（一个旋转的太极图效果）
09-28
主要介绍了HTML5 Canvas旋转动画的2个代码例子,实现了一个旋转的太极图效果,学习HTML5 Canvas旋转动画的朋友可以参考下
一个不错的h5动画效果案例
热门推荐
飞翔的熊blabla
07-10 1万+
转自于https://github.com/supperjet/H5-Animation
精妙无比 8款HTML5动画实例及源码
weixin_30700977的博客
05-28 305
1、jQuery垂直带小图标菜单导航插件 今天我们要来分享一款jQuery菜单插件，这款jQuery菜单是垂直的样式，鼠标滑过菜单项时会出现一个背景，菜单项的右侧也会出现一个小箭头。另外值得注意的是，这款jQuery菜单的每一个菜单项都可以定义一些漂亮的小图标，确实是一款很实用的jQuery菜单，尽管外观不怎么华丽。 在线演示 源码下载 2、HTML5/CSS3图片网格动画特效 HT...
HTML5 小动画例子
lkycan的博客
03-14 2920
HTML 5 的小动画效果gif 录制可能有一些失帧，不过还是放出来看一下吧。这个效果做起来挺简单的。这里用到了几个小动画 。 1.宝剑从上面垂直插下来。（思路：先设定宝剑元素在屏幕上方，即修改y的值，也可以通过修改margin-top来实现） 2.“”寻“”字掉下来并且旋转。（思路：修改旋转角度和y或margin-top） 3.标题变大再缩小（思路：CSS3 中的 transform:sca
h5c3动画例子
01-02
使用html5+css3完成的网页设计作品
H5C3动画实例，通过基于jQuery的fullpage插件完成
Scrow1204的博客
12-20 716
要点： 1、素材是黑马程序员的，自己重写了下代码，主要是为了体会下h5c3。 2、环境 :     3、主要是加入了pullpage的插件特有的功能帮助开发，其中基于jQuery开发的插件，其定义的方法一般都是通过$.fn.插件名.方法来调用的。在pullpage中可以使用jQuery所有的方法，同时能跟pullpageAPI联合使用。其进入页面，离开页面，和页面渲染事件发生之后，提供了...
H5C3 第七天 canvas绘图
最新发布
zws977207074的博客
08-31 108
第一步：获得上下文（笔） =>canvasElem.getContext('2d');第二步：开始路径规划 =>cxt.beginPath();第三步：移动起始点 =>cxt.moveTo(x, y);第四步：绘制线(线条、矩形、圆形、图片...) =>cxt.lineTo(x, y);第五步：闭合路径 =>cxt.closePath();第六步：绘制描边 =>cxt.stroke();案例：通过上面所学的方法绘制一个三角形。
h5广告动画实例
10-13
简洁的案例，可以用来作为h5广告主流开发学习的基础资料
h5 实现视频动画效果
02-27
使用 纯h5 实现视频动画效果的代码 示例，减少浏览器的资源加载，适用于短片段的制作
一些炫酷的C3动画特效
10-17
包括最受欢迎的星际css3动画,夜间行走特效,翻书效果,还有程序员表白页面源码哦
webGL 3D动画效果结合HTML5的案例
09-06
webGL教程，十分全面包括了Threejs的使用，部署等操作。基于浏览器的动效，一般用于最新的谷歌浏览器适用性更强。
一个好看的h5场景动画
07-17
这是一个关于招聘的h5微场景页面，大家可以下载实践一下
加载动画（纯css+h5）小特效案例
weixin_65376296的博客
07-15 493
加载特效
效果奇特的HTML5动画,12个效果奇特的HTML5动画赏析
weixin_31076517的博客
06-08 614
本文将为大家分享12个效果奇特的HTML5动画，HTML5强大的动画特性可以让你的网页变得更加生动和富有活力，交互性也会进一步得到提高。一起来看看下面的这些HTML5动画案例，没个案例都提供源代码下载。1、HTML5 Canvas瀑布动画 超逼真这次我们来分享一款很酷的HTML5Canvas瀑布动画，瀑布动画非常逼真。整个瀑布动画像是从石头缝里流出来的溪水，然后沿着悬崖飞落下来，效果非常不错。 ...
【web素材】05—13款炫酷的HTML5实例动画
web前端开发
07-19 2376
素材整理| 杨小二前言在之前的文章中，我也跟大家分享过关于CSS3以及HTML5制作的一些动画效果，虽然这些动画效果，可能在实际项目中根本不会应用到，但是，我们通过这些练习，可以帮助我们...
html5动画在线示例,精妙无比 8款HTML5动画实例及源码
weixin_31720227的博客
05-31 446
原标题：精妙无比 8款HTML5动画实例及源码新的一周开始了，我们分享HTML5和CSS3的工作也将继续前行。今天要给大家带来8款精妙无比的HTML5动画实例，每一个动画演示都有源代码提供下载，非常方便大家学习HTML5的相关知识，一起来看看吧。1、基于HTML5 Canvas的图表插件Chart.jschart.js是一款基于HTML5 Canvas的图表插件，chart.js的功能非常强大，它...
还原当当网PC端布局与功能的H5C3+JS仿站教程
资源摘要信息:"仿当当网PC端demo源码H5C3+JS" 涵盖了前端开发的多个重要知识点。本项目旨在复制当当网PC端首页的设计和功能，使用了HTML5、CSS3和JavaScript技术栈。代码风格符合最新的前端开发标准，且在项目中使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

飞不起来的飞机耶耶耶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值