HTML5+CSS3基础（day19）

最新推荐文章于 2024-08-30 15:33:13 发布
最新推荐文章于 2024-08-30 15:33:13 发布
阅读量62 收藏
点赞数
文章标签： css3 html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52372037/article/details/128858263
版权
本文介绍了Web服务器的基本概念，包括本地服务器和远程服务器，并演示了如何申请免费空间及上传网站。接着深入探讨了CSS2D转换，包括translate函数在移动元素位置的应用，以及rotate用于元素旋转的效果。还讨论了如何设置转换中心点以实现更精确的动画效果。
摘要由CSDN通过智能技术生成

一、web 服务器在这里插入图片描述在这里插入图片描述

1.什么是服务器在这里插入图片描述

（1）本地服务器

在这里插入图片描述

（2）远程服务器在这里插入图片描述

2.申请免费空间以及网站上传在这里插入图片描述

二、CSS 2D转换在这里插入图片描述在这里插入图片描述

1. 2D转换之translate在这里插入图片描述

（1）

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2D转换之translate</title>
    <style>
        /* 移动盒子的位置：定位  盒子的外边距  2d转换移动 */
        div {
            width: 200px;
            height: 200px;
            background-color: pink;

            /* x就是x轴上移动位置 y就是y轴上移动位置 中间用逗号分隔 */
            /* transform: translate(x,y); */
            /* transform: translate(100px, 100px); */
            /* 1.只移动x坐标 */
            /* transform: translate(100px, 0); */
            /* transform: translateX(100px); */
            /* 2.只移动y坐标 */
            /* transform: translate(0, 100px); */
            /* transform: translateY(100px); */
        }

        div:first-child {
            transform: translate(30px, 30px);
        }

        div:last-child {
            background-color: purple;
        }
    </style>
</head>

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

</html>

（2）让一个盒子水平垂直居中

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>让盒子实现水平和垂直居中</title>
    <style>
        div {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
            /* 1.  translate里面的参数可以用 % */
            /* 2. 参数是% 移动的距离是盒子自身的宽度或者高度来%的 */
            /* 这里的50% 就是50px 因为盒子宽度是 100px */
            /* transform: translateX(50%); */
        }

        p {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            background-color: purple;
            /* margin-top: -100px;
            margin-left: -100px; */
            transform: translate(-50%, -50%);
        }

        span {
            /* translate对于行内元素是无效的 */
            transform: translate(100px, 100px);
        }
    </style>
</head>

<body>
    <div>
        <p></p>
    </div>
    <span>123</span>
</body>

</html>

2. 2D转换之rotate在这里插入图片描述

（1）

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2D转换之旋转rotate</title>
    <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="imgs/111.jpg" alt="">
</body>

</html>

（2）CSS3三角在这里插入图片描述在这里插入图片描述在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3书写三角</title>
    <style>
        div {
            position: relative;
            width: 249px;
            height: 35px;
            border: 1px solid #ccc;
        }

        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.6s;
        }

        /* 鼠标经过div 里面的三角旋转 */
        div:hover::after {
            /* 45+180 */
            transform: rotate(225deg);
        }
    </style>
</head>

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

</html>

（3）设置转换中心点在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置元素转换中心点</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            transition: all 1s;
            /* 1.可以跟方位名词 */
            /* 2.默认是50% 50% 即center center */
            /* transform-origin: left bottom; */
            /* 3.可以是像素px */
            transform-origin: 50px 50px;
        }

        div:hover {
            transform: rotate(360deg);
        }
    </style>
</head>

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

</html>

（4）旋转中心点案例在这里插入图片描述在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旋转中心案例</title>
    <style>
        div {
            overflow: hidden;
            width: 200px;
            height: 200px;
            border: 1px solid pink;
            margin: 100px auto;
        }

        div::before {
            content: '啦啦';
            display: block;
            width: 100%;
            height: 100%;
            background-color: hotpink;
            transform-origin: left bottom;
            transform: rotate(180deg);
            transition: all 0.6s;
        }

        /* 鼠标经过div 里面的before复原 */
        div:hover::before {
            transform: rotate(0deg);
        }
    </style>
</head>

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

