HTML5/CSS3-02

最新推荐文章于 2023-11-16 11:32:30 发布
最新推荐文章于 2023-11-16 11:32:30 发布
阅读量222 收藏 2
点赞数
分类专栏： css
blank
本文链接：https://blog.csdn.net/qq_41418797/article/details/107972293
版权

目录

HTML5 第二天

一、rotate

使用步骤：

案例代码

二、三角

二、设置元素旋转中心点(transform-origin)

transform-origin 基础语法

重要知识点

三、旋转中心案例

四、2D 转换之 scale

五、图片放大案例

六、分页按钮案例

七、 2D 转换综合写法以及顺序问题

八、 动画(animation)

九、动画序列

十、动画常见属性

十一、 动画简写方式

十二、速度曲线细节

十三、案例

1.奔跑的熊大

​ 2.阴阳师动画行走案例

HTML5 第二天

一、rotate

2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转

使用步骤：

  1. 给元素添加转换属性 transform

  2. 属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度

div{
      transform: rotate(0deg);
}

案例代码

 <style>
        img {
            width: 150px;
            /* 顺时针旋转45度 */
            /* transform: rotate(45deg); */
            border-radius: 50%;
            border: 5px solid pink;
            /* 过渡写到本身上，谁做动画给谁加 */
            transition: all 0.3s;
        }
        
        img:hover {
            transform: rotate(360deg);
        }
    </style>
</head>

<body>
    <img src="media/pic.jpg" alt="">
</body>

二、三角

 <style>
        div {
            position: relative;
            width: 249px;
            height: 35px;
            border: 1px solid #000;
        }
        
        div::after {
            content: "";
            position: absolute;
            top: 8px;
            right: 15px;
            width: 10px;
            height: 10px;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            transform: rotate(45deg);
            transition: all 0.2s;
        }
        /* 鼠标经过div  里面的三角旋转 */
        
        div:hover::after {
            transform: rotate(225deg);
        }
    </style>
</head>

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

 

二、设置元素旋转中心点(transform-origin)

  1. transform-origin 基础语法

    transform-origin: x y;

  2. 重要知识点

    • 注意后面的参数 x 和 y 用空格隔开

    • x y 默认旋转的中心点是元素的中心 (50% 50%)，等价于 center center

    • 还可以给 x y 设置像素或者方位名词(top、bottom、left、right、center)

三、旋转中心案例

<style>
        div {
            overflow: hidden;
            width: 200px;
            height: 200px;
            border: 1px solid pink;
            margin: 10px;
            float: left;
        }
        
        div::before {
            content: "黑马";
            display: block;
            width: 100%;
            height: 100%;
            background-color: hotpink;
            transform: rotate(180deg);
            transform-origin: left bottom;
            transition: all 0.4s;
        }
        /* 鼠标经过div 里面的before 复原 */
        
        div:hover::before {
            transform: rotate(0deg);
        }
    </style>
</head>

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

 

四、2D 转换之 scale

  1. scale 的作用

    • 用来控制元素的放大与缩小

  2. 语法

    transform: scale(x, y)

  3. 知识要点

    • 注意，x 与 y 之间使用逗号进行分隔

    • transform: scale(1, 1): 宽高都放大一倍，相当于没有放大

    • transform: scale(2, 2): 宽和高都放大了二倍

    • transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致

    • transform:scale(0.5, 0.5): 缩小

    • scale 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

  4. 代码演示

       div:hover {
       /* 注意，数字是倍数的含义，所以不需要加单位 */
       /* transform: scale(2, 2) */
   
       /* 实现等比缩放，同时修改宽与高 */
       /* transform: scale(2) */
   
       /* 小于 1 就等于缩放*/
       transform: scale(0.5, 0.5)
   }

五、图片放大案例

 <style>
        div {
            overflow: hidden;
            float: left;
            margin: 10px;
        }
        
        div img {
            transition: all .4s;
        }
        
        div img:hover {
            transform: scale(1.1);
        }
    </style>
</head>

