哄女朋友开心的七夕极品干货！

今天晚上跟女朋友散步，她突然问我：马上七夕了，有没有给我准备惊喜。我想了想，要不做一个3D相册吧，简单而又富有新意，在BGM下，看着相册回忆起曾经的点点滴滴，不失为一种浪漫。下面，阿淦给您带来一个炫酷的3D相册。

HTML部分：

<body>
<div id="perspective"><!-- 此处添加照片 --><div id="wrap"><img src="#" class="first"></img><img src="#" class="second"></img><img src="#" class="third"></img><img src="#" class="fouth"></img><img src="#" class="fifth"></img><img src="#" class="first"></img><img src="#" class="second"></img><img src="#" class="third"></img><img src="#" class="fouth"></img><img src="#" class="fifth"></img></div></div><div class="gfa"><div class="fa"><div class="btn"><i class="iconfont icon-yujinxiang"></i>七夕快乐<i class="iconfont icon-yujinxiang"></i><div class="son"></div></div></div></div><!-- 此处添加音频 --><audio src="#" muted autoplay controls></audio>
</body>

CSS部分：

<style>* {margin: 0;padding: 0;}body {position: relative;z-index: -2;display: flex;justify-content: center;align-items: center;height: 100vh;background: linear-gradient(45deg, purple, gold, skyblue, orangered);animation: b 5s infinite linear alternate;background-size: 600%;}#perspective {perspective: 800px;padding-top: 1px;}#wrap {display: none;width: 245px;height: 125px;margin: 200px auto;position: relative;transform-style: preserve-3d;animation: a 30s linear infinite;}.son,.btn {width: 360px;height: 70px;line-height: 70px;border-radius: 35px;color: pink;font-size: 32px;text-align: center;background: linear-gradient(135deg, orangered, skyblue, gold, purple);animation: b 5s infinite linear alternate;background-size: 600%;font-family: '华文行楷';cursor: pointer;}.btn {position: relative;}.son {z-index: -1;position: absolute;top: 30px;filter: blur(50px);}.fa {animation: c 1s infinite linear alternate;}.gfa {animation: d 1s infinite linear alternate;}@keyframes d {to {transform: scale(1.5);}}@keyframes c {to {transform: translate(-20px, -50px);}}@keyframes b {0% {background-position: 0, 0;}10% {background-position: 10%, 5%;}20% {background-position: 20%, 10%;}30% {background-position: 30%, 15%;}40% {background-position: 40%, 20%;}50% {background-position: 50%, 25%;}60% {background-position: 60%, 30%;}70% {background-position: 70%, 35%;}80% {background-position: 80%, 40%;}90% {background-position: 90%, 45%;}100% {background-position: 100%, 50%;}}@keyframes a {0% {transform: rotateY(0deg);}100% {transform: rotateY(360deg);}}#wrap img {width: 100%;height: 100%;position: absolute;left: 0;top: 0;border-radius: 1px;box-shadow: 0 0 2px #fff;}audio {display: none;}.icon-yujinxiang {color: red;font-size: 48px;vertical-align: middle;}</style>

JS部分：

<script>let oWrap = document.getElementById("wrap");let oImgs = document.getElementsByTagName('img');let deg = 360 / (oImgs.length);let timerlet first = document.querySelector('.first')let second = document.querySelector('.second')let third = document.querySelector('.third')let fouth = document.querySelector('.fouth')let fifth = document.querySelector('.fifth')let audio = document.querySelector('audio')let btn = document.querySelector('.btn')btn.addEventListener('click', function () {audio.play()oWrap.style.display = 'block'btn.style.display = 'none'})audio.addEventListener('play', function () {audio.muted = false})audio.addEventListener('ended', function () {oWrap.style.display = 'none'btn.style.display = 'block'})for (var i = 0; i < oImgs.length; i++) {oImgs[i].style.transform = 'rotateY(' + i * deg + 'deg) translateZ(400px)';}</script>

完整代码：

