程序猿表白小程序附件2

最新推荐文章于 2021-07-03 17:45:46 发布
最新推荐文章于 2021-07-03 17:45:46 发布
阅读量92 收藏
点赞数
分类专栏： 网页开发 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43488742/article/details/116333479
版权

music.css

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

.clearfix:after {
	display: block;
	content: '';
	clear: both;
}

.main {
	width: 500px;
	height: 500px;
	margin: 0px auto;
	position: relative;
}

.box {
	transform-style: preserve-3d;
	position: absolute;
	width: 240px;
	height: 240px;
	left: 50%;
	margin-left: -120px;
	top: 50%;
	margin-top: -120px;
	transform: perspective(800px) rotateX(-20deg) rotateY(-20deg) translateZ(-20px);
	z-index: 5;
	animation: imgMove 5s linear;
}

@keyframes imgMove {
	0%{
		transform: rotateX(-20deg)rotateY(-20deg);
	}
	30%{
		transform: rotateX(-80deg)rotateY(-80deg);
	}
	60% {
		transform: rotateX(-160deg)rotateY(-160deg);
	}
	90% {
		transform: rotateX(-240deg)rotateY(-240deg);
	}
	120%{
		transform: rotateX(-320deg)rotateY(-320deg);
	}
	150%{
		transform: rotateX(-240deg)rotateY(-240deg);
	}
	180% {
		transform: rotateX(-180deg)rotateY(-180deg);
	}
	210% {
		transform: rotateX(-120deg)rotateY(-120deg);
	}
	240% {
		transform: rotateX(-80deg)rotateY(-80deg);
	}
	300% {
		transform: rotateX(-60deg)rotateY(-60deg);
	}
	360% {
		transform: rotateX(-20deg)rotateY(20deg);
	}
}

.box li {
	list-style: none;
	width: 240px;
	height: 240px;
	position: absolute;
	opacity: 0.8;
}
.box li img {
	width: 240px;
	height: 240px;
	vertical-align: middle;
}

.box li:nth-child(1) {
	transform: translateZ(120px);
	-webkit-transform: translateZ(120px);
}

.box li:nth-child(2) {
	transform: rotateX(90deg) translateZ(120px);
	-webkit-transform: rotateX(90deg) translateZ(120px);
}

.box li:nth-child(3) {
	transform: translateZ(-120px);
	-webkit-transform: translateZ(-120px);
}

.box li:nth-child(4) {
	transform: rotateX(90deg) translateZ(-120px);
	-webkit-transform: rotateX(90deg) translateZ(-120px);
}

.box li:nth-child(5) {
	transform: rotateY(90deg) translateZ(120px);
	-webkit-transform: rotateY(90deg) translateZ(120px);
}

.box li:nth-child(6) {
	transform: rotateY(90deg)translateZ(-120px);
	-webkit-transform: rotateY(90deg)translateZ(-120px);
}

.box .imgOpen {
	opacity: 0.6;
}

.box .imgOpen:nth-child(1) {
	transform: translateZ(180px);
	-webkit-transform: translateZ(180px);
}

.box .imgOpen:nth-child(2) {
	transform: rotateX(90deg) translateZ(180px);
	-webkit-transform: rotateX(90deg) translateZ(180px);
}

.box .imgOpen:nth-child(3) {
	transform: translateZ(-180px);
	-webkit-transform: translateZ(-180px);
}

.box .imgOpen:nth-child(4) {
	transform: rotateX(90deg) translateZ(-180px);
	-webkit-transform: rotateX(90deg) translateZ(-180px);
}

.box .imgOpen:nth-child(5) {
	transform: rotateY(90deg) translateZ(180px);
	-webkit-transform: rotateY(90deg) translateZ(180px);
}

.box .imgOpen:nth-child(6) {
	transform: rotateY(90deg) translateZ(-180px);
	-webkit-transform: rotateY(90deg) translateZ(-180px);
}

.minBox {
	transform-style: preserve-3d;
	position: absolute;
	width: 120px;
	height: 120px;
	left: 50%;
	margin-left: -60px;
	top: 50%;
	margin-top: -30px;
	transform: perspective(800px) rotateX(-15deg) rotateY(0deg) rotateZ(45deg) translateZ(-100px);
}

