H5C3提高（2）

已于 2024-01-23 20:48:45 修改
阅读量411 收藏 8
点赞数 10
文章标签： html 前端
于 2024-01-22 22:40:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74227060/article/details/135759524
版权

CSS 2D转换

转换（transform）可以实现元素位移（translate）旋转（rotate）缩放（scale）等；

简单理解为变形。

位移

语法：transform：translate（x，y）；（translate最大的优点是不会影响其他元素位置）

应用：鼠标指出图片向上，其他盒子位置不变

translate（）百分比单位是相对于自身元素来说的

可使盒子水平垂直居中

                          



旋转

transform：rotate（度数）      度数单位deg  正数顺时针转，负数逆时针

默认旋转中心点为元素中心点

缩放

transform：scale（x，y）；

注：

transform：scale（1，1）；1倍，相当于没放缩

transform：scale（2，2）同transform：scale（2）；放大2倍

transform：scale（.5，.5）；缩小0.5倍

综合写法

格式：

transform：translate() rotate() scale()..

顺序改变效果（先旋转改变坐标方向）

应把位移放在最前面

分页按钮案例

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>教务在线</title>
   <link rel="stylesheet" href="初始化表.css">
   <style>
      /*写代码时始终要考虑权重问题！*/

      @font-face {
         font-family: 'icomoon';
         src: url('fonts/icomoon.eot?au9n7q');
         src: url('fonts/icomoon.eot?au9n7q#iefix') format('embedded-opentype'),
            url('fonts/icomoon.ttf?au9n7q') format('truetype'),
            url('fonts/icomoon.woff?au9n7q') format('woff'),
            url('fonts/icomoon.svg?au9n7q#icomoon') format('svg');
         font-weight: normal;
         font-style: normal;
         font-display: block;
      }

      * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
      }

      ul {
         margin: 0 auto;
         width: 290px;
         height: 40px;
      }

      li {
         width: 30px;
         height: 30px;
         border: 1px solid red;
         text-align: center;
         line-height: 30px;
         margin: 5px;
         border-radius: 50%;
         float: left;
         transition: all 1s;
         cursor: pointer;
      }

      li:hover {
       transform: scale(2,2);/*其放缩不会影响其他元素位置*/

      }
      .clearfix::after {
         content: '';
         display: block;
         height: 0;
         visibility: hidden;
         clear:both;
      }
   </style>

</head>

<body>
   <ul class="clearfix">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
   </ul>
</body>

</html>

CSS3动画基本使用

通过设置多个节点精确控制一个或多个动画，实现复杂动画效果

与过渡相比，动画可以实现更多变化、连续自动播放和控制，

制作动画分两步：

先定义动画

再调用动画

用keyframes定义动画（0%为初状态，100%为末状态）

调用：

打开浏览器自动产生动画向右移动

动画序列

0%为开始，100%为结束，期间可以有任意多个

多设几个节点可以实现环绕效果：

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>!</title>
   <link rel="stylesheet" href="初始化表.css">
   <style>
      /*写代码时始终要考虑权重问题！*/

      @font-face {
         font-family: 'icomoon';
         src: url('fonts/icomoon.eot?au9n7q');
         src: url('fonts/icomoon.eot?au9n7q#iefix') format('embedded-opentype'),
            url('fonts/icomoon.ttf?au9n7q') format('truetype'),
            url('fonts/icomoon.woff?au9n7q') format('woff'),
            url('fonts/icomoon.svg?au9n7q#icomoon') format('svg');
         font-weight: normal;
         font-style: normal;
         font-display: block;
      }

      * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
      }

      @keyframes move {
         0% {
            transform: translate(0,0);

         }

         25% {
            transform: translate(1000px,0);
         }

         50% {
            transform: translate(1000px,500px);
         }

         75% {
            transform: translate(0,500px);
         }

         100% {
            transform: translate(0,0);
         }
      }

      div {
         width: 200px;
         height: 200px;
         background-color: aqua;
         /*调用动画*/
         animation-name: move;
            /*动画名称*/
         
         /*持续时间*/
         animation-duration: 2s;
      }
   </style>

</head>

<body>
   <div></div>
</body>

</html>

常见属性：

animation-delay：何时开始

animation-iteration-count：播放次数（infinite是无限重复）

animation-direction：是否逆向播放（alternate为逆向）；使动画更连贯