<body>
    <div>
        <a href="#"><img src="media/scale.jpg" alt=""></a>
    </div>
    <div>
        <a href="#"><img src="media/scale.jpg" alt=""></a>
    </div>
    <div>
        <a href="#"><img src="media/scale.jpg" alt=""></a>
    </div>
</body>

六、分页按钮案例

  • 代码演示

七、 2D 转换综合写法以及顺序问题

  1. 知识要点

    • 同时使用多个转换，其格式为 transform: translate() rotate() scale()

    • 顺序会影响到转换的效果(先旋转会改变坐标轴方向)

    • 但我们同时有位置或者其他属性的时候，要将位移放到最前面

  2. 代码演示

    div:hover {
  transform: translate(200px, 0) rotate(360deg) scale(1.2)
}

八、 动画(animation)

  1. 什么是动画

    • 动画是 CSS3 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果

  2. 动画的基本使用

    • 先定义动画

    • 在调用定义好的动画

  3. 语法格式(定义动画)

    @keyframes 动画名称 {
    0% {
        width: 100px;
    }
    100% {
        width: 200px
    }
}

  1. 语法格式(使用动画)

    div {
    /* 调用动画 */
    animation-name: 动画名称;
    /* 持续时间 */
    animation-duration: 持续时间；
}

  1. 动画序列

    • 0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列

    • 在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果

    • 动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数

    • 用百分比来规定变化发生的时间，或用 from 和 to，等同于 0% 和 100%

  2. 代码演示

     <style>
        /* 我们想页面一打开，一个盒子就从左边走到右边 */
        /* 1. 定义动画 */
        
        @keyframes move {
            /* 开始状态 */
            0% {
                transform: translateX(0px);
            }
            /* 结束状态 */
            100% {
                transform: translateX(1000px);
            }
        }
        
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 2. 调用动画 */
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 2s;
        }
    </style>
</head>

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

     

九、动画序列

 <style>
        /* from to 等价于  0% 和  100% */
        /* 动画序列 */
        /* 1. 可以做多个状态的变化 keyframe 关键帧 */
        /* 2. 里面的百分比要是整数 */
        /* 3. 里面的百分比就是 总的时间（我们这个案例10s）的划分 25% * 10  =  2.5s */
        
        @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: 100px;
            height: 100px;
            background-color: pink;
            animation-name: move;
            animation-duration: 10s;
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

十、动画常见属性

  1. 常见的属性

     

  2. 代码演示

    div {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  /* 动画名称 */
  animation-name: move;
  /* 动画花费时长 */
  animation-duration: 2s;
  /* 动画速度曲线 */
  animation-timing-function: ease-in-out;
  /* 动画等待多长时间执行 */
  animation-delay: 2s;
  /* 规定动画播放次数 infinite: 无限循环 */
  animation-iteration-count: infinite;
  /* 是否逆行播放 */
  animation-direction: alternate;
  /* 动画结束之后的状态 */
  animation-fill-mode: forwards;
}
​
div:hover {
  /* 规定动画是否暂停或者播放 */
  animation-play-state: paused;
}

十一、 动画简写方式

  1. 动画简写方式

    /* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
animation: name duration timing-function delay iteration-count direction fill-mode

  2. 知识要点

    • 简写属性里面不包含 animation-paly-state

    • 暂停动画 animation-paly-state: paused; 经常和鼠标经过等其他配合使用

    • 要想动画走回来，而不是直接调回来：animation-direction: alternate

    • 盒子动画结束后，停在结束位置：animation-fill-mode: forwards

  3. 代码演示

    animation: move 2s linear 1s infinite alternate forwards;

十二、速度曲线细节

  1. 速度曲线细节

    • animation-timing-function: 规定动画的速度曲线，默认是ease

 

  1. 代码演示

    <style>
        div {
            overflow: hidden;
            font-size: 20px;
            width: 0;
            height: 30px;
            background-color: pink;
            /* 让我们的文字强制一行内显示 */
            white-space: nowrap;
            /* steps 就是分几步来完成我们的动画 有了steps 就不要在写 ease 或者linear 了 */
            animation: w 4s steps(10) forwards;
        }
        
        @keyframes w {
            0% {
                width: 0;
            }
            100% {
                width: 200px;
            }
        }
    </style>
