Web前端——立体相册的制作

news2025/7/28 0:45:04

文章目录

    • 笔记：CSS的特殊样式
    • 作业：用CSS的特殊样式制作立体相册

笔记：CSS的特殊样式

@media查询

常⽤于响应式布局，是⽬前使⽤最多的适配⻚⾯的技术。他会根据⻚⾯的尺⼨的不同，⽽是⽤不同的样式。

<style>
 @media screen {
 /* 电脑端显示这个样式 */
 p.test {
 font-family: verdana, sans-serif;
 font-size: 14px
 }
 }
 @media print {
 /* 打印机端显示这个样式 */
 p.test {
 font-family: times, serif;
 font-size: 10px
 }
 }
 @media screen,print {
 /* 电脑端和打印机显示这个样式 */
 p.test {
 font-weight: bold
 }
 }
 @media all {
 /* ⽤于所有多媒体类型设备 */
 p.test {
 font-weight: bold
 }
 }
</style>

@font-face
⼀、TureTpe(.ttf)格式：
.ttf字体是Windows和Mac的最常⻅的字体，是⼀种RAW格式，因此他不为⽹站优化,⽀持
这种字体的浏览器有【
IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；
⼆、OpenType(.otf)格式：
.otf字体被认为是⼀种原始的字体格式，其内置在TureType的基础上，所以也提供了更多
的功能,⽀持这种字体的浏览器有【
Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile
Safari4.2+】
三、Web Open Font Format(.wow )格式：
.wow 字体是Web字体中最佳格式，他是⼀个开放的TrueType/OpenType的压缩版本，同时
也⽀持元数据包的分离,⽀持这种字体的浏览器有
【
IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；
四、Embedded Open Type(.eot)格式：
.eot字体是IE专⽤字体，可以从TrueType创建此格式字体,⽀持这种字体的浏览器有
【
IE4+】；
五、SVG(.svg)格式：
.svg字体是基于SVG字体渲染的⼀种格式,⽀持这种字体的浏览器有
【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。
这就意味着在@font-face中我们⾄少需要.wow ,.eot两种格式字体，甚⾄还需要.svg等字体
达到更多种浏览版本的⽀持

<!DOCTYPE html>
<html lang="zh">
 <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>Document</title>
 <style>
 @font-face {
 font-family:bigyoung;
 src: url(../font/BigYoung.TTF);
 }
 div{
 font-family: bigyoung;
 }
 </style>
 </head>
 <body>
 <div>哈哈哈</div>
 </body>
</html>

CSS的变换效果
transform 2d转换
translate()进⾏平移效果，有2个参数对应x轴和y轴

<!DOCTYPE html>
<html lang="zh">
 <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>Document</title>
 <style>
 
 .container{
 border: 1px solid red;
 width: 200px;
 height: 200px;
 background-image: url("../pic/⾐服.jpg");
 background-size: 200px 200px;
 
 transform: translateZ(0px);
 
 }
 </style>
 </head>
 <body>
 <div class="container"></div>
 </body>
</html>

scale()⽤于缩放标签，当参数只有⼀个时，整体放⼤或缩⼩，当参数是两个时，可以分别调整x轴
和y轴的缩放倍数。

<!DOCTYPE html>
<html>
 <head>
 <style>
 div {
 width: 100px;
 height: 75px;
 background-color: yellow;
 border: 1px solid black;
 }
 div#div2 {
 margin: 100px;
 transform: scale(2, 4);
 }
 div#div3 {
margin: 100px;
 transform: scale(.5);
 }
 </style>
 </head>
 <body>
 <div>你好。这是⼀个 div 元素。</div>
 <div id="div2">你好。这是⼀个 div 元素。</div>
 <div id="div3">你好。这是⼀个 div 元素。</div>
 </body>
</html>

rotate()⽤于旋转元素。rotateX() rotateY() rotateZ()分别染着xyz轴进⾏旋转。

