html+css制作3D七夕表白旋转相册特效

爱笑的陈sir 2023-05-18 原文

一个温暖的拥抱，一句轻声的问候，一个暖心的笑容，一双坚实的双手，让我们日久天长，健健康康，快乐每一天！祝你们七夕快乐！一个基于html+css制作简易的3D七夕表白旋转相册特效，就当送给你们当作七夕表白的礼物吧！记得送给自己喜欢的人，嘿嘿嘿。

3D七夕表白旋转相册特效

一、3D七夕表白旋转相册特效效果图

二、页面背景设置

   *{
       padding:0px;
       margin:0px;
   }

高度设置成100%，具体高度以自身所需为准

   body{
       height:100%;
   }

/* background-size:100% 100%;按容器比列撑满,图片变形 */

  body{
     /*  background-size:100% 100%;按容器比列撑满,图片变形 */
    background-image:url("images/3.png") 
    /* background-size:100% 100%; */
   }

   #box{
       width:280px;
       height:400px;
   }

/*生成绝对定位的元素 */

   position:fixed;
   left:0px;
   right:0px;
   top:0;
   bottom:0px;

/* 元素水平居中 */

margin:auto;

/*指定嵌套元素,在3D空间中呈现 */

transform-style:preserve-3d;

/* 设置X,Y的旋转点 */

   transform:rotateX(0deg) rotateY(0deg);

   /* 动画时长:   45s infinite 循环播放 每45s默认循环播放一次  
   infinite 循环播放     linear 默认循环一次 */

三、animation属性的作用

animation：简易属性，用于设置六个动画属性
在这里先打三个？？？，后面我们会用到它，嘿嘿嘿

  animation: go 45s linear infinite;

   #box img{
       width:280px;
       height:400px;
       /*绝对定位 */
       position:absolute;
       left:0px;
       top:0px;
   }

让图片向外推出，使用translateZ（650px）;
rotateY（0deg）：以Y轴0度为盒子的旋转中心点（如上图演示）

   #box img:nth-child(1){
       transform:rotateY(0deg) translateZ(650px);
   }

   #box img:nth-child(2){
       transform:rotateY(36deg) translateZ(650px);
   }
   #box img:nth-child(3){
       transform:rotateY(72deg) translateZ(650px);
   }
   #box img:nth-child(4){
       transform:rotateY(108deg) translateZ(650px);
   }
   #box img:nth-child(5){
       transform:rotateY(144deg) translateZ(650px);
   }
   #box img:nth-child(6){
       transform:rotateY(216deg) translateZ(650px);
   }
   #box img:nth-child(7){
       transform:rotateY(288deg) translateZ(650px);
   }
   #box img:nth-child(8){
       transform:rotateY(324deg) translateZ(650px);
   }

四、什么是 @keyframes属性

@keyframes ：定义一个动画,并定义具体的动画效果，如，放大或者位移等等
@keyframes go：以百分比：来规定改变发生的时间
@keyframes它定义的动画并不能直接执行，需要借助animation来运转
百分比是指动画完成一遍的时间长度的百分比,
0%是动画的开始时间,50%是动画完成一半的时间，100%动画是动画的结束时间

   @keyframes go{
       0%{
           transform:rotateX(0deg) rotateY(0deg);
       }
       25%{
           transform:rotateX(20deg) rotateY(180deg);
       }
       50%{
           transform:rotateX(0deg) rotateY(360deg);
       }
       75%{
           transform:rotateX(0deg) rotateY(540deg);
       }
       100%{
           transform:rotateX(0deg) rotateY(720deg);
       }
   }
</style>
<body>

五、放置图片的容器

<-- 放置图片的容器–>

    <div id="box">
    <img src="images/1.png"alt="">
    <img src="images/2.png"alt="">
    <img src="images/3.png"alt="">  
    <img src="images/4.png"alt="">
    <img src="images/5.png"alt="">
    <img src="images/6.png"alt="">
    <img src="images/7.png"alt="">
    <img src="images/8.png"alt="">
    </div>
</body>
</html>

六、视频演示

演示视频中运用一些特效素材，发送对方的时候可以充充门面，它不香吗？
最后祝天下有情人终成眷属，今生只愿温柔的懂你，细腻的疼你，热烈的爱你。

七夕特效 span class token css html 3d

有关html+css制作3D七夕表白旋转相册特效的更多相关文章

ruby - 使用 ruby 将 HTML 转换为纯文本并维护结构/格式 - 2
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。最佳答案首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
ruby - capybara field.has_css?匹配器 - 2
我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？最佳答案通过JonasNicklas得到了答案:No
ruby-on-rails - Rails HTML 请求渲染 JSON - 2
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？最佳答案您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这
ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
ruby-on-rails - Ruby url 到 html 链接转换 - 2
我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.
ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2
我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'
css - 用 watir 检查标签类？ - 2
我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。最佳答案试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes
世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2
无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD
旋转矩阵的几何意义 - 2
点向量坐标矩阵的几何意义介绍旋转矩阵的几何含义之前，先介绍一下点向量坐标矩阵的几何含义点：在一维空间下就是一个标量，如同一条直线上，以任意某一个位置为0点，以一定的尺度间隔为1，2，3...,相反方向为-1，-2，-3...；如此就形成了一维坐标系，这时候任何一个点都可以用一个数值表示，如点p1=5，即即从原点出发沿着x轴正方向移动5个尺度；点p2=-3，负方向移动3个尺度；在一维坐标系上过原点做垂直于一维坐标系的直线，则形成了二维坐标系，此时描述一个点需要两个数值来表示点p3=（3，2），即从原点出发沿着x轴正方向移动3个尺度，在此基础上沿着y轴正方向移动两个尺度的位置就是点p3。
FOHEART H1数据手套驱动Optitrack光学动捕双手运动(Unity3D) - 2
本教程将在Unity3D中混合Optitrack与数据手套的数据流，在人体运动的基础上，添加双手手指部分的运动。双手手背的角度仍由Optitrack提供，数据手套提供双手手指的角度。 01 客户端软件分别安装MotiveBody与MotionVenus并校准人体与数据手套。MotiveBodyMotionVenus数据手套使用、校准流程参照：https://gitee.com/foheart_1/foheart-h1-data-summary.git02 数据转发打开MotiveBody软件的Streaming，开始向Unity3D广播数据；MotionVenus中设置->选项选择Unit