</head>

<body>
    <div>世纪佳缘我在这里等你</div>
</body>

    效果为：逐字显示世纪佳缘我在这里等你

十三、案例

1.奔跑的熊大

 <style>
        body {
            background-color: #ccc;
        }
        
        div {
            position: absolute;
            width: 200px;
            height: 100px;
            background: url(media/bear.png) no-repeat;
            /* 我们元素可以添加多个动画， 用逗号分隔 */
            /* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
            /*盒子动画结束后，停在结束位置：`animation-fill-mode: forwards` */
            animation: bear .4s steps(8) infinite, move 3s forwards;
        }
        
        @keyframes bear {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -1600px 0;
            }
        }
        
        @keyframes move {
            0% {
                left: 0;
            }
            100% {
                left: 50%;
                /* margin-left: -100px; */
                transform: translateX(-50%);
            }
        }
    </style>
</head>

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

 2.阴阳师动画行走案例

<body>
	<div class="f4_box">
		<div class="walk01">
			<div class="west-01"></div>
		</div>
		<div class="walk02">
			<div class="west-02"></div>
		</div>
		<div class="walk03">
			<div class="west-03"></div>
		</div>
		<div class="walk04">
			<div class="west-04"></div>
		</div>
	</div>
</body>
.f4_box {
    position: fixed;
    width: 100%;
    height: 175px;
    left: 0;
    bottom: 0;
    z-index: 99;
    -webkit-transition: all 3.2s ease;
    -moz-transition: all 3.2s ease;
    -ms-transition: all 3.2s ease;
    transition: all 3.2s ease;
}

.walk01 {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 154px;
    height: 121px;
    opacity: 0;
    -webkit-animation: move01 15s linear infinite;
    -moz-animation: move01 15s linear infinite;
    -ms-animation: move01 15s linear infinite;
    animation: move01 15s linear infinite;
}

.west-01 {
    width: 154px;
    height: 121px;
    background-image: url(../images/txgc_6d0e9e5.png);
    background-repeat: no-repeat;
    -webkit-animation: play01 .4s steps(2) infinite;
    -moz-animation: play01 .4s steps(2) infinite;
    -ms-animation: play01 .4s steps(2) infinite;
    animation: play01 .4s steps(2) infinite;
}

@keyframes move01 {
    0% {
        -webkit-transform: translate(-200px, 0);
        -moz-transform: translate(-200px, 0);
        -ms-transform: translate(-200px, 0);
        transform: translate(-200px, 0);
        opacity: 1;
    }
    100% {
        -webkit-transform: translate(1920px, 0);
        -moz-transform: translate(1920px, 0);
        -ms-transform: translate(1920px, 0);
        transform: translate(1920px, 0);
        opacity: 1;
    }
}

@keyframes play01 {
    0% {
        background-position: 0 0;
    }
    100% {
        /* background-position（x,y) x表示向右 y表示向下 */
        /*表示向左偏移308px,上下不偏移*/
        background-position: -308px 0;
    }
}

.walk02 {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 167px;
    height: 176px;
    opacity: 0;
    -webkit-animation: move01 15s linear 2s infinite;
    -moz-animation: move01 15s linear 2s infinite;
    -ms-animation: move01 15s linear 2s infinite;
    animation: move01 15s linear 2s infinite;
}

.west-02 {
    width: 167px;
    height: 176px;
    background-image: url(../images/txgh_fee2457.png);
    background-repeat: no-repeat;
    -webkit-animation: play02 .4s steps(2) infinite;
    -moz-animation: play02 .4s steps(2) infinite;
    -ms-animation: play02 .4s steps(2) infinite;
    animation: play02 .4s steps(2) infinite;
}

@keyframes play02 {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -334px 0;
    }
}

