首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

作者：小市民828_719 | 来源：互联网 | 2023-09-07 16:54
文章目录笔记：CSS的特殊样式作业：用CSS的特殊样式制作立体相册笔记：CSS的特殊样式media查询常⽤于响应式布局，




文章目录


    • 笔记&＃xff1a;CSS的特殊样式
    • 作业&＃xff1a;用CSS的特殊样式制作立体相册




笔记&＃xff1a;CSS的特殊样式

&＃64;media查询

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

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

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

DOCTYPE html>
<html lang&＃61;"zh">
<head>
<meta charset&＃61;"UTF-8">
<meta http-equiv&＃61;"X-UA-Compatible" content&＃61;"IE&＃61;edge">
<meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1.0">
<title>Documenttitle>
<style>
&＃64;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()进⾏平移效果&＃xff0c;有2个参数对应x轴和y轴

DOCTYPE html>
<html lang&＃61;"zh">
<head>
<meta charset&＃61;"UTF-8">
<meta http-equiv&＃61;"X-UA-Compatible" content&＃61;"IE&＃61;edge">
<meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1.0">
<title>Documenttitle>
<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&＃61;"container">div>
body>
html>

scale()⽤于缩放标签&＃xff0c;当参数只有⼀个时&＃xff0c;整体放⼤或缩⼩&＃xff0c;当参数是两个时&＃xff0c;可以分别调整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&＃61;"div2">你好。这是⼀个 div 元素。div>
<div id&＃61;"div3">你好。这是⼀个 div 元素。div>
body>
html>

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

DOCTYPE html>
<html lang&＃61;"zh">
<head>
<meta charset&＃61;"UTF-8">
<meta http-equiv&＃61;"X-UA-Compatible" content&＃61;"IE&＃61;edge">
<meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1.0">
<title>Documenttitle>
<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&＃61;"container">
<img src&＃61;"../pic/李⽩.jpg" alt&＃61;"">
<img src&＃61;"../pic/⾐服.jpg" alt&＃61;"">
<img src&＃61;"../pic/⻛景.jpg" alt&＃61;"">
<img src&＃61;"../pic/右键菜单.jpeg" alt&＃61;"">
<img src&＃61;"../pic/⾐服.webp" alt&＃61;"">
<img src&＃61;"../pic/123.webp" alt&＃61;"">
div>
body>
html>

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

DOCTYPE html>
<html lang&＃61;"zh">
<head>
<meta charset&＃61;"UTF-8">
<meta http-equiv&＃61;"X-UA-Compatible" content&＃61;"IE&＃61;edge">
<meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1.0">
<title>Documenttitle>
<style>
.container{
width: 200px;
height: 200px;
background-color: black;
background-size: cover;
transform: skew(30deg,30deg);
}
style>
head>
<body>
<div class&＃61;"container">div>
body>
html>

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

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>

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

DOCTYPE html>
<html>
<head>
<style>
&＃64;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&＃xff1a;⼜快到慢的过渡效果 */
/* ease-in-out &＃xff1a;慢->快->慢*/
/* cubic-bezier&＃xff08;&＃xff09; ⻉塞尔曲线*/
}
div:hover {
display: none;
}
style>
head>
<body>
<div class&＃61;"box1">div>
<div class&＃61;"box2">div>
<div class&＃61;"box3">div>
body>
html>

作业&＃xff1a;用CSS的特殊样式制作立体相册

HTML代码&＃xff1a;

DOCTYPE html>
<html lang&＃61;"zh">
<head>
<meta charset&＃61;"UTF-8">
<meta http-equiv&＃61;"X-UA-Compatible" content&＃61;"IE&＃61;edge">
<meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1.0">
<title>立体相册title>
<link rel&＃61;"stylesheet" type&＃61;"text/css" href&＃61;"立体相册.css">
head>
<body>
<div class&＃61;"container">
<img src&＃61;"images/1.jpg" alt&＃61;"">
<img src&＃61;"images/2.jpg" alt&＃61;"">
<img src&＃61;"images/3.jpg" alt&＃61;"">
<img src&＃61;"images/4.jpg" alt&＃61;"">
<img src&＃61;"images/5.jpg" alt&＃61;"">
<img src&＃61;"images/6.jpg" alt&＃61;"">
div>
body>
html>

css代码&＃xff1a;

body{
perspective: 800px;
}
&＃64;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);
}

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