.minBox dd {
	width: 120px;
	height: 120px;
	position: absolute;
	z-index: 4;
}

.minBox dd img {
	width: 120px;
	height: 120px;
	vertical-align: middle;
}

.minBox dd:nth-child(1) {
	transform: translateZ(60px);
	-webkit-transform: translateZ(60px);
}

.minBox dd:nth-child(2) {
	transform: rotateX(90deg) translateZ(60px);
	-webkit-transform: rotateX(90deg) translateZ(60px);
}

.minBox dd:nth-child(3) {
	transform: translateZ(-60px);
	-webkit-transform: translateZ(-60px);
}

.minBox dd:nth-child(4) {
	transform: rotateX(90deg) translateZ(-60px);
	-webkit-transform: rotateX(90deg) translateZ(-60px);
}

.minBox dd:nth-child(5) {
	transform: rotateY(90deg) translateZ(60px);
	-webkit-transform: rotateY(90deg) translateZ(60px);
}

.minBox dd:nth-child(6) {
	transform: rotateY(90deg)translateZ(-60px);
	-webkit-transform: rotateY(90deg)translateZ(-60px);
}

.box .imgOpen:nth-child(1) {
	transform: translateZ(180px);
	-webkit-transform: translateZ(180px);
}

.box .imgOpen:nth-child(2) {
	transform: rotateX(90deg) translateZ(180px);
	-webkit-transform: rotateX(90deg) translateZ(180px);
}

.box .imgOpen:nth-child(3) {
	transform: translateZ(-180px);
	-webkit-transform: translateZ(-180px);
}

.box .imgOpen:nth-child(4) {
	transform: rotateX(90deg) translateZ(-180px);
	-webkit-transform: rotateX(90deg) translateZ(-180px);
}

.box .imgOpen:nth-child(5) {
	transform: rotateY(90deg) translateZ(180px);
	-webkit-transform: rotateY(90deg) translateZ(180px);
}

.box .imgOpen:nth-child(6) {
	transform: rotateY(90deg) translateZ(-180px);
	-webkit-transform: rotateY(90deg) translateZ(-180px);
}

.play {
	animation-play-state: running !important;
}

.pause {
	animation-play-state: paused !important;
}

.catMain {
	width: 500px;
	position: absolute;
	top: 80%;
	left: 47%;
}

.content-info {
	width: 140px;
	text-align: center;
	font-size: 40px;
	line-height: 200px;
}

.cat {
	position: absolute;
	transform-style: preserve-3d;
	transform: perspective(800px) scale(0.3) translateZ(-20px);
}

.head_content {
	position: absolute;
	top: 100px;
}

.ear_left {
	width: 100px;
	height: 150px;
	background-color: #FCEDBC;
	border-radius: 50% / 10%;
	position: absolute;
	top: 22px;
	left: 16px;
	transform: rotate(-20deg);
}

.ear_right {
	width: 100px;
	height: 150px;
	background-color: #FCEDBC;
	border-radius: 50% / 10%;
	position: absolute;
	top: 22px;
	left: 227px;
	transform: rotate(20deg);
}

.head {
	width: 345px;
	height: 270px;
	background-color: #FFF5D7;
	-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
	border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
	position: absolute;
	top: 0;
}

.brow_left {
	width: 44px;
	height: 20px;
	border: 1px solid transparent;
	border-top: 2px solid #000;
	border-radius: 50%/35%;
	position: absolute;
	top: 49px;
	left: 60px;
	transform: rotate(-37deg);
}

.brow_right {
	width: 44px;
	height: 20px;
	border: 1px solid transparent;
	border-top: 2px solid #000;
	border-radius: 50%/35%;
	position: absolute;
	top: 49px;
	left: 240px;
	transform: rotate(37deg);
}

.eye_left {
	width: 70px;
	height: 70px;
	background: #fff;
	border: 1px solid #000;
	border-radius: 50%;
	position: absolute;
	top: 67px;
	left: 70px;
}

.eye_right {
	width: 70px;
	height: 70px;
	background: #fff;
	border: 1px solid #000;
	border-radius: 50%;
	position: absolute;
	top: 67px;
	left: 205px;
}

