h5+正方体3D旋转+2个园互相转圈+下拉栏+来回忽闪+html旋转动画+补间动画+双飞翼布局+对话框那个三角

最新推荐文章于 2021-03-23 12:35:55 发布
最新推荐文章于 2021-03-23 12:35:55 发布
阅读量919 收藏 1
点赞数
分类专栏： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dangai0201/article/details/77793697
版权

正方体3D旋转html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            position: relative;
            width: 200px;
            height: 200px;
            transform-style: preserve-3d;
            margin: 250px auto;
            animation: run 5s infinite linear;
        }
        li{
            list-style: none;
            width:200px;
            height: 200px;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0.4;
        }
        li:first-child{
            background: red;
            transform: translateZ(100px)
        }
        li:nth-child(2){
            background: green;
            transform: translateY(-100px) rotateX(90deg);
        }
        li:nth-child(3){
            background: pink;
            transform: translateY(100px) rotateX(90deg);
        }
        li:nth-child(4){
            background: orange;
            transform: translateX(-100px) rotateY(90deg);
        }
        li:nth-child(5){
            background: blue;
            transform: translateX(100px) rotateY(90deg);
        }
        li:nth-child(6){
            background: blue;
            transform: translateZ(-100px);
        }
        @keyframes run {
            0%{
                transform:rotateX(0deg) rotateY(0deg);
            }
            100%{
                transform:rotateX(360deg) rotateY(360deg);
            }
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>

</body>
</html>

2个园互相旋转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .bigCircle{
            width: 200px;
            height:200px;
            border-radius: 50%;
            background: rgba(0,0,0,.5);
            position: relative;
            animation: rotate 4s infinite linear;
            margin: 100px auto;
        }
        .smCircle{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: rgba(255,0,0,.6);
            animation: run 4s infinite linear;
            margin: 0 auto;
        }
        @keyframes run {
            0%{
                transform: rotate(0deg);
            }
            100%{
                transform: rotate(180deg);
            }
        }
        @keyframes rotate {
            0%{
                transform: rotate(0deg);
            }
            100%{
                transform: rotate(-360deg);
            }
        }
    </style>
</head>
<body>
<div class="bigCircle">
    转
</div>
<div class="smCircle">倒转</div>


</body>
</html>

html下拉栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        .clear:after{
            content:"\200B";
            display: block;
            clear: both;
            width: 0;
            height: 0;
        }
        li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        .item{
            float: left;
            width: 300px;
            text-align: center;
            background: #999;
            color: #fff;
            position: relative;
        }
        a{
            line-height: 40px;
            color: #fff;
        }
        .child{
            position: absolute;
            top: 40px;
            left: 0;
            width: 300px;
            background: #666;
            display: none;
        }
        .item:hover .child{
            display: block;
        }
        .child li:hover{
            background: blue;
        }
    </style>
</head>
<body>
<ul class="clear">
    <li class="item">
        <a href="#">首页</a>
        <ul class="child">
            <li><a href="#">列表</a></li>
            <li><a href="#">列表</a></li>
            <li><a href="#">列表</a></li>
            <li><a href="#">列表</a></li>
            <li><a href="#">列表</a></li>
        </ul>
    </li>
    <li class="item">
        <a href="#">导航页</a>
        <ul class="child">
            <li><a href="#">列表</a></li>
            <li><a href="#">列表</a></li>
            <li><a href="#">列表</a></li>
            <li><a href="#">列表</a></li>
            <li><a href="#">列表</a></li>
        </ul>
    </li>
</ul>
<div class="" style="width: 100%;height: 300px;background: red"></div>
</body>
</html>

html+来回忽闪

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        p{
            width: 38px;
            height: 43px;
            background: url("0901/pic1.png") no-repeat -334px -47px;
        }
        div{
            width: 40px;
            height: 43px;
            background: url("0901/pic1.png") no-repeat -370px -167px;
        }
        body{
            background: red;
        }
        .light{
            margin: 0 auto;
            width: 0;
            height: 0;
            background: #fff;
          /*  box-shadow: 0 0 20px 50px rgba(255,255,255,.8);*/
            animation: run 1s infinite;
        }
        @keyframes run {
            0%{
                box-shadow: 0 0 20px 20px rgba(255,255,255,.8);
            }
            25%{
                box-shadow: 0 0 20px 20px rgba(255,255,255,0.3);
            }
            50%{
                box-shadow: 0 0 20px 20px rgba(255,255,255,.1);
            }
            70%{
                box-shadow: 0 0 20px 20px rgba(255,255,255,0.3);
            }
            100%{
                box-shadow: 0 0 20px 20px rgba(255,255,255,0.8);
            }
        }
    </style>
</head>
<body>
<p></p>
<div></div>
<div class="light"></div>
</body>
</html>

html旋转动画+补间动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 120px;
            height: 80px;
            line-height: 80px;
            text-align: center;
            background: darkblue;
            color: #fff;
            transition: all 1s ease 1s;
            margin: 200px auto;
        }
        .box:hover{
            transform: rotate(360deg) scale(2,1.2);
        }
        .pop{
            width: 500px;
            height: 50px;
            background: red;
            animation:change 5s linear;
            animation-fill-mode: forwards;
        }
        @keyframes change {
            0%{
                width: 500px;
            }
            50%{
                width: 800px;
            }
            100%{
                width: 300px;
            }
        }
    </style>