animation-fill-mode：是否返回起始状态保持是forward  返回起始是backward

animation-play-state：running是运行，paused为静止；通常和hover使用鼠标接触时静止

animation-timing-function：运动曲线，默认ease，linear为匀速

综合写法：

animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反向 动画起始或结束状态

案例

显示并播放一个脉冲动画

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>!</title>
   <link rel="stylesheet" href="初始化表.css">
   <style>
      /*写代码时始终要考虑权重问题！*/

      @font-face {
         font-family: 'icomoon';
         src: url('fonts/icomoon.eot?au9n7q');
         src: url('fonts/icomoon.eot?au9n7q#iefix') format('embedded-opentype'),
            url('fonts/icomoon.ttf?au9n7q') format('truetype'),
            url('fonts/icomoon.woff?au9n7q') format('woff'),
            url('fonts/icomoon.svg?au9n7q#icomoon') format('svg');
         font-weight: normal;
         font-style: normal;
         font-display: block;
      }

      * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
      }

      .map {
         width: 100px;
         height: 100px;
         margin: 100px auto;
         position: relative;
         background-color: rgba(0, 0, 0, .4);
      }

      .dotted {
         position: absolute;
         top: 47px;
         left: 47px;
         width: 6px;
         height: 6px;
         background-color: blue;
         border-radius: 3px;

      }

      .map div[class^="pu"] {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         width: 6px;
         height: 6px;
         border-radius: 50%;
         box-shadow: 0 0 12px #0190e8;
         animation: pulse 1s linear infinite alternate;
         
      }

      .map div.pulse2
      /*要考虑权重问题*/
         {
         animation-delay: .4s;
      }

      .map div.pulse3
      /*要考虑权重问题*/
         {
         animation-delay: .8s;
      }


      @keyframes pulse {
         0% {}

         70% {
            width: 40px;
            height: 40px;
            opacity: 1;
            /*透明度*/
         }

         100% {
            width: 70px;
            height: 70px;
            opacity: 0;
         }
      }
   </style>

</head>

<body>
   <div class="map">
      <div class="dotted"></div>
      <div class="pulse1"></div>
      <div class="pulse2"></div>
      <div class="pulse3"></div>
   </div>
</body>

</html>

特别地，速度曲线的steps（）指定时间函数中间隔数量即步长，是分n步来完成。可以用来做进度条！

CSS 3D转换（了解）

特点：近大远小，物体后面遮挡不可见

三维坐标系

x轴水平向右：右为正值

y轴垂直向下：下为正值

z轴垂直屏幕：向外为正值

3D位移

translate3d（x,y,z）;

translateZ需要和透视一起用

格式：transform：translate3d（100px,100px,100px)；

3D转换

透视 perspective

透视写在元素父盒子上

perspective的参数是视距，即人眼到屏幕距离

z轴是物体与屏幕的距离，实现近大远小

perspective相当于参照物

3D旋转

transform：rotateX（45deg）沿x轴正方向旋转45度

transform：rotateY（45deg）沿y轴正方向旋转45度

transform：rotateZ（45deg）沿z轴正方向旋转45度

3D呈现

transform-style

控制子元素是否开启三维立体环境

transform-style：flat子元素不开启

transform-style：preserve-3d；开启

代码给父类但影响子盒子