.pupil {
	width: 38px;
	height: 38px;
	background: #000;
	border-radius: 50%;
	position: absolute;
	top: 30px;
	left: 7px;
}

.beard_left1 {
	width: 95px;
	border-top: 1px solid #000;
	position: absolute;
	top: 158px;
	left: -50px;
	transform: rotate(10deg);
}

.beard_left2 {
	width: 95px;
	border-top: 1px solid #000;
	position: absolute;
	top: 187px;
	left: -60px;
	transform: rotate(-7deg);
}

.beard_left3 {
	width: 95px;
	border-top: 1px solid #000;
	position: absolute;
	top: 208px;
	left: -50px;
	transform: rotate(-16deg);
}

.beard_right1 {
	width: 95px;
	border-top: 1px solid #000;
	position: absolute;
	top: 158px;
	left: 300px;
	transform: rotate(-10deg);
}

.beard_right2 {
	width: 95px;
	border-top: 1px solid #000;
	position: absolute;
	top: 187px;
	left: 310px;
	transform: rotate(7deg);
}

.beard_right3 {
	width: 95px;
	border-top: 1px solid #000;
	position: absolute;
	top: 208px;
	left: 300px;
	transform: rotate(16deg);
}

.nose {
	width: 20px;
	height: 10px;
	background-color: #000;
	border-radius: 50%/40%;
	position: absolute;
	top: 142px;
	left: 161px;
}

.mouse {
	position: absolute;
	top: 152px;
	left: 171px;
}

.mouse_top {
	height: 10px;
	border-left: 1px solid #000;
	position: absolute;
	top: 0;
	left: 0;
}

.mouse_left {
	width: 100px;
	height: 100px;
	border: 1px solid transparent;
	border-bottom: 1px solid #000;
	border-radius: 50%;
	position: absolute;
	top: -78px;
	left: -86px;
}

.mouse_right {
	width: 100px;
	height: 100px;
	border: 1px solid transparent;
	border-bottom: 1px solid #000;
	border-radius: 50%;
	position: absolute;
	top: -78px;
	left: -14px;
}

.mouse_bottom {
	width: 20px;
	height: 20px;
	border: 1px solid transparent;
	border-bottom: 1px solid #000;
	border-right: 1px solid #000;
	position: absolute;
	top: 8px;
	left: -9px;
	transform: rotate(45deg);
}

.mouse_bottom_show {
	width: 100px;
	height: 100px;
	border: 1px solid transparent;
	border-bottom: 1px solid #000;
	border-radius: 50%;
	position: absolute;
	top: -63px;
	left: -49px;
}

.miao {
	position: absolute;
	top: -5px;
	left: 52px;
	font-size: 20px;
	opacity: 0;
	color: #FD7055;
	animation: miaoAnim 3s linear 1s infinite;
}

.miao img {
	width: 80px;
	height: 80px;
}

@keyframes miaoAnim {
	0% {
		opacity: 0;
		top: -5px;
		left: 52px;
	}
	30% {
		opacity: 1;
		top: -20px;
		left: 72px;
		font-size: 23px;
	}
	65% {
		opacity: 0.5;
		top: -35px;
		left: 92px;
		font-size: 26px;
	}
	100% {
		opacity: 0;
		top: -50px;
		left: 112px;
		font-size: 30px;
	}
}

.body_content {
	position: absolute;
	top: 305px;
	left: 101px;
}

.body {
	width: 140px;
	height: 165px;
	background: #FCEDBC;
	border: 1px solid #000;
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -10;
}

.arm_left {
	width: 20px;
	height: 80px;
	background: #FAE8AD;
	border: 1px solid #000;
	border-radius: 50% / 40%;
	position: absolute;
	top: 30px;
	left: 10px;
	transform: rotate(50deg);
	z-index: -20;
}

.arm_right {
	width: 20px;
	height: 80px;
	background: #FAE8AD;
	border: 1px solid #000;
	border-radius: 50% / 40%;
	position: absolute;
	top: 30px;
	left: 110px;
	transform: rotate(-50deg);
	z-index: -20;
}

.leg_left {
	width: 30px;
	height: 93px;
	background: #FAE8AD;
	border: 1px solid #000;
	border-radius: 50% / 40%;
	position: absolute;
	top: 88px;
	left: 14px;
	transform: rotate(-20deg);
	z-index: -20;
}