.walk03 {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 161px;
    height: 149px;
    opacity: 0;
    -webkit-animation: move01 15s linear 4s infinite;
    -moz-animation: move01 15s linear 4s infinite;
    -ms-animation: move01 15s linear 4s infinite;
    animation: move01 15s linear 4s infinite;
}

.west-03 {
    width: 161px;
    height: 149px;
    background-image: url(../images/txgl_c15cfd8.png);
    background-repeat: no-repeat;
    -webkit-animation: play03 .4s steps(2) infinite;
    -moz-animation: play03 .4s steps(2) infinite;
    -ms-animation: play03 .4s steps(2) infinite;
    animation: play03 .4s steps(2) infinite;
}

@keyframes play03 {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -322px 0;
    }
}

.walk04 {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 171px;
    height: 157px;
    opacity: 0;
    -webkit-animation: move01 15s linear 6s infinite;
    -moz-animation: move01 15s linear 6s infinite;
    -ms-animation: move01 15s linear 6s infinite;
    animation: move01 15s linear 6s infinite;
}

.west-04 {
    width: 171px;
    height: 157px;
    background-image: url(../images/txgq_d281c9b.png);
    background-repeat: no-repeat;
    -webkit-animation: play04 .4s steps(2) infinite;
    -moz-animation: play04 .4s steps(2) infinite;
    -ms-animation: play04 .4s steps(2) infinite;
    animation: play04 .4s steps(2) infinite;
}

@keyframes play04 {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -342px 0;
    }
}

 