<!DOCTYPE html>
<html lang="zh">
 <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>Document</title>
 <style>
 body{
 perspective: 800px;
 
 }
 /* .container{
 margin: auto;
 border: 1px solid red;
 width: 200px;
 height: 200px;
 background-image: url("../pic/⾐服.jpg");
 background-size: 200px 200px;
 transform-style: preserve-3d;
 transform: rotateZ(0deg);
 } */
 
 .container{
 width: 200px;
 height: 200px;
 margin: 300px auto;
 position: relative;
 border: 1px solid rebeccapurple;
 transform-style: preserve-3d;
 transform: rotateX(30deg) rotateY(30deg);
 }
 .container > img{
width: 200px;
 height: 200px;
 position: absolute;
 }
 .container > img:nth-child(2){
 left: -200px;
 transform: rotateY(90deg);
 transform-origin: right;
 }
 .container > img:nth-child(3){
 right: -200px;
 transform-origin: left;
 transform: rotateY(-90deg);
 }
 .container > img:nth-child(4){
 top: -200px;
 transform-origin: bottom;
 transform: rotateX(-90deg);
 }
 .container > img:nth-child(5){
 bottom: -200px;
 transform-origin: top;
 transform: rotateX(90deg);
 }
 .container > img:last-child{
 transform: translateZ(200px);
 }
 </style>
 </head>
 <body>
 <div class="container">
 <img src="../pic/李⽩.jpg" alt="">
 <img src="../pic/⾐服.jpg" alt="">
 <img src="../pic/⻛景.jpg" alt="">
 <img src="../pic/右键菜单.jpeg" alt="">
 <img src="../pic/⾐服.webp" alt="">
 <img src="../pic/123.webp" alt="">
 </div>
 </body>
</html>

skew()有两个参数分别代表在x轴⽅向的扭曲程度，以及在y轴⽅向的扭曲程度。

<!DOCTYPE html>
<html lang="zh">
 <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>Document</title>
 <style>
 .container{
 width: 200px;
 height: 200px;
 background-color: black;
 background-size: cover;
 transform: skew(30deg,30deg);
 }
 </style>
 </head>
 <body>
 <div class="container"></div>
 </body>
</html>

matrix()他能使 缩放 旋转 扭曲等⽅法
transform：matrix（cosθ，-sinθ,sinθ,cosθ,0,0);代表旋转
transform：matrix（x,0,0,y,0,0)；控制缩放
transform 3d转换
Perspective：⽤来控制视距的属性，属性值是指距离屏幕的像素值。（例Perspective：
800px）。
transform-style：⽤来transform的显示效果，有平⾯模式（flat），3d模式（preserve-3d）。
transform-origin：⽤来控制旋转轴的位置。
过渡效果
transition：默认是所有属性都进⾏过渡，参数列表property name | duration | delay。
transition⽀持部分属性过渡，例如你可以指定宽⾼属性拥有过渡效果，这时其他属性不再⽀持过渡。

<!DOCTYPE html>
<html>
 <head>
 <style>
 div {
 width: 100px;
 height: 75px;
 background-color: yellow;
 border: 1px solid black;
 transition: width height 2s;
 }
 div:hover{
 display: none;
 }
</style>
 </head>
 <body>
 <div></div>
 </body>
</html>

动画效果
@keyframes⽤来设置动画效果，可以使⽤from和to定义开始动画和结束动画，也可以使⽤百分⽐控制真个动
画的节奏，如下代码所示

<!DOCTYPE html>
<html>
 <head>
 <style>
 @keyframes myAnimation {
 0% {
 width: 200px;
 height: 200px;
 background: red;
 }
 50% {
 width: 300px;
 height: 300px;
 background: yellow;
 }
 100% {
 width: 200px;
 height: 200px;
 background: red;
 }
 
 }
 .box1,.box2 ,.box3{
 /* 要使⽤的动画 */
 animation-name: myAnimation;
 /* 动画持续时⻓ */
 animation-duration: 5s;
 /* 动画的速度曲线 线性过渡*/
 animation-timing-function: linear;
 /* 动画循环次数 */
⽴体相册代码
 animation-iteration-count: infinite;
 /* 动画的运⾏状态 */
 animation-play-state: running;
 /* 设置动画是否反向运动 */
 animation-direction: reverse;
 }
 
 .box2 {
 /* 平滑过渡 */
 animation-timing-function: ease;
 }
 
 .box3{
 /* ⼜慢到快 */
 animation-timing-function: ease-in;
 /* ease-out：⼜快到慢的过渡效果 */
 /* ease-in-out ：慢->快->慢*/
 /* cubic-bezier（） ⻉塞尔曲线*/
 }
 div:hover {
 display: none;
 }
 </style>
 </head>
 <body>
 <div class="box1"></div>
 <div class="box2"></div>
 <div class="box3"></div>
 </body>