象更
关注
  • 10
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
H5+C3提高
weixin_54236608的博客
04-20 324
H5+C3一、H51.1、H5新增语义化标签1.2、多媒体标签1.2.1、视频1.2.2、音频 一、H5 1.1、H5新增语义化标签 HTML5新增的新特性都有兼容性的问题，IE9+才支持，IE8/7/6不支持； 新语义化标签是为了让搜索引擎识别的 语义化标签都属于块元素；在IE9中需要将其转换为块元素 header：页面头部 nav：导航栏部分 article：文章页 aside：页面文章的侧边栏 section：页面中的节，区段；大号div footer：页面foot 1.2、多媒体标签 1.
h5c3动画例子
01-02
使用html5+css3完成的网页设计作品
H5C3提高
yanhhillo的博客
03-02 203
2022.3.2 学习笔记 目录 CSS第七趴： 六、溢出的文字省略号显示 1.单行文本溢出显示省略号 2.多行文本溢出显示省略号 七、常见布局技巧 margin负值运用 文字围绕浮动元素(运用浮动元素不会压住文字的特性) 行内块巧妙运用 CSS 三角强化 八、CSS 初始化 HTML5 和 CSS3 提高： 一、HTML5 的新特性 1.HTML5 新增的语义化标签(均为块级元素)​编辑 2. HTML5 新增的多媒体标签 3.HTML5 新增的 input 类型 4
h5c3提高
weixin_46623496的博客
07-30 81
1.HTML5新增语义化标签 < header>：头部标签 < nav>：导航标签 < article>：内容标签 < section>：定义文档某个区域 < aside>：侧边栏标签 < footer>：尾部标签 2.视频< video> <video src="文件地址" controls="controls"></video> 3.音频标签< audi
前端基础——H5C3提高
2302_79866622的博客
02-22 686
CSS3中可以通过box-sizing 属性来指定盒子模型，有两个值：即可指定为content-box，boder-box 这样我们计算盒子大小的方式就发生了变化。注意：这些新特性都会有兼容性问题，基本使IE9以上的版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。1.属性：想要变化的CSS属性，宽度高度 背景颜色 内外边距都可以 如果想要所有属性都变化过渡，写一个all就可以。属性选择器可以根据特定属性的来选择元素。针对之前的不足，新增加了一些新的标签，新的表单和新的表单属性等。
h5c3的新特性
m0_59070120的博客
02-26 553
session在当前页面会话结束前有效，只在同页面可以访问到，不同页面即使同源也不行，local除非主动删除否则都有效。增加了代码可读性，有利于团队协作，提高开发效率；cookies，4kb，每次会随着同源的http请求自动发送给服务器，在设置过期时间之前都有效。5，Web Storage（本地存储，session，local）bored-box，content-box切换。session，local：同源，大小5mb。5，盒子模型 box-sizing。4，增加了画布，canvas。
H5C3的讲解
weixin_30664539的博客
06-05 419
H5C3 HTML5 简介 HTML5 是 HTML 标记语言的一个最新版本，制定了 web 应用开发的一系列标准，成为第一个将 web 作为应用开发平台的 HTML 语言。 H5 其实是一个泛称，它指的是由 HTML5 + CSS3 + Javascript 等技术组合而成的一个应用开发平台。 HTML5 的设计目的是为了在移动设备上支持多媒体。HTML5 是最...
H5C3总结
weixin_57931538的博客
10-14 2273
H5C3总结
pink-H5C3提高（新特性）
xieanna123的博客
12-11 191
pink-H5C3提高（新特性） 视频链接：pink-H5C3提高 目录 什么是HTML5 H5新增语义化标签 H5新增多媒体标签 H5新增input表单，表单属性
H5C3面试题.docx
03-29
H5C3面试题，不懂回来翻翻看
h5c3新增标签及用法
10-20
html5 css3中新增的属性事件 新增DOM选择和操作样式、 网络监听接口、全屏接口；CSS3中 transition过渡 、transform二维变换、transform3D转换、动画animation、伸缩布局等等
H5C3精华.zip
09-04
H5C3精书让你从菜鸟到到到大大大大牛的必经精书,短时高效,立马见效
使用H5C3模仿支付宝咻一咻功能
01-08
使用H5C3模仿支付宝咻一咻功能，没有添加音效
HTML静态网页成品作业(HTML+CSS)—— 环保主题介绍网页(5个页面)
weixin_42283461的博客
06-10 1154
HTML静态网页成品作业(HTML+CSS)—— 环保主题介绍网页(5个页面)
HTML初体验
最新发布
linux423的博客
06-14 344
可参考jd.com官网，ctrl+u查看当前页面源代码找到你的项目，在项目中创建html类型的网页文件标准的HTML正确书写格式效果如下。
html实现粘贴excel数据，在页面表格中复制
weixin_43805439的博客
06-13 418
Html table 实现Excel多格粘贴
HTML静态网页成品作业(HTML+CSS)—— 小米商城首页网页(1个页面)
weixin_42283461的博客
06-11 606
HTML静态网页成品作业(HTML+CSS)—— 小米商城首页网页(1个页面)
h5c3写一个登录页面
03-13
我可以回答这个问题。要编写一个登录页面，你需要使用HTML5和CSS3来创建页面布局和样式。你还需要使用JavaScript来实现用户登录和验证功能。...在验证成功后，可以将用户重定向到另一个页面或显示欢迎消息。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

象更

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

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

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

打赏作者

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

抵扣说明：

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

余额充值