.leg_right {
	width: 30px;
	height: 93px;
	background: #FAE8AD;
	border: 1px solid #000;
	border-radius: 50% / 40%;
	position: absolute;
	top: 88px;
	left: 96px;
	transform: rotate(20deg);
	z-index: -20;
}

.tail {
	position: absolute;
	top: 86px;
	left: 52px;
	z-index: -30;
	animation: tailanim 1.5s infinite;
}

.tail1 {
	width: 236px;
	height: 100px;
	border: 1px solid transparent;
	border-top: 1px solid #000;
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0;
	transform: rotate(-25deg);
}

.tail2 {
	width: 61px;
	height: 41px;
	border: 1px solid transparent;
	border-bottom: 1px solid #000;
	border-right: 1px solid #000;
	border-radius: 50%;
	position: absolute;
	top: -13px;
	left: 145px;
	transform: rotate(-38deg);
}

.tail3 {
	width: 23px;
	height: 30px;
	border: 1px solid transparent;
	border-bottom: 1px solid #000;
	border-right: 1px solid #000;
	border-radius: 50%;
	position: absolute;
	top: 5px;
	left: 148px;
	transform: rotate(121deg);
}

@keyframes tailanim {
	/*灏惧反鍔ㄧ敾*/
	20% {
		transform: rotate(5deg);
	}
	40% {
		transform: rotate(0deg);
	}
	60% {
		transform: rotate(10deg);
	}
	100% {
		transform: rotate(0deg);
	}
}

.ear_left:hover {
	animation: earLeftAnim 0.5s linear;
}

.ear_right:hover {
	animation: earRightAnim 0.5s linear;
}

@keyframes earLeftAnim {
	50% {
		top: 13px;
		transform: rotate(-3deg);
	}
	100% {
		top: 22px;
		transform: rotate(-20deg);
	}
}