</html>

作业：用CSS的特殊样式制作立体相册

HTML代码：

<!DOCTYPE html>
<html lang="zh">
 <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>
 <link rel="stylesheet" type="text/css" href="立体相册.css">
 </head>
 <body>
 <div class="container">
 <img src="images/1.jpg" alt="">
 <img src="images/2.jpg" alt="">
 <img src="images/3.jpg" alt="">
 <img src="images/4.jpg" alt="">
 <img src="images/5.jpg" alt="">
 <img src="images/6.jpg" alt="">
 </div>
 </body>
</html>

css代码：

body{
 perspective: 800px;
 }
 @keyframes myAnimation {
 from{
 transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
 }
 to{
 transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
 }
 }
 
 
 .container > img{
 width: 200px;
 height: 200px;
 position: absolute;
 }
 .container{
 position: relative;
 width: 200px;
 height: 200px;
 margin: 300px auto;
 border: 1px solid red;
 transform-style: preserve-3d;
 animation: myAnimation 10s infinite linear;
 }
 .container > img:first-child{
 }
 
 .container:hover > img:nth-child(2){
 transform: translateX(-100px)rotateY(90deg);
 }
 .container > img:nth-child(2){
 left: -200px;
 transform-origin: right;
 transform: rotateY(90deg);
 }
 
 .container:hover > img:nth-child(3){
 transform:translateX(100px) rotateY(-90deg);
 }
 .container > img:nth-child(3){
 right: -200px;
 transform-origin: left;
 transform: rotateY(-90deg);
 }
 
 .container:hover > img:nth-child(4){
 transform: translateY(-100px) rotateX(-90deg);
 }
 .container > img:nth-child(4){
 top:-200px;

 transform-origin: bottom;
 transform:rotateX(-90deg);
 }
 
 .container:hover > img:nth-child(5){
 transform: translateY(100px) rotateX(90deg);
 }
 .container > img:nth-child(5){
 bottom:-200px;
 transform-origin: top;
 transform:rotateX(90deg);
 }
 
 .container:hover > img:last-child{
 transform: translateZ(300px);
 }
 .container:hover > img:first-child{
 transform: translateZ(-100px);
 }
 .container > img:last-child{
 transform: translateZ(200px);
 }

效果展示：
盒子旋转
请添加图片描述
当鼠标移到盒子上面时，盒子炸开并保持旋转
请添加图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/16513.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

LeetCode50天刷题计划第二季（Day 31 — 两数之和 II - 输入有序数组（11.10-11.20）分数到小数（11.30-12.30）

LeetCode50天刷题计划第二季（Day 31 — 两数之和 II - 输入有序数组（11.10-11.20）分数到小数（11.30-12.30）

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录前言一、题目两数之和 II - 输入有序数组示例提示二、思路三、代码四、题目分数到小数示例提示五、思路六、代码前言 没看出来跟 两数之和 I 有什么区别 一、题目 …
阅读更多...
码农死磕这份Java高级开发文档,成功‘挤‘进一线大厂,这也太强了吧

码农死磕这份Java高级开发文档,成功‘挤‘进一线大厂,这也太强了吧

前言 很多程序员一开始在学习上找不到方向&#xff0c;但我想在渡过了一段时间的新手期之后这类问题大多都会变得不再那么明显&#xff0c;工作的方向也会逐渐变得清晰起来。 但是没过多久&#xff0c;能了解到的资料就开始超过每天学习的能力&#xff0c;像是买了没看的书、…
阅读更多...
内网渗透神器CobaltStrike之重定向服务配置(二)

内网渗透神器CobaltStrike之重定向服务配置(二)