推荐阅读
  • text

    《数据结构》学习笔记3——串匹配算法性能评估

    《数据结构》学习笔记3——串匹配算法性能评估
    本文主要讨论串匹配算法的性能评估，包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库，可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n)，通过随机取出长度为m的子串作为模式P，在文本T中进行匹配，统计平均复杂度。对于成功和失败的匹配分别进行测试，分析其平均复杂度。详情请参考相关学习资源。 ... [详细]
  • text

    动态规划算法的基本步骤及最长递增子序列问题详解

    动态规划算法的基本步骤及最长递增子序列问题详解
    本文详细介绍了动态规划算法的基本步骤，包括划分阶段、选择状态、决策和状态转移方程，并以最长递增子序列问题为例进行了详细解析。动态规划算法的有效性依赖于问题本身所具有的最优子结构性质和子问题重叠性质。通过将子问题的解保存在一个表中，在以后尽可能多地利用这些子问题的解，从而提高算法的效率。 ... [详细]
  • text

    Java验证码——kaptcha的使用配置及样式

    Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置，包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • datetime

    高质量SQL书写的30条建议

    高质量SQL书写的30条建议
    本文提供了30条关于优化SQL的建议，包括避免使用select *，使用具体字段，以及使用limit 1等。这些建议是基于实际开发经验总结出来的，旨在帮助读者优化SQL查询。 ... [详细]
  • datetime

    Python高级之网络编程及TCP/IP协议簇的OSI七层模型介绍

    本文介绍了Python高级网络编程及TCP/IP协议簇的OSI七层模型。首先简单介绍了七层模型的各层及其封装解封装过程。然后讨论了程序开发中涉及到的网络通信内容，主要包括TCP协议、UDP协议和IPV4协议。最后还介绍了socket编程、聊天socket实现、远程执行命令、上传文件、socketserver及其源码分析等相关内容。 ... [详细]
  • datetime

    基于layUI的图片上传前预览功能的2种实现方式

    基于layUI的图片上传前预览功能的2种实现方式
    本文介绍了基于layUI的图片上传前预览功能的两种实现方式：一种是使用blob+FileReader，另一种是使用layUI自带的参数。通过选择文件后点击文件名，在页面中间弹窗内预览图片。其中，layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块，并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]
  • utf-8

    Alink回归预测的不完善问题及期待

    本文讨论了Alink回归预测的不完善问题，指出目前主要针对Python做案例，对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法，以及Maven的相关知识。最后，对Alink回归预测的未来发展提出了期待。 ... [详细]
  • case

    求解hdu 1003 java题目的动态规划优化方法

    本文讨论了如何优化解决hdu 1003 java题目的动态规划方法，通过分析加法规则和最大和的性质，提出了一种优化的思路。具体方法是，当从1加到n为负时，即sum(1,n)sum(n,s)，可以继续加法计算。同时，还考虑了两种特殊情况：都是负数的情况和有0的情况。最后，通过使用Scanner类来获取输入数据。 ... [详细]
  • import

    OC学习笔记之@property和@synthesize

    本文介绍了OC学习笔记中的@property和@synthesize，包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
  • import

    Mac OS 升级到11.2.2 Eclipse打不开了，报错Failed to create the Java Virtual Machine

    Mac OS 升级到11.2.2 Eclipse打不开了，报错Failed to create the Java Virtual Machine
    本文介绍了在Mac OS升级到11.2.2版本后，使用Eclipse打开时出现报错Failed to create the Java Virtual Machine的问题，并提供了解决方法。 ... [详细]
  • import

    测试人的性格，点火让他着急，考验婚姻问题的善意玩人

    本文讲述了作者通过点火测试男友的性格和承受能力，以考验婚姻问题。作者故意不安慰男友并再次点火，观察他的反应。这个行为是善意的玩人，旨在了解男友的性格和避免婚姻问题。 ... [详细]
  • text

    Voicewo在线语音识别转换jQuery插件的特点和示例

    Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • text

    java 线程死锁模拟

    1，关于死锁的理解死锁，我们可以简单的理解为是两个线程同时使用同一资源，两个线程又得不到相应的资源而造成永无相互等待的情况。 2，模拟死锁背景介绍：我们创建一个朋友 ... [详细]
  • text

    ABAP开发发送邮件程序的配置和代码整理

    本文介绍了通过ABAP开发往外网发邮件的需求，并提供了配置和代码整理的资料。其中包括了配置SAP邮件服务器的步骤和ABAP写发送邮件代码的过程。通过RZ10配置参数和icm/server_port_1的设定，可以实现向Sap User和外部邮件发送邮件的功能。希望对需要的开发人员有帮助。摘要长度：184字。 ... [详细]
  • input

    猜字母游戏

    猜字母游戏
    猜字母游戏猜字母游戏——设计数据结构猜字母游戏——设计程序结构猜字母游戏——实现字母生成方法猜字母游戏——实现字母检测方法猜字母游戏——实现主方法1猜字母游戏——设计数据结构1.1 ... [详细]
author-avatar
小市民828_719
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有