奋斗的小菇凉
关注
专栏目录
常见的CSS字体样式属性/font-size/font-family/font-weight/font-style/font综合属性/@font-face属性/学习笔记
No1banana的博客
01-22 3088
一、常见的CSS字体样式属性 1.font-size属性：用于设置字体字号 该属性的值有 相对长度单位：em（相对当前对象内文本字体尺寸）px（像素，最常用） 绝对长度单位：in（英寸）cm（厘米）mm（毫米）pt（点） 2.font-family属性：用于自定义设置字体 css样式代码p{ font-family:"微软雅黑"; } 3.font-weight属性：用于定义字体的粗细 字体粗细常用的值有：normal（默认值400）bold（粗体700）bolder（更粗字体）lighter（更细的字体）
webpack搭建项目时出现的报错“Module build failed (from ./node_modules/css-loader/dist/cjs.js) CssSyntaxError”...
热门推荐
weixin_30517001的博客
12-24 1万+
控制台出现的错误如下： webpack.config.js中的配置如下： module.exports={ entry:'./src/main.js', output:{ path:__dirname, filename:'dist/app.js' }, module:{ ...
HTML5动画效果的图片放大缩小特效.rar
07-10
HTML5动画效果的图片放大缩小特效，动态的图片放大，图片缩小，CSS3内核实现的图片缩放特效，打开演示页面后，图片会向左上角收缩变小，然后再向右下角变大，动画效果也是一大亮点，很流畅。
html5自动放大图片动画,Html5学习--运动且旋转并放大缩小的动画效果
weixin_39980841的博客
05-30 619
(function(){var canvas=null,context=null,angle=0;num=0;value=1;function resetCanvas(){canvas=document.getElementById("simple");canvas.width=window.innerWidth;canvas.height=window.innerHeight;context=c...
html中如何实现放大动画,CSS3实现点击放大的动画实例代码
weixin_28788181的博客
06-07 385
前言最近在工作中遇到一个需求，实现的效果是当点击商品图片右上的收藏按钮触发放大动画，后来通过查找相关的资料，发现利用css3:@keyframes animation即可实现这个效果，下面来看看详细的介绍吧。示例代码@keyframes myfirst {0% {width: 50px;height: 50px;top: 10px;right: 10px;}75% {width: 60px;hei...
html5放大缩小
iteye_2837的博客
06-26 372
div{ margin: 0 auto; width:100px; height:100px; background:url(img/QQ20150606151652.jpg); background-size: 75% 100%; background-repeat:no-repeat ; -webkit-transition:width 2s...
html画布 缩放的正方形,html5 – 使用画布缩放
weixin_39798579的博客
06-03 168
在测试应用程序中,我有一个带有一个简单矩形的画布.方法绘制每100ms调用一次.正如你可以从代码中看到的,我使用鼠标滚轮来缩放所有内容.现在发生的是,一切都是缩放的,但是当矩形为10像素,10像素时,我将鼠标放在它上面,缩放后矩形不再位于鼠标下方. (这当然是正确的,因为所有单位都放大了.但是我想要的是,mouseposition是像谷歌地图中的“缩放动作的中心”,所以在缩放之前,鼠标下的内容也是...
HTML5+CSS3 精美登陆界面源码
01-19
HTML5和CSS3是现代网页开发的两大核心技术，它们为创建功能丰富且视觉吸引人的网页提供了强大的工具。在这个“HTML5+CSS3 精美登陆界面源码”压缩包中，包含了三个精心设计的登录界面，每一个都充分利用了HTML5的新...
css3-mediaqueries.js+html5.js
07-04
在本案例中，"css3-mediaqueries.js" 和 "html5.js" 是两个JavaScript库，它们主要用于增强对旧版Internet Explorer（如IE8和IE7）的支持，使这些浏览器能够实现CSS3媒体查询和HTML5新特性的兼容。 **CSS3媒体查询*...
CSS3 +HTML5入门到精通
07-01
【标题】"CSS3 +HTML5入门到精通"与【描述】"《HTML+5+从入门到精通》-中文学习教程"所涵盖的知识点主要围绕着Web开发的基础技术——HTML5和CSS3展开，这两者是现代网页设计与开发不可或缺的组成部分。以下是关于这...
JS+Html图片放大缩小旋转拖动效果
10-30
根据网上找的代码修改后的成品，实现了图片的方法，缩小，旋转，拖动查看等功能
CSS3图片悬停放大动画效果
04-15
CSS3图片悬停放大动画效果
html图片过渡放大,css3图片放大缩小过度动画
weixin_28938385的博客
06-05 760
(1)需要加动画的节点.lucky_h_img {animation: mymove 3s infinite;-webkit-animation: mymove 3s infinite; /*Safari and Chrome*/animation-direction: alternate; /*轮流反向播放动画。*/animation-timing-function: ease-in-out; ...
简单的旋转，放大，缩小 （HTML5）
下午茶的博客
10-10 3664
Baidu             * {             margin: 0;             padding: 0;         }         li {             list-style: none;         }         .top {             width: 640px;
HTML css3 图片放大效果
QDY5945的博客
10-13 296
<div class="enlarge"> <img src="xx" alt="图片"/> </div> 第一种效果 超出不隐藏 .enlarge{ width: ...
html5 放大动画效果图,HTML5 手机图片触摸放大效果(多个图片)
weixin_32258195的博客
06-03 191
JavaScript语言：JaveScriptBabelCoffeeScript确定(function(e, t) {var n = ["touchstart", "touchmove", "touchend"];e.enlarge = function(e, t, i) {//var s = document.getElementById(e);var els = document.getEle...
html图片控制处理放大缩小移动多种案例(附源码)
最新发布
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
11-16 5539
html图片控制处理放大缩小移动多种案例(附源码)，简约图片预览，仿京东图片放大镜效果，图片查看器，可放大缩小，旋转，图片放大镜效果，图片放大缩小查看，图片放大显示，支持滚轮调整大小，图片上下滑动缩略图字幕效果，各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
h5 放大缩小，拖动
qq_36934775的博客
04-10 1403
用touchzoom demo:https://github.com/appue/touchzoom
html 鼠标滚轮实现图片转换代码,图片旋转、鼠标滚轮缩放、镜像、切换图片js代码...
weixin_42135754的博客
06-04 796
本文实例为大家展示了图片旋转、鼠标滚轮缩放、镜像、切换图片多重效果，提供了详细的代码，分享给大家供大家参考，具体内容如下具体代码：图片旋转,鼠标滚轮缩放,镜像,切换图片效果预览//容器对象var ImageTrans = function(container, options) {this._initialize(container, options);this._initMode();if (t...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值