重定向服务的概念 "重定向"是一个在CS服务器与目标主机进行网络传输之间的服务器, 不仅能保护CS服务器, 还能增强与目标网络传输的稳定性, 例如某一台重定向服务器倒塌了, 但是CS服务器还是能通过其他重定向服务器与目标网络进行信息传输 环境拓扑 域名: team.comD…
阅读更多...
ELSEVIER期刊论文投稿全流程实例讲解

ELSEVIER期刊论文投稿全流程实例讲解

Elsevier期刊模板下载 从ELSEVIER搜索要投的期刊&#xff0c;进入期刊主页 https://www.elsevier.com/search-results?queryFuel
阅读更多...
【附源码】Python计算机毕业设计体育场馆预定网站

【附源码】Python计算机毕业设计体育场馆预定网站

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;我…
阅读更多...
基于随机森林算法完成鸢尾花卉品种预测任务 代码+数据

基于随机森林算法完成鸢尾花卉品种预测任务 代码+数据

1.理论部分 随机森林（Random Forest），顾名思义，就是由很多决策树模型融合在一起的算法。 随机森林是一种运用了集成学习（ensemble learning）的决策树分类器。 随机森林是一种基于Bagging框架的模型融合算法，如图1.2所示。它通过多个基础的决策树模型进行训练，如何通过…
阅读更多...
Android App事件交互中区分点击和长按动作以及识别手势滑动方向的讲解及实战（附源码 可直接使用）

Android App事件交互中区分点击和长按动作以及识别手势滑动方向的讲解及实战（附源码 可直接使用）

运行有问题或需要源码请点赞关注收藏后评论区留言~~~ 一、区分点击和长按动作 区分点击和长按动作&#xff0c;只要看按压时长是否超过500毫秒即可&#xff0c;没超过的表示点击动作&#xff0c;超过了的表示长按动作。其实除了按压时长之外&#xff0c;按压力度也是一个重要的…
阅读更多...
Isaac-gym(5)：关于强化学习

Isaac-gym(5)：关于强化学习

官方链接&#xff1a; https://github.com/NVIDIA-Omniverse/IsaacGymEnvs 1、环境建立示例 import isaacgym import isaacgymenvs import torchenvs isaacgymenvs.make(seed0, task"Ant", #对应执行时用到的名称num_envs2000, sim_device"cuda:0"…
阅读更多...
智芯传感-工业雷管禁售在即，电子雷管的大发展已然到来！

智芯传感-工业雷管禁售在即，电子雷管的大发展已然到来！

在我国重点支持发展的基础设施建设领域中&#xff0c;民爆行业是一个相对小众、但是非常重要的行业。在“十四五”规划中&#xff0c;国家大力推进电子雷管替代工业雷管&#xff0c;持续加强激励与引导&#xff0c;推进生产工艺及装备向安全可靠、绿色环保、智能制造方向发展&a…
阅读更多...
Makefile 基础（二）—— Makefile 自动推导+ Makefile伪目标

Makefile 基础（二）—— Makefile 自动推导+ Makefile伪目标

目录 1、Makefile 自动推导&#xff08;隐含规则&#xff09; (1) 依赖项都在当前目录下 (2) 一部分依赖项不在当前目录下 2、Makefile 伪目标 1、Makefile 自动推导&#xff08;隐含规则&#xff09; 所谓隐含规则指的是&#xff0c;我们在Makefile文件中不使用 gcc/g 命…
阅读更多...
openTCS 5.2 学习记录一（避坑）

openTCS 5.2 学习记录一（避坑）

openTCS5.2 学习记录一 初学者记录 一、学习背景 最近领导安排学习AGV相关调度方面的东西&#xff0c;我司使用的是openTCS来做AGV调度管理。本文主要记录最简单的启动&#xff0c;并且记录使用过程中的各个坑。 二、参考资料 openTCS官网 https://www.opentcs.org/en/ind…
阅读更多...
玩机搞机-----安卓全机型刷机卡fastboot模式解决方法与故障解析

玩机搞机-----安卓全机型刷机卡fastboot模式解决方法与故障解析

