發條蒟蒻 Zuchrou

Developer

Size

7,060 Kb

Views

12,144

發條蒟蒻 Zuchrou Previews
發條蒟蒻 Zuchrou HTML Codes
發條蒟蒻 Zuchrou CSS Codes

How do I make an 發條蒟蒻 zuchrou?

What is a 發條蒟蒻 zuchrou? How do you make a 發條蒟蒻 zuchrou? This script and codes were developed by Zuchrou on 14 November 2022, Monday.

發條蒟蒻 Zuchrou Previews

發條蒟蒻 Zuchrou - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>發條蒟蒻 Zuchrou</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/earlyaccess/notosanstc.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<body></body>
<div class="bg_line"></div>
<div class="tb00"> <div class="tb_anima"></div> <div class="tb01"> <div class="logo"> <div class="pic"> <div class="cube"></div> <div class="cube_block_a"> <div class="tria_a"></div> <div class="cube_a"></div> <div class="dot_a"></div> </div> <div class="cube_block_b"> <div class="tria_b"></div> <div class="cube_b"></div> <div class="dot_b"></div> </div> </div> <div class="cube"></div> </div> </div> <div class="tb02"></div> <div class="tb02"> <div class="tittle"> <h1>發條蒟蒻</h1> <h2>轉動，像是小小發條努力著</h2> </div> <div class="tb03"> <div class="info"> <div class="block"> <h3>ABOUT ME <h4> <h7>屈柔 </h7> Zuchrou<br /> [email protected]<br /> 2D動畫設計師 </h4> </h3> </div> <div class="block"> <h3>SKILLS <h4>2D動畫設計‧多媒體設計<br /> 動作‧特效‧分鏡<br /> 簡易平面‧簡易網頁程式<br /> </h4> </h3> </div> <div class="block"> <h3>ABOUT ME MORE<a href="https://www.facebook.com/zuchrou" target="_blank"> <h4> Facebook<br /></h4></a></h3> </div> </div> </div> </div>
</div>
</body>
</html>

發條蒟蒻 Zuchrou - Script Codes CSS Codes

