写个简单的翻书的效果

最新推荐文章于 2024-07-25 10:18:55 发布

newpepole

最新推荐文章于 2024-07-25 10:18:55 发布

阅读量110

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/newpepole/article/details/111470954

版权

纯属练练手的简单效果

     不多数，直接上 code

我的样式是外部引入的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>翻书效果练习</title>
		<link rel="stylesheet" type="text/css" href="./fanshu.css"/>
	</head>
	<body>
		<div class="shu">
			<div class="feng">小李自传</div>
			<div class="wen">
				<div class="first-page">
					<h3 style="padding-top: 50px;padding-left: 40px;">Life of Pi</h3>
					          <p style=" padding-top: 20px; padding-left: 40px;padding-right: 15px;">
					  
						          我来到人间已经渡过了12个春秋，我的出生给家里增添了许多欢乐。在温暖的家庭里慢慢地成长，从一个不懂事的幼儿变成了一个有礼貌守纪律的少年。
	听妈妈说过，婴儿时的我胖乎乎的，好聪明，刚到了九个月就会说话了，把妈妈叫得很开心；10个月就会学走路了，摇摇晃晃，东倒西歪但不让我扶，有一次从床上掉下来至今脸上还留有伤巴；奶奶说我四岁开始就很有礼貌，路上遇见熟人都会叫人。
	一眨眼的功夫，时间老人已把婴儿时期带走了，幼儿时期缓缓走来，我对幼儿园很不喜欢，妈妈送我去幼儿园很不甘愿，有一次下课后，想回家了就去爬铁栅门，被老师和妈妈批评后才慢慢地安下心来。小时候我有坚强的意志，记得六岁那年，眼科医生说我弱视，妈妈给我配了一付非常贵重的眼镜，我带上后感到已不好看又很麻烦，就不愿意带，结果我天天下午跟爷爷打羽毛球，不到一年的功夫奇迹就发生了，我的视力恢复到正常了，一家人都很高兴！
					          </p>
				</div>
			</div>
		</div>
	</body>
</html>

这里是 css的样式，拼音大家就随便看下

*{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            height: 100vh;
            background-image: radial-gradient(white,black);
           
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .shu{
            position: relative;
            width: 300px;
            height: 400px;
            background-color: rgba(255, 255, 255, 0.774);
            transform-style:  preserve-3d;
            box-shadow:   300px 0px 30px  rgb(0, 0, 0,.6) inset;
            transition: 1s cubic-bezier(.79,.34,.47,.92);
        }
        .shu::after{
            content: '';
            position: absolute;
            height: 3px;
            width: 303px;
            left: 0px;
            bottom: -3px;
           /*  background-color: rgb(100, 96, 96); */
           background-image: linear-gradient(to right,rgb(71, 68, 68),rgba(124, 120, 120, 0.3) );
            border-bottom-left-radius: 5px;
        }
        .shu::before{
            content: '';
            position: absolute;
            width: 3px;
            height: 100%;
            right: -3px;
            top: 0px;
            background-color: rgb(112, 108, 108);
           background-image: linear-gradient(to top,rgb(114, 111, 111),rgba(90, 87, 87, 0.5) );;
            border-top-right-radius: 3px;
        }

        .shu:hover{
            box-shadow:   30px 0px 30px  rgb(0, 0, 0,.6) inset;
            transform: rotate(-5deg);

        }
        .feng{
            position: absolute;
            width: 100%;
            height: 100%;
			font-size: 22px;
			line-height: 100px;
			font-family: "bradley hand itc"; 
			text-align: center;
            z-index: 2;
           /* background-image: url(4.jpg); */
		   background-color: rgb(212, 212, 105);
            background-size: 100% ;
            transform-origin: left;
            transition: 1s cubic-bezier(.79,.34,.47,.92);
            border-top-left-radius: 2px;
            border-bottom-left-radius: 2px;
           
           
        }
        .shu:hover .feng{
            transform: rotateY(-140deg);
            
        }
       
     
        .wen{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            font-family: 'fangsong';
            text-align: left;
        }

newpepole

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
写个简单的翻书的效果

纯属练练手的简单效果不多数，直接上 code我的样式是外部引入的<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>翻书效果练习</title> <link rel="stylesheet" type="text/css" href="./fanshu.css"/> </head> <body>
复制链接

扫一扫