Animated Book

Developer
Richard
Size
2,629 Kb
Views
56,672
  1. Animated Book Previews
  2. Animated Book HTML Codes
  3. Animated Book CSS Codes

How do I make an animated book?

A book based on D&D 4th supplements, with an animation on hover.. What is a animated book? How do you make a animated book? This script and codes were developed by Richard on 02 August 2022, Tuesday.

Animated Book Previews
IQ Test

Animated Book - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated Book</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='http://fonts.googleapis.com/css?family=Overlock+SC|Lato:300,400,700,900,300italic,400italic,700italic,900italic|Gentium+Book+Basic:400,400italic,700italic,700' rel='stylesheet' type='text/css'>
<a href="#" class="book"> <div class="spine"></div> <div class="cover" style="background-image: url('http://s17.postimg.org/dvlu3nffj/lich.jpg');"> <div class="dnd">Dungeons<br>& Dragons</div>	<h2>Campaign Guide</h2>	<div class="ribbon">Campaign Book</div> </div> <div class="pages"> </div> <div class="back-cover"></div>
</a>
</body>
</html>

Animated Book - Script Codes CSS Codes

body {background-color:#454545; background-image:url('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQiaayl6XuInornOq4LDrWJXUiMzkOlC1nnDcocebbMpAR8wqFt1Q');
}
.book { position: relative; display: inline-block; width: 24em; height: 28em; color:#000;
}
.book > .cover, .book > .back-cover { height: 24em; width: 20em; background-color:#2c616f; position: absolute; top: 0; left: 0;
}
.book > .cover { z-index: 100; background-size: cover; background-position: center center; background-repeat: no-repeat; overflow: hidden; box-shadow: rgba(50, 50, 50, 0.6) .15em 0 0.6em 0px;
}
.book > .cover > .dnd {	font-family: 'Overlock SC', cursive;	text-align: center;	color: #ee0000;	font-size: 2em;	line-height: .8em;	background-color: #FFFFCC;	padding: .1em 0 .2em;	margin-top: .6em;	border-top: solid .08em #e0b414;	border-bottom: solid .08em #e0b414;	text-shadow:	-0.03em -0.03em 0 #e0b414,	0.03em -0.03em 0 #e0b414,	-0.03em 0.03em 0 #e0b414,	0.03em 0.03em 0 #e0b414;
}
.book > .cover > h2 {	text-align: center;	margin: 0;	font-family: 'Gentium Book Basic';	color: #fff;	font-weight: 300;	font-size: 1.2em;	border-bottom: solid .14em #e0b414; background-color:#2c616f;
}
.book > .cover > .ribbon {	text-align: center;	border-top: solid .14em #e0b414;	border-bottom: solid .14em #e0b414;	color: #fff;	font-family: 'Lato', sans-serif;	text-transform: uppercase;	font-size: .7em;	margin-top: 21.5em;	padding: .4em 0; background-color:#2c616f;
}
.book:hover > .cover { top: 1.8em; -ms-transform: skew(0deg,10deg); /* IE 9 */ -webkit-transform: skew(0deg,10deg); /* Chrome, Safari, Opera */ transform: skew(00deg,10deg); transition: .2s;
}
.book > .back-cover { left: .6em; top: -.6em; z-index: 0;
}
.book > .test { height: 24em; width: 1em; background-color: yellow; -ms-transform: skew(30deg,20deg); /* IE 9 */ -webkit-transform: skew(30deg,20deg); /* Chrome, Safari, Opera */ transform: skew(00deg,10deg);
}
.book > .spine { height: 24em; width: .6em; margin-top: -.3em; display: inline-block; background-color:#2c616f; vertical-align: top; -ms-transform: skew(30deg,20deg); -webkit-transform: skew(30deg,20deg); transform: skew(00deg,-45deg);
}
.book > .spine:before { content: ''; display: inline-block; background-color: rgba(0,0,0,.4); height: 24em; width: .6em;
}
.pages { content: ""; height: 24em; width: 19.8em; background-color: #fff; left: .6em; top: -.4em; position: absolute; z-index: 10; box-shadow: rgba(50, 50, 50, 0.74902) 0.1em 0px 0.1em 0px;
}
.pages:before { content: ""; height: 24em; width: 19.8em; background-color: #fff; left: -.1em; top: .1em; position: absolute; z-index: 10; box-shadow: rgba(50, 50, 50, 0.74902) 0.1em 0px 0.1em 0px;;
}
.pages:after { content: ""; height: 24em; width: 19.8em; background-color: #fff; left: -.2em; top: .2em; position: absolute; z-index: 10; box-shadow: rgba(50, 50, 50, 0.74902) 0.1em 0px 0.1em 0px;
}
.book:hover > .pages:after { top: 2em; -ms-transform: skew(30deg,20deg); /* IE 9 */ -webkit-transform: skew(30deg,20deg); /* Chrome, Safari, Opera */ transform: skew(00deg,10deg); transition: .4s;
}
.book:hover > .pages:before { top: 1.9em; -ms-transform: skew(30deg,20deg); /* IE 9 */ -webkit-transform: skew(30deg,20deg); /* Chrome, Safari, Opera */ transform: skew(00deg,10deg); transition: .8s;
}
.book > .back-cover:before { content: ""; height: 24em; width: 20em; background-color: rgba(5,5,5,0.2); display: block; position: absolute;
}
Animated Book - Script Codes
Animated Book - Script Codes
Home Page Home
Developer Richard
Username Ketziel
Uploaded August 02, 2022
Rating 3
Size 2,629 Kb
Views 56,672
Do you need developer help for Animated Book?

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!

Richard (Ketziel) Script Codes
Name
CSSman
Atomic
CSS Plus Sign
CSS Styled Select Box
Simple Responsive Image Grid
Colour Schemes
Responsive Image Grid with set Height
CSS Icon Collection
A Pen by Richard
Flex Box Tiles
Create amazing sales emails 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!