</html>
澈如冬雪^
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html5 3d原理,使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
weixin_36399948的博客
06-02 563
今天读了篇关于如何使用css3创建3d四面体的文章，觉的相当不错，所以拿出来和大家分享一下。首先要和大家分享的是，如何使用div+css创建三角形。在这里我先把相关代码粘贴出来，然后再为大家讲解原理。html：复制代码代码如下:css：复制代码代码如下:#pyramid {position: relative;margin: 100px auto;height: 500px;width: 100p...
html5+Css总结(附带案例)
ThegreatHaige的博客
09-10 3340
HtmL5 和CSS一些常见总结 前端(通常指的是用户能够看到)网页通常是由三部分组成： 1.html:也是前端网页基本框架结构，类似于骨架一样的作用 2.CSS: 也叫层叠样式表，就是为美化界面而存在 3.Javascript: 使页面具有动态的效果(包括与用户的一个交互) 一&二.Html HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它是一种用来告知浏览器如何组织页面的标记语言。 所谓超文本Hypertext，是指连接单个或
前端Web开发HTML5+CSS3+移动web视频教程 Day3 CSS 第1天
chengkai730的博客
06-29 1551
Day3 CSS 第1天
HTML5+CSS3快速入门每日一篇网页制作实战（附代码）DAY06-DAY07
m0_47268176的博客
11-22 1263
myday6-day07 网页的制作实战（附自己的代码）（仿一个网站的网页） 网页效果图 自己的代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
pink老师HTML5+CSS3学习笔记 | DAY1
m0_53454320的博客
03-08 725
2023/3/8
HTML+CSS-Day04
qq_45229580的博客
08-25 91
HEAD：是 GET 方法的“简化版”，也是请求从服务器获取资源，服务器的处理机制也是一样的，但服务器不会返回请求的实体数据，只会传回响应头，也就是资源的“元信息”。）是 GET 方法的“简化版”，也是请求从服务器获取资源，服务器的处理机制也是一样的，但服务器不会返回请求的实体数据，只会传回响应头，也就是资源的“元信息”。而，异步方法通常会在另外一个线程中，“真实”地执行着。(1)异步请求无法获取到返回内容，因为4步很快就执行完，等待数据回来后，再没有接收响应的方法了，所以数据回来了也看不到了。
网页/前端大作业 html+css 无js 前端三剑客 大一网页大作业 9个页面
Song_Yu_Jing的博客
12-19 570
网页/前端大作业 html+css 无js 前端三剑客 大一网页大作业 9个页面
前端学习笔记 - HTML+CSS
fengxm0309的博客
10-07 4699
基础认知 网页 什么是网页 网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。 什么是 HTML HTML 指的是超文本标记语言 (Hyper Text Markup Lang
js+css3的卡牌抽奖特效动画
weixin_51364599的博客
03-05 2412
项目结构： index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lucky draw</title> <link rel="style
CSS3动画——飞行的小精灵
懒羊羊大王的博客
08-25 1778
通过多层结构、渐变色、圆角、多种动画效果以及细节处理，成功地创造了一个充满活力和趣味性的飞行小精灵动画效果。
CSS3视图过渡动画
m0_46281382的博客
08-24 885
手写视图过过渡动画，讲解如何实现Element Plus和Antdesign UI两种主题切换的实现逻辑；
CSS3多行多栏布局
业精于勤荒于嬉，行成于思毁于随
08-24 466
当前布局由6个等宽行组成，其中第四行有三栏，第五行有四栏。
js实现3d拖拽环绕旋转
SHX_fusheng的博客
08-27 339
js实现拖动节点围绕圆心进行转动
css基础学习总结(一)
₍˄·͈༝·͈˄*₎◞ ̑̑的博客
08-27 877
第四优先级：由一个或多个类选择器、属性选择器、伪类选择器定义。如.classname{margin:3px}会覆盖div{margin:6px;})>类选择器(.con{…})>标签选择器(dic{…})>通用选择器(*{…第三优先级：由一个或多个id选择器来定义。}会覆盖.classname{margin:3pxl}第五优先级：由一个或多个类型选择器定义。}覆盖*{margin:10px；第二优先级：在html中给元素标签加style，即内联样式。第六优先级：通配选择器，如*{marigin:6px;
CSS中禁用DOM事件
bingmoujs的博客
08-26 755
表示元素不应对鼠标事件进行响应。这包括鼠标的点击、悬停和其他鼠标相关的动作。这个属性指定当鼠标指针设备（如鼠标）在元素上时，事件应该有什么表现。
css的position定位的属性
最新发布
qq_43235503的博客
08-30 290
css的position定位的属性
前端面试宝典【CSS篇】【8】
BDawn的专栏
08-26 735
绝对单位 适用于不需要缩放的场合，如打印样式。 相对单位 更适合Web设计，尤其是响应式设计。 vw/vh 适用于基于视口尺寸的布局设计。 em/rem 适用于字体大小相关的布局。
CSS学习3
qq_54641174的博客
08-29 580
css样式表
CSS实现水滴效果图
N201871643的博客
08-26 663
水滴效果：指在网页上呈现出水滴从上方滴落的效果，通常伴随着水波纹扩散的动画效果。CSS：层叠样式表（Cascading Style Sheets），是一种用于描述HTML或XML（包括各种XML方言，如SVG、XHTML等）文档呈现的样式语言。
HTML5+CSS3基础知识大全
HTML5+CSS3基础知识点 **HTML5基础知识点** 1. **HTML5简介**：HTML5是最新的HTML标准，提供了更多的功能和改进，提高了网页的可读性和可访问性。 2. **XHTML基础**：XHTML是HTML的XML版本，提供了更好的结构和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值