</head>
<body>
<div class="box">CSS过度</div>
<div class="pop"></div>
</body>
</html>

html双飞翼布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .container{
            width: 100%;
           /* height: 500px;*/
        }
        .center{
            width: 100%;
            height: 500px;
            float: left;
            background: red;
        }
        .left,.right{
            width: 250px;
            height: 500px;
            background: green;
            float: left;
        }
        .right{
            background: blue;
        }
        .left{
            margin-left: -100%;
        }
        .right{
            margin-left: -250px;
        }
        p{
            width: 100%;
            padding: 0 250px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="center"><p>中间</p></div>
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>
</body>
</html>

html+对话框那个三角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        body{
            text-align: center;
        }
        .parent{
            display: inline-block;
        }
        li{
            width: 300px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 14px;
            color: #fff;
        }
        .title{
            background: red;
        }
        .child{
            background: #666;
            display: none;
        }
        .parent:hover .child{
            display: block;
        }

        .pic{
            box-shadow: 10px 10px 10px 10px rgba(0,0,0,.5);
        }
        .dia{
            width: 200px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            border-radius: 5px;
            background: orange;
            margin: 100px auto;
            position: relative;
        }
        .dia:after{
            content: "\200B";
            display: block;
            width: 0;
            height: 0;
            border:10px solid transparent;
            border-right: 10px solid orange;
            position: absolute;
            left: -20px;
            top: 7px;
        }
    </style>
</head>
<body>
<ul class="parent">
    <li class="title">项目一</li>
    <li class="pos">
        <ul class="child">
            <li>fdsjjhv</li>
            <li>fdsjjhv</li>
            <li>fdsjjhv</li>
            <li>fdsjjhv</li>
        </ul>
    </li>
</ul>
<div>
    <img src="0901/mutimedia.jpg" class="pic">
</div>
<!--对话框-->
<p class="dia">sdjvnsubguv</p>
</body>
</html>

C--罗纳尔多
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3制作正方体,利用CSS3的3D效果制作正方体
weixin_32896083的博客
08-03 1614
学会用css3的3d效果制作一个正方体，有助于增强我们对3d场景的旋转和位移属性的理解。下面的动态图就是利用3d旋转位移，结合动画效果制作的。感兴趣的同学可以在完成正方体的制作基础上，再去探究一下添加各种动画效果。进入主题，以下是使用3d多重变换制作一个正方体的过程。在此之前需要明白的是，正方体中各个面的的x,y,z坐标轴是以各自面的中心点展开的，也就是说对某个面进行3d变换，就要以某个面为坐标轴...
正方形动态html效果图,HTML5一款漂亮的内含花朵的正方形动画背景图案
weixin_28756021的博客
05-30 347
CSS语言：CSSSCSS确定body {background: #2e2e2e;margin: 0;}#app {width: 600px;height: 600px;margin: 0 auto;}.square {float: left;position: relative;will-change: transform;overflow: hidden;}.square:before {co...
php 图片 3d旋转图片,html5实现图片的3D旋转效果
weixin_36019543的博客
03-23 489
我们先来看一下实现效果：(学习视频分享：html视频教程)H5旋转3D相册，鼠标放置暂停，图片灰度级为0，有放大效果。该实例运用H5和CSS3动画效果，未用javascript。提高了本人对CSS3 新属性的了解及掌握。完整代码如下所示：HTML5 3D旋转图片相册 可鼠标悬停*{padding: 0;margin: 0;border: none;outline: none;box-sizing:...
html5正方体旋转
09-11
html5正方体旋转
H5 实现一个正方体旋转
jiagezuishuai的博客
09-01 3992
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> style> ul{ position: relative; width: 200px; height: 200px; tran
HTML5 SVG+CSS3旋转气泡图标导航菜单特效
06-05
描述中的"旋转气泡图标"，是指使用SVG的形状元素（如圆形、路径等）创建的气泡图形，并通过CSS3的`transform`属性实现旋转效果。CSS3的`transform`允许对元素进行旋转、缩放、平移等多种变换。在本特效中，点击图标...
前端网页+h5+js 用于送给女朋友
05-19
标题中的“前端网页+h5+js 用于送给女朋友”表明这是一个使用HTML5和JavaScript技术制作的前端网页项目，目的可能是为了庆祝女朋友的生日或者作为特别的礼物。HTML5是超文本标记语言的最新版本，提供了许多增强用户...
h5+实现手机端的录音，拍照，录像App
02-26
该demo使用h5+的功能基于android手机实现了录音，拍照，录像并进行上传下载，播放的功能，采用h5开发移动app，理论是支持android和ios的开发，开发工具采用hbuilder，利用hbuilder打包app在android机上运行，目前只...
二开月老盲盒无限开分站版H5源码+独立网页+对接支付+文本教程
07-09
二开月老盲盒无限开分站版H5源码+独立网页+对接支付+文本教程 2022-07-09 永久尊享 8 推广 PS 本源码提供给大家学习研究借鉴美工之用，请勿用于商业和非法用途，无任何技术支持！ 二开月老盲盒无限开分站版H5源码+...
最新H5大圣完整运营版源码+透视+完美控制+防反杀
06-19
3. 用户界面设计：创建吸引人的图形界面，提供良好的用户体验，包括菜单布局、按钮设计、动画效果等。 4. 数据存储与同步：可能涉及本地存储和服务器通信，用于保存游戏进度、用户数据和实时的游戏状态更新。 5. ...
HTML5 利用CSS3 中的3D 模块绘制一个旋转3D正方体
Elo的博客
06-05 4740
感觉还是比较简单的，直接上图:要做出的效果就是这个立体的正方体，然后再让它自己不停地转动代码展示: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;旋转正方体&lt;/title&gt; &lt;style&gt; *{
CSS实现3D正方体动态旋转效果【源码+GIF图】
qq_42316954的博客
06-13 8020
小伙伴们看到那些页面上炫酷的正方体，是不是都觉得美美的很精致，很想自己动手写一个属于自己的，但是又学业繁忙而找不到时间去实现，今天我就为大家写一个，哒哒哒，废话不多说，开始上代码~ 额，要不先说说它的实现原理吧，方便理解，嘿嘿。 实现原理：transition-property 要应用过渡的css属性transition-duration 过渡发生的时长transition-timing-func...
【CSS3进阶】酷炫的3D旋转透视
weixin_34161032的博客
04-21 531
之前学习 react+webpack ，偶然路过 webpack 官网 ，看到顶部的 LOGO ，就很感兴趣。 最近觉得自己 CSS3 过于薄弱，想着深入学习一番，遂以这个 LOGO 为切入口，好好研究学习了一下相关的 CSS3 属性。webpack 的 LOGO 动画效果乍看不是很难，深入了解之后，觉得内部其实大有学问，自己折腾了一番，做了一系列相关的 CSS3 动画效果。 先上 demo ...
JS实现html下拉菜单列表进行年月日选择
阿梦的博客
04-04 3万+
使用JS实现年月日下拉列表的选择 如下图： 具体操作： 两个js文件，设置效果 在.html中导入两个外部js文件 jquery.time.js $(function () { $.ms_DatePicker({ YearSelector: ".sel_year", MonthSelector: ".sel_month", ...
HTML+CSS实现简单下拉菜单
qq_32915337的博客
06-20 2万+
HTML+CSS实现下拉菜单 使用Html+css实现简单的下拉菜单 代码： 下拉框 *{ margin:0px; padding:0px;} #nav{ width:600px; height:40px; margin:0 auto;} #nav ul{ list-style:none;} #nav ul li{ float:left;
下拉框（可输入+自动匹配）
weixin_30493321的博客
10-23 1795
实现可输入+带自动匹配功能的下拉框，我试过以下几种方法： 1.直接使用h5的新标签<datalist>，对应demo如下： <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="F...
HTML选择下拉框后，页面内容根据选择去变化
热门推荐
你好，我们在哪里见过啊！
05-08 4万+
有时候，我们需要去实现选择下拉选之后，页面上的内容根据选择的不同而进行不同的变化。我在这里需要实现的是下拉选选择的是公司，公司有客服人员，选择完公司之后，把客服人员的信息打印出来。页面的内容代码如下：&lt;section&gt; &lt;form id="customerForm"&gt; &lt;ul class="page-content"&gt; ...
H5 3D动画实现
xy8199的博客
10-08 3975
H5 3D动画 示例图 代码： html> html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> title
H5+css3+js实现搜索框下拉列表
最新发布
06-02
好的，以下是一个基本的搜索框下拉列表的实现步骤： 1. HTML结构：在HTML中创建一个输入框和一个下拉列表的容器，下拉列表的容器初始设置为隐藏状态。 ```html 请输入搜索关键字"> <ul class="search-list">...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值