@keyframes earRightAnim {
	50% {
		top: 13px;
		transform: rotate(3deg);
	}
	100% {
		top: 22px;
		transform: rotate(20deg);
	}
}
蓝焰鱼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
jquery点击按钮更改input的value值
weixin_43488742的博客
04-17 8564
jquery点击按钮更改input的value值 value值得取值范围为：8~15 readonly=“readonly”：设置输入框的值无法手动更改 效果： 源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <script src="./c...
鼠标悬停显示(/隐藏)DIV
weixin_43488742的博客
04-14 5746
鼠标悬停显示(/隐藏)DIV 效果： (1) (2) 源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>鼠标悬停显示DIV</title> </head> <body>...
程序猿表白小程序附件1
weixin_43488742的博客
05-01 114
程序猿表白小工具 style.css :root{--primary-color:hsl(196, 78%, 61%);--secondary-color:hsl(217, 15%, 83%);--success-color:hsl(165, 58%, 55%);--info-color:hsl(214, 79%, 65%);--warning-color:hsl(43, 100%, 66%);--danger-color:hsl(354, 81%, 63%);--primary-color-darke
网络编程_8(项目附件)
weixin_38717634的博客
01-13 3万+
dict.txt abandonment n.放弃 abbreviation n.缩写 abeyance n.缓办，中止 abide v.遵守 ability n.能力 able adj.有能力的，能干的 abnormal adj.反常的，变态的 aboard adv.船(车)上 abolish v.废除，取消 abolition n.废除，取消 abortion n.流产 abortive adj.无效果的，失败的 about prep.关于，大约 ab
用C语言写一个查单词的小demo
热门推荐
m0_47068593的博客
07-03 4万+
用C语言写一个查单词的小demo #include <stdio.h> #include <string.h> #include <stdlib.h> int main(int argc, const char *argv[]) { // 用只读的方式打开我们的单词库 FILE *fp = fopen("dict.txt","r"); if (NULL == fp){ perror("fopen"); return -1
第一次亲密接触(3)
《Linux就是这个范儿》
10-21 1363
原创作品，允许转载，转载时请务必以超链接形式标明文章原始出处 、作者信息和本声明。否则将追究法律责 1.4 返璞归真的命令行 有一种说法，现代计算机不是靠电力驱动，而是靠“鼠标”。多少应用程序的界面需要移动和点击鼠标来执行的。计算机本来的用意是把人类从反复单调的工作中解放出来，但适得其反，摆在我们身边的残酷现实是我们每个人每天不得不移动和点击鼠标，确保养家糊口的工作能够顺利
程序猿表白代码
11-24
"程序猿表白代码"是一个集合了各种创意和技术的项目，它展示了编程语言如何用于创造情感交流的媒介。这个压缩包包含了不同的文件，如网页、小程序等，旨在帮助程序员们制作出富有心意的表白工具。 首先，`rose....
仿猿题库微信小程序源码
最新发布
05-30
【仿猿题库微信小程序源码】是一款专为教育与考试领域设计的微信小程序应用，其源码提供了全面的功能开发框架，便于开发者进行二次定制和功能扩展。此小程序旨在为用户提供一个便捷的学习和测试平台，涵盖了各类学科...
程序猿表白前端程序css文件之二
03-03
程序猿表白前端程序css文件之二
程序猿表白前端程序css文件之一
03-03
程序猿表白前端程序css文件之一
程序猿的告白
02-14
《程序猿的告白》这个主题，显然与程序员的生活、情感表达以及可能涉及的技术工具有关。在这个场景中，"程序猿"是程序员的自嘲式昵称，它揭示了这个群体在工作之余，也有着自己的情感世界。下面将详细讨论相关知识点...
HTML文本框类型
weixin_43488742的博客
06-25 5516
1.账号：文本框设置初始值 2.密码：文本框设置初始值并加密 3.账号：文本框设置提示 4.密码：文本框加密未设初始值 1.账号： <input type="text" value="初始值" name=""> 2.密码： <input type="password" value="初始值" name=""> 3.账号： <input type="text" p...
给select下拉框设置高度
weixin_43488742的博客
04-08 4795
给select下拉框设置高度 效果： select属性： onmousedown="if(this.options.length>4){this.size=4}" onblur="this.size=0" onchange="this.size=0" this.size=4：高度为4行 this.options.length>4：总行数大于4的执行此代码 源码 <!D...
linux系统搭建静态网页
weixin_43488742的博客
07-24 4000
搭建http静态服务器环境 在阿里云上买了一个linux系统的服务器，由于域名备案周期太长，所以先做了一个通过访问服务器ip地址的静态网站！本文章搭建的环境只能通过ip访问html类型的静态网页，如果需要通过ip访问php类型的动态网页，则需要配置新的环境，可参考linux系统下php环境配置。 为避免权限问题，请先切换到root权限。 1、安装 nginx 在 CentOS 上，使用 yum 命...
前端写入数据库
weixin_43488742的博客
05-16 3976
前端写入数据库 实际上是html页面通过php文件写入数据库，php文件相当于后端。 一共需要3个文件，分别为： 1、test.html 2、data.php 3、user.sql 数据交互实现： 1、前端数据展现 2、php查询接口 3、mysql数据库建表 1、前端页面 test.html 源代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">
获取checkbox的value值
weixin_43488742的博客
04-20 3338
获取checkbox的value值 效果： 源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <script src="./ceshi/jquery-1.12.2.js"></script> <meta cha...
Myeclipse中jsp文件网页中文乱码
weixin_43488742的博客
06-26 2382
jsp文件中html中文乱码 打开网页页面中文乱码，如下 jsp文件中的代码如下： 解决方法： 将 <%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%> <% 改为 <%@page language="java" import="java.util.*" pageEnco...
PHP三种方式实现页面切换
weixin_43488742的博客
05-19 1588
HTML语言设置一个目录对应一个文本框 一个a标签对应一个div 方法一：在一个php文件里，多个a标签对应一个div 目录1 目录2 目录3 方法二：在一个php文件里，多个a标签对应多个div 目录1 目录2 目录3 <--javascript: void(0);是为解决onclick和href的冲突问题 --> 内容1 内容2 内...
c3程序猿c语言课件
12-08
很抱歉，根据提供的引用内容，我无法回答您关于C3程序猿C语言课件的问题。引用提到了C语言的一些基础知识，包括运算符、表达式、基本语句、顺序结构、选择结构、循环结构、数组、字符数组、结构体、函数、指针等等。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

蓝焰鱼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值