抖音资讯

douyinzx

首页 > 行业资讯 > 抖音资讯 > 正文内容

抖音资讯

html表白代码大全可复制（最浪漫的编程代码可复制）

iseeyu2年前 (2024-05-08)抖音资讯151

JS和css实现，这是部分代码

注：这是一个3D场景，在PC端的话还可以按住鼠标左键并拖动鼠标，来从各个视角观察它。

降低作品档次的效果图：

寓意解释：

通过JS和CSS3组合实现的碎片飘零效果。每个碎片都由一句情话组成，无数的情话碎片构成了心型。在【情歌】伴随下，当所有【情话】碎片飞开后，便出现了更高的感情表达——【情画】。

当两个人的情感不再需要用言语——情话来表达时（即当所有【情话】碎片飞开后），就出现了更高的感情境界——情画。）

HTML代码

<!doctype html>

<html>

<head>

</head>

<body>

</audio>

梦随风醉缠绵<br>

情如茧凝成缘<br>

百花牵衣吐艳

</div>

</div>

</body>

</html>

css代码

* {

box-sizing: border-box;

}

body {

padding: 0;

margin: 0;

background: #212121;

overflow: hidden;

}

.mosaica {

position: fixed;

left: 2px;

bottom: 2px;

padding: 4px 6px;

color: #FFFFFF;

font-family: "Montserrat";

font-size: 11px;

letter-spacing: 0.06em;

}

.mosaica a{

color: #fff;

font-size: 30px;

text-decoration: none;

margin: 0 0 0 30px;

}

.mosaica a:hover{

color: orange;

}

.container {

position: absolute;

width: 0;

height: 0;

left: 43%;

top: 50%;

perspective: 1200px;

transform-origin: center center;

cursor: move;

}

.plane {

position: absolute;

display: block;

width: 900px;

height: 700px;

border: 0;

margin: -350px 0 0 -450px;

transform-style: preserve-3d;

}

.plane:before {

content: "";

position: absolute;

left: 0;

top: 0;

background: url('../img/background.jpg') no-repeat;

background-size: 100% 700px;

width: 100%;

height: 100%;

z-index: -1;

transform: translateZ(-1px);

}

.items {

position: relative;

transform-style: preserve-3d;

}

.item {

background-color: pink;

position: absolute;

overflow: hidden;

/*border: 1px solid #2785db;*/

}

.item2,

.item3{

position: absolute;

left: 0;

top:0;

overflow: hidden;

width: 100%;

height: 100%;

background:url(../img/heart.png) no-repeat center;

background-size: 85px 69.5px;

color: #fff;

text-align: center;

font-size: 75px;

line-height: 87.5px;

font-family: "微软雅黑","helvetica neue",arial,sans-serif;

font-weight: 900;

text-shadow:0 1px 0 rgba(0, 0, 0, 0.3);

}

@keyframes animate {

0% {

transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1);

transform-origin: 50% 50% 0;

opacity: 1;

}

100% {

transform: translate3d(0px, 0px, 1200px) rotateX(180deg) rotateY(360deg) rotateZ(180deg) scale3d(0, 0, 0);

transform-origin: 50% 50% 0;

opacity: 1;

}

@keyframes animate3 {

0% {

transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1);

transform-origin: 50% 50% 0;

font-size: 75px;

opacity: 1;

}

100% {

transform: translate3d(0px, 0px, 1200px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(0, 0, 0);

transform-origin: 50% 50% 0;

font-size: 150px;

opacity: 1;

color: orange;

}

.item.animate {

transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1);

transform-origin: 50% 50% 0;

animation: animate 15s forwards;

}

.item2.animate {

transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1);

transform-origin: 50% 50% 0;

animation: animate 10s forwards;

}

.item3.animate {

transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1);

transform-origin: 50% 50% 0;

animation: animate3 10s forwards;

}

.poem{

position: absolute;

top:18%;

left: 78%;

line-height: 80px;

color: #fff;

font-size: 30px;

font-family: "微软雅黑","helvetica neue",arial,sans-serif;

font-weight: 800;

text-shadow:1px 0px #009807, 1px 2px #006705, 3px 1px #009807, 2px 3px #006705, 4px 2px #009807, 4px 4px #006705, 5px 3px #009807;

}

JavaScript代码

window.onload=function(){

class Orbit {

constructor(target, dumping=10, from={ x: 0, y: 0 }, to={ x: 0, y: 0 }) {

this.__target = target

this.dumping = dumping;

this.desire_rotateZ = -to.y;

this.desire_rotateX = -to.x;

this.rz = from.y;

this.rx = from.x;

this.isDragging = false;

this.previousMousePosition = {

x: 0,

y: 0

};

this.behaviours();

}

behaviours(){

$(document).on("mousedown", this.handleDown.bind(this))

$(document).on("mouseup", this.handleUp.bind(this))

$(document).on("mousemove", this.handleMove.bind(this))

window.requestAnimationFrame(this.update.bind(this));

}

handleDown(e){

this.isDragging = true;

if( !this.firstDrag ){

this.previousMousePosition = {

x: e.pageX,

y: e.pageY

}

this.firstDrag = true;

}

handleUp(e){

this.isDragging = false;

}

handleMove(e){

let deltaMove = {

x: e.pageX-this.previousMousePosition.x,

y: e.pageY-this.previousMousePosition.y

};

if(this.isDragging){

this.desire_rotateZ += deltaMove.x;

this.desire_rotateX += deltaMove.y;

}

this.previousMousePosition = {

x: e.pageX,

y: e.pageY

};

}

rotation(x, y){

this.desire_rotateZ = x;

this.desire_rotateX = y;

}

update(){

this.rz += (( (this.desire_rotateZ*-1) - this.rz) / this.dumping);

this.rx += (( (this.desire_rotateX*-1) - this.rx) / this.dumping);

this.__target.css({

"transform": "translateZ(-300px) rotateX("+this.rx+"deg) rotateZ("+this.rz+"deg)"

})

window.requestAnimationFrame(this.update.bind(this));

}

let orbit1 = new Orbit( $("#plane1"), 40, { x: 0, y: 0 }, { x: 40, y: 30 } )

function animate(){

$(".item,.item2,.item3").removeClass("animate")

setTimeout(function(){

$(".item,.item2,.item3").addClass("animate")

}, 250)

setTimeout(animate, 25000);

}

animate()

}

扫描二维码推送至手机访问。

转载请注明出处https://www.0291.com.cn/post/42320.html

返回列表

上一篇：板载声卡是什么意思（电脑板载声卡的安装教程）

下一篇：电影解说背景音乐推荐排行（影视解说文案自动生成）

现在，非常期待与您的又一次邂逅

我们努力让每一部企业宣传片和抖音短视频成为商业大片

咨询热线立即免费咨询

抖音资讯

html表白代码大全可复制（最浪漫的编程代码可复制）

相关文章

直播代运营合同避坑：报价、KPI、违约金一次说清

抖音千川投放怎么投？2026新手起量避坑指南

抖音短视频带货怎么做？2026年挂车出单实操指南

抖音矩阵号怎么做？2026年企业多账号布局实操

抖音蹭热点总翻车？2026年商家追热点的正确姿势

企业抖音蓝V认证2026流程：材料准备与审核避坑

现在，非常期待与您的又一次邂逅

Copyright 西安泽虎短视频代运营 Rights Reserved.陕ICP备2023011092号

Powered By Z-BlogPHP. Theme by TOYEAN.