<!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>Document</title><link rel="stylesheet" href="./font/iconfont.css"><style>* {margin: 0;padding: 0;}body {position: relative;z-index: -2;display: flex;justify-content: center;align-items: center;height: 100vh;background: linear-gradient(45deg, purple, gold, skyblue, orangered);animation: b 5s infinite linear alternate;background-size: 600%;}#perspective {perspective: 800px;padding-top: 1px;}#wrap {display: none;width: 245px;height: 125px;margin: 200px auto;position: relative;transform-style: preserve-3d;animation: a 30s linear infinite;}.son,.btn {width: 360px;height: 70px;line-height: 70px;border-radius: 35px;color: pink;font-size: 32px;text-align: center;background: linear-gradient(135deg, orangered, skyblue, gold, purple);animation: b 5s infinite linear alternate;background-size: 600%;font-family: '华文行楷';cursor: pointer;}.btn {position: relative;}.son {z-index: -1;position: absolute;top: 30px;filter: blur(50px);}.fa {animation: c 1s infinite linear alternate;}.gfa {animation: d 1s infinite linear alternate;}@keyframes d {to {transform: scale(1.5);}}@keyframes c {to {transform: translate(-20px, -50px);}}@keyframes b {0% {background-position: 0, 0;}10% {background-position: 10%, 5%;}20% {background-position: 20%, 10%;}30% {background-position: 30%, 15%;}40% {background-position: 40%, 20%;}50% {background-position: 50%, 25%;}60% {background-position: 60%, 30%;}70% {background-position: 70%, 35%;}80% {background-position: 80%, 40%;}90% {background-position: 90%, 45%;}100% {background-position: 100%, 50%;}}@keyframes a {0% {transform: rotateY(0deg);}100% {transform: rotateY(360deg);}}#wrap img {width: 100%;height: 100%;position: absolute;left: 0;top: 0;border-radius: 1px;box-shadow: 0 0 2px #fff;}audio {display: none;}.icon-yujinxiang {color: red;font-size: 48px;vertical-align: middle;}</style>
</head><body><div id="perspective"><!-- 此处添加照片 --><div id="wrap"><img src="#" class="first"></img><img src="#" class="second"></img><img src="#" class="third"></img><img src="#" class="fouth"></img><img src="#" class="fifth"></img><img src="#" class="first"></img><img src="#" class="second"></img><img src="#" class="third"></img><img src="#" class="fouth"></img><img src="#" class="fifth"></img></div></div><div class="gfa"><div class="fa"><div class="btn"><i class="iconfont icon-yujinxiang"></i>七夕快乐<i class="iconfont icon-yujinxiang"></i><div class="son"></div></div></div></div><!-- 此处添加音频 --><audio src="#" muted autoplay controls></audio><script>let oWrap = document.getElementById("wrap");let oImgs = document.getElementsByTagName('img');let deg = 360 / (oImgs.length);let timerlet first = document.querySelector('.first')let second = document.querySelector('.second')let third = document.querySelector('.third')let fouth = document.querySelector('.fouth')let fifth = document.querySelector('.fifth')let audio = document.querySelector('audio')let btn = document.querySelector('.btn')btn.addEventListener('click', function () {audio.play()oWrap.style.display = 'block'btn.style.display = 'none'})audio.addEventListener('play', function () {audio.muted = false})audio.addEventListener('ended', function () {oWrap.style.display = 'none'btn.style.display = 'block'})for (var i = 0; i < oImgs.length; i++) {oImgs[i].style.transform = 'rotateY(' + i * deg + 'deg) translateZ(400px)';}</script>
</body></html>

效果展示：

哄女朋友开心的七夕极品干货！相关推荐

七夕节，程序员们都怎么哄女朋友开心？
大家好,马上就七夕节了,七夕节是牛郎织女鹊桥相会的相会的日子. 这篇文章的前提是,你得有个女朋友,没有就先收藏着吧! 一.七夕节的由来七夕节的来源是梁山伯与祝英台的美丽传说,化成了一对蝴蝶~ 美丽的 ...
七夕节马上要到了，前端工程师，后端工程师，算法工程师都怎么哄女朋友开心？
这篇文章的前提是,你得有个女朋友,没有就先收藏着吧! 七夕节的来源是梁山伯与祝英台的美丽传说,化成了一对蝴蝶~ 美丽的神话!虽然现在一般是过214的情人节了,但是不得不说,古老的传统的文化遗产,还是要 ...
哄女朋友开心的代码（Java）屏幕上显示love
今天我们来写一个哄女朋友开心的小代码: 毕竟我们程序员不够浪漫,所以要利用自己的知识用心去做: 涉及的知识: (1)函数的定义: (2)函数的调用: (3)循环语句,条件语句的设计: (4)二维数组的 ...
我用python爬情头，来哄女朋友开心
我用python爬情头,来哄女朋友开心. 1.资源来自:www.woyaogexing.com/ 我要个性网址这是我爬了一个多小时的成果话不多说上代码! import timeimport req ...
涨姿势｜看我如何用 Python 哄女朋友开心
女朋友特别喜欢小猪佩奇,看到小猪佩奇的玩偶就走不动了,刚好最近研究了下 Python 的 turtle 库,简言之这个库就是用来在电脑作画的,你可以操控一只画笔,包括设置其颜色速度等参数,还可以控制其 ...
用python写个程序送给女朋友_用 Python 哄女朋友开心！你觉得可行嘛?
有趣的程序媛返回主页头条号发文规范文章微头条图集小视频问答下划线代码块备注 19 / 30 有了女朋友,可相处起来总是磕磕碰碰. 有时候,很想关心她,但是你太忙了,以至于她一直抱怨, ...
用 Python 哄女朋友开心
点击上方蓝色字体,选择"标星公众号" 优质文章,第一时间送达来自 | 云外孤岛链接 | cnblogs.com/cloudbird/p/10534658.html 有了女朋友, ...
Java做一个哄女朋友开心的小程序
最近女朋友天天找我吵架得想着办法哄哄她,恰巧我还在找Java面向对象练手的小程序,两个需求一结合,ok,这个小程序诞生了. 主要目的:做一个以女朋友照片为背景的画布,装饰点小花小草小气球小爱心,另设一 ...
怎么做一个分分钟哄女朋友开心的小程序
点赞关注,不会迷路! 主要目的:做一个以女朋友照片为背景的画布,装饰点小花小草小气球小爱心,另设一个女朋友的小图片可以自由的移动. 那么就需要创建一个小花类一个气球类,一个爱心类一个移动的人物类 ...

哄女朋友开心的七夕极品干货！

哄女朋友开心的七夕极品干货！相关推荐

最新文章

热门文章