a, hr { text-decoration: none; display: block; border-style: none; border-top-style: solid;
}
a:link { text-decoration: none; border: solid 0px;
}
a:visited { border: solid 0px; text-decoration: none;
}
a:active { color: #e29383; text-decoration: none;
}
* { font-family: "Noto Sans TC", sans-serif;
}
html, body { margin: 0px; padding: 0px; background-color: #575757;
}
.tb00 { width: 100%; height: 100%; font-size: 12; letter-spacing: 1px; color: #dac08c !important;
}
.tb_anima { position: absolute; width: 550px; height: 810px; background-image: url("https://s-media-cache-ak0.pinimg.com/originals/42/78/ca/4278cafe74f61e6dd278064178b59f19.gif"); background-position: right center; left: 70%;
}
.tb01 { position: absolute; width: 350px; height: 100%; cursor: pointer;
}
.tb02 { position: absolute; top: 0; bottom: 0; left: 350px; right: 0; width: 500px; height: 100%;
}
.tb03 { position: absolute; top: 0; bottom: 0; left: 350px; right: 0; width: 600px; height: 100%;
}
.tb04 { position: absolute; width: 100%; height: 30px; position: absolute; bottom: 5%;
}
.bg_line { width: 90px; height: 100%; position: fixed; background-color: #dac08c;
}
.logo { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); position: relative;
}
.pic { width: 350px; height: 350px; transition-duration: 2s;
}
.pic:hover { transform: rotate3d(1, 0, 0, 180deg);
}
.pic:hover .cube_a { width: 80px; border-left: 30px solid transparent; border-right: 30px solid transparent; border-top: 80px solid #fff;
}
.pic:hover .cube_b { border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 80px solid #fff;
}
.pic:hover .tria_a { border-left: 70px solid transparent; border-right: 70px solid transparent; border-bottom: 60px solid #fff;
}
.pic:hover .tria_b { border-left: 70px solid transparent; border-right: 70px solid transparent; border-top: 60px solid #fff;
}
.cube { width: 292px; height: 35px; background-color: #dac08c; position: absolute; top: 50%; transform: translateY(-50%);
}
.cube_block_a { position: relative; top: 0%; left: 52%; width: 140px; height: 140px;
}
.cube_a { position: absolute; top: 43%; width: 80px; border-left: 30px solid transparent; border-right: 30px solid transparent; border-top: 80px solid #dac08c; transition-duration: 1s;
}
.tria_a { position: absolute; border-left: 70px solid transparent; border-right: 70px solid transparent; border-bottom: 60px solid #dac08c; transition-duration: 1s;
}
.dot_a { position: absolute; width: 50px; height: 50px; background-color: #575757; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; left: 50%; top: 70%; transform: translateX(-50%) translateY(-50%);
}
.cube_block_b { position: relative; top: 20%; left: 52%; width: 140px; height: 140px;
}
.cube_b { position: absolute; top: 0%; width: 80px; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 80px solid #dac08c; transition-duration: 1s;
}
.tria_b { position: absolute; top: 57%; border-left: 70px solid transparent; border-right: 70px solid transparent; border-top: 60px solid #dac08c; transition-duration: 1s;
}
.dot_b { position: absolute; width: 50px; height: 50px; background-color: #575757; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; left: 50%; top: 30%; transform: translateX(-50%) translateY(-50%);
}
.tittle { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); position: relative;
}
.my_photo { position: absolute; width: 100px; height: 100px; right: 240px; top: 30px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 10px; background-image: url("https://s-media-cache-ak0.pinimg.com/originals/38/e7/3b/38e73b89fda5b9b38df89584b73eb6c8.png"); background-size: cover; transition-duration: 0.5s;
}
.my_photo:hover { box-shadow: 0px 0px 40px rgba(218, 192, 140, 0.5); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 10px; border: solid 5px #cccccc;
}
h1 { font-size: 50px; letter-spacing: 2px; color: #f1de9e !important; font-weight: 100; line-height: 10px; transition-duration: 0.5s;
}
h1:hover { font-size: 50px; letter-spacing: 6px; color: #e29383 !important;
}
h1:active { font-size: 50px; letter-spacing: 6px; color: #fff !important;
}
h2 { font-size: 20px; letter-spacing: 1px; color: #dac08c !important; font-weight: 100; transition-duration: 0.5s;
}
h2:hover { font-size: 20px; letter-spacing: 5px; color: #e29383 !important;
}
h2:active { font-size: 20px; letter-spacing: 5px; color: #fff !important;
}
.info { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); position: relative;
}
a, hr { text-decoration: none; display: block; border-style: none; border-top-style: solid;
}
.block { transition-duration: 0.8s;
}
.block:hover { transform: translateY(0) translateX(0); box-shadow: 10px 10px 30px rgba(50, 50, 50, 0.3); background-color: rgba(204, 188, 155, 0.2); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}
h3 { font-size: 30px; letter-spacing: -1px; color: #f1de9e !important; margin: 5px; font-weight: 300; padding-top: 10px; padding-left: 10px;
}
h4 { font-size: 15px; letter-spacing: 2px; color: #fff !important; margin: 0px; font-weight: 100; padding-left: 30px; padding-bottom: 30px; transition-duration: 0.5s; line-height: 25px;
}
h4:hover { font-size: 15px; letter-spacing: 4px; color: #fff !important; line-height: 30px;
}
h7 { font-size: 30px; letter-spacing: 5px; color: #fff !important;
}
span { border: solid 1px #e29383; font-size: 16px; letter-spacing: 0px; color: #e29383 !important;
}
.block_scale { width: 600px; height: 400px;
}
.tool { width: 350px; height: 300px; margin: 10px;
}
.tl_block { transition-duration: 0.5s; width: 348px; height: 100px;
}
.tl_block:hover { transform: translateY(0) translateX(0); box-shadow: 0px 0px 30px rgba(249, 224, 173, 0.3); background-color: rgba(60, 60, 60, 0.8); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}
.adobe { position: relative; margin: 0px; padding: 12px; font-size: 48px; letter-spacing: 1px; color: #595457 !important; width: 60px; top: -100px; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); transition-duration: 0.5s;
}
.adobe:hover { transform: translateY(0) translateX(0); box-shadow: 5px 2px 10px rgba(0, 0, 0, 0.5);
}
.ps { background-color: #cceaf1; text-align: center;
}
.fl { background-color: #f9bcaa; text-align: center;
}
.ae { background-color: #ccbceb; text-align: center;
}
.year { position: relative; left: 90px; font-size: 8px; letter-spacing: 1px; color: #dad2c0 !important;
}
.text { position: relative; left: 90px; font-size: 14px; letter-spacing: 1px; color: #fff !important;
}
.blood { width: 235px; height: 14px; position: relative; top: 20px; left: 90px; background-color: #dfdcd7;
}
.fill { width: 348px; height: 100px; position: relative; margin: 5px;
}
.fill:hover .blood01 { background-color: #90bcc6;
}
.fill:hover .blood02 { background-color: #db9a87;
}
.fill:hover .blood03 { background-color: #a793cf;
}
.text_block { width: 100%; height: 100%; position: relative; top: 12px;
}
.blood01 { background-color: #dac08c; width: 85%; height: 100%; box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.5); transition-duration: 0.5s;
}
.blood02 { background-color: #dac08c; width: 80%; height: 100%; box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.5); transition-duration: 0.5s;
}
.blood03 { background-color: #dac08c; width: 70%; height: 100%; box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.5); transition-duration: 0.5s;
}
.skill { position: relative; top: -310px; left: 390px; width: 300px; height: 300px; overflow: hidden;
}
.cake_group { position: relative; width: 125px; height: 125px; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; overflow: hidden; transition-duration: 2s;
}
.cake_group:hover { transform: translateY(0) translateX(0); transform: rotate(-180deg); background-color: #575757; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px;
}
.cake { position: absolute; width: 5px; height: 5px; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; font-color: #433d41; padding: 45px; overflow: hidden;
}
.cake.cake_main { background-color: #fff; width: 7px; height: 7px; top: 14px; bottom: 0; left: 14px; right: 0; overflow: hidden;
}
.cake_sm { border: solid 5px #dfdcd7; top: 10px; bottom: 0; left: 10px; right: 0; overflow: hidden;
}
.cake_big { border: solid 10px #dac08c; top: 5px; bottom: 0; left: 5px; right: 0; overflow: hidden;
}
.cube_mask_45 { position: relative; background-color: #575757; width: 110px; height: 110px; top: -50px; bottom: 0; left: -50px; right: 0; transform: rotate(90deg); overflow: hidden;
}
.cube_mask_60 { position: relative; width: 100px; border-left: 30px solid transparent; border-right: 30px solid transparent; border-top: 90px solid #575757; top: 0px; bottom: 0; left: -80px; right: 0; transform: rotate(-25deg); overflow: hidden;
}
.sk_text { position: relative; top: -70px; bottom: 0; left: -85px; right: 0; font-size: 22px; letter-spacing: 0px; color: #5f5a5d !important; font-weight: 100;
}
.sk01 { font-size: 18px; letter-spacing: 0px; color: #5f5a5d !important; text-align: center;
}
.sk02 { font-size: 18px; letter-spacing: 0px; color: #5f5a5d !important; text-align: center;
}
.bottom { text-align: center; background-color: rgba(0, 0, 0, 0.1); position: absolute; top: 10px; bottom: 0; left: 0px; right: 0; width: 100%; height: 200px; transition-duration: 1s;
}
.bottom:hover { top: -50px; bottom: 0; left: 0px; right: 0; width: 100%; height: 200px; background-color: rgba(0, 0, 0, 0.3);
}
h6 { font-size: 12px; letter-spacing: 3px; color: #ccbc9b !important; font-weight: 100; transition-duration: 0.5s;
}
h6:hover { background-color: transparent; font-size: 12px; letter-spacing: 5px; color: #ccbc9b !important;
}
.botom_box { position: absolute; top: 60px; bottom: 0; left: 50%; right: 0; transform: translateX(-50%); width: 500px; height: 100px; font-size: 12px; letter-spacing: 3px; color: #666 !important; text-align: left; transition-duration: 0.5s;
}
.botom_box:hover { background-color: transparent; font-size: 12px; letter-spacing: 3px; color: #ccbc9b !important;
}

Home Page	Home
Developer	Zuchrou
Username	zuchrou
Uploaded	November 14, 2022
Rating	3
Size	7,060 Kb
Views	12,144

Do you need developer help for 發條蒟蒻 Zuchrou?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Zuchrou (zuchrou) Script Codes

Name	Size

Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!

Similar Scripts & Codes

Name	Username	Size
Slide In Panel	Vikvarg	2,811 Kb
Masonry	Uriuriuriu	5,005 Kb
HTML5 Breakout	Jaysalvat	4,873 Kb
Drawing a Terminal with CSS	Lachlanjc	3,185 Kb
Sony Xperia Z3 Flat MockUp	Dapinitial	4,379 Kb
Part 19 Bootstrap split button dropdown	Venkatesha	1,601 Kb
Review test	Otro_user_gil	4,054 Kb
Box Shadow Effects	Retrofuturistic	2,143 Kb
Bubble animation	Ftabor	6,565 Kb
Owl Carousel - jumpTo	OwlFonk	2,553 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!