今天给友友们讨论下手机刷机后进不去系统卡fastboot模式一些问题解决方法和造成的原因故障解析。一般这类操作是由于以下几种原因导致的。包括但不限于以下其中之一 这种故障排除硬件原因除外哦 1-----刷第三方系统导致的重启卡fastboot模式 2-----降级更新官方固件跨版本幅…
阅读更多...
Level1行情和l2行情数据api接口在逐笔成交记录上有什么区别？

Level1行情和l2行情数据api接口在逐笔成交记录上有什么区别？

除了买卖盘口显示的行情数据不同&#xff0c;Level-1行情和l2行情数据api接口第二个主要的区别是Level-1行情只有分时成交记录而l2行情数据api接口同时还提供逐笔成交记录。 也就是说Level-1行情是不提供具体的每笔交易明细的。但是l2行情数据api接口它记录了实时交易中每一笔…
阅读更多...
第二章：Spring核心思想和IOC和AOP依赖注入

第二章：Spring核心思想和IOC和AOP依赖注入

Spring 中IOC 如何理解&#xff1f; 中文控制反转&#xff0c;如何控制反转&#xff1f; 是一种思想&#xff0c;交给Spring容器来管理的一种思想&#xff0c;具体扫描注解&#xff0c;实现注入容器内。 平时使用某个类调用某个类的内的方法&#xff0c;需要先创建类的对象&a…
阅读更多...
E 排队(排列组合)[牛客小*白月赛61]

E 排队(排列组合)[牛客小*白月赛61]

题面如下&#xff1a; 思路 or 题解&#xff1a; 对于一个长度为 nnn 的 排列组合 如果存在一对 逆序对 (x,y)(x, y)(x,y) xxx 在 yyy 的前面有 n∗(n−1)2\frac{n * (n - 1)}{2}2n∗(n−1)​ 种情况 剩下 n−2n - 2n−2 个位置可以随意填数进去&#xff0c;不会影响到逆序对 …
阅读更多...
Windows OpenGL ES 图像单色

Windows OpenGL ES 图像单色

目录 一.OpenGL ES 图像单色 1.原始图片2.效果演示 二.OpenGL ES 图像单色源码下载三.猜你喜欢 零基础 OpenGL ES 学习路线推荐 : OpenGL ES 学习目录 >> OpenGL ES 基础 零基础 OpenGL ES 学习路线推荐 : OpenGL ES 学习目录 >> OpenGL ES 特效 零基础 OpenGL E…
阅读更多...
(STM32)从零开始的RT-Thread之旅--SPI驱动ST7735(2)

(STM32)从零开始的RT-Thread之旅--SPI驱动ST7735(2)

上一篇&#xff1a; (STM32)从零开始的RT-Thread之旅--PWM驱动ST7735调光 本篇使用的驱动来自ST官方提供&#xff1a; https://github.com/STMicroelectronics/stm32-st7735.git 需要的可以直接git clone下来移植&#xff0c;核心代码无关芯片型号&#xff0c;可移植性很不…
阅读更多...
销量上不去？跨境电商出现这5种迹象，你需要Starday了！

销量上不去？跨境电商出现这5种迹象，你需要Starday了！

随着2015年"互联网"时代的来临&#xff0c;跨境电商行业逐步走进了资本市场的视野中&#xff0c;跨境电商成为了有望对抗出口增速下台阶的利器。近年来&#xff0c;随着国际贸易条件的恶化&#xff0c;以及欧洲、日本的需求持续疲弱&#xff0c;中国出口贸易增速出现…
阅读更多...
[附源码]Python计算机毕业设计jspm郫县兼职信息系统

[附源码]Python计算机毕业设计jspm郫县兼职信息系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…
阅读更多...
Egg实现用户注册登录以及使用jwt进行token鉴权

Egg实现用户注册登录以及使用jwt进行token鉴权

目录 什么是用户鉴权 注册接口 登录接口 jwt解密token 在一个后台服务中&#xff0c;用户鉴权是一个重点&#xff0c;几乎所有的需求都是围绕用户&#xff08;token&#xff09;去进行设计的&#xff0c;所以在用户鉴权也是我们必须要重视的课程&#xff0c;本章我们就利用…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023