一、旋转太极
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/太极.css">
</head>
<body>
<div class="太极">
</div>
</body>
</html>
css代码:
*{
background: #ccc;
}
.太极 {
width: 0px;
height: 300px;
border-radius: 50%;
border-right:150px solid white;
border-left:150px solid black;
animation: Routor 5s linear infinite;
}
@keyframes Routor {
from{transform: rotate(0deg);}
to{transform: rotate(360deg);}
}
.太极::before{
display: block;
content: "";
background:white;
height: 50px;
width: 50px;
border-radius: 50%;
border: 50px solid black;
margin-left: -72px;
}
.太极::after{
display: block;
content: "";
background: black;
height: 50px;
width: 50px;
border-radius: 50%;
border: 50px solid white;
margin-left: -72px;
}
二、下拉菜单
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下拉菜单</title>
<link rel="stylesheet" href="../css/下拉菜单.css">
</head>
<body>
<div class="nav">
<ul>
<li class="l1">
<a href="#">父菜单1</a>
<div class="l2">
<p><a href="#">子菜单1</a></p>
<p><a href="#">子菜单2</a></p>
</div>
</li>
<li class="l1">
<a href="#">父菜单2</a>
<div class="l2">
<p><a href="#">子菜单1</a></p>
<p><a href="#">子菜单2</a></p>
</div>
</li>
<li class="l1">
<a href="#">父菜单3</a>
<div class="l2">
<p><a href="#">子菜单1</a></p>
<p><a href="#">子菜单2</a></p>
</div>
</li>
</ul>
</div>
</body>
</html>
css代码:
* {
margin: 0;
padding: 0;
}
a {
color: white;
font-size: 18px;
font-weight: bolder;
text-decoration: none;
}
ul, ol {
list-style: none;
}
.nav{
width: 900px;
height: 64px;
background: black;
}
li{
width: 100px;
height: 64px;
float: left;
line-height: 64px;
background: black;
}
.box{
display: none;
width: 100px;
height: 100px;
position: absolute;
left: 0px;
top: 20px;
margin-top: 20px;
}
.l1{
position: relative;
}
.l1:hover .l2{
display: block;
}
p{
width: 100px;
height: 64px;
background: black;
margin: 0;
}
三、页面灰度化
代码:
<!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>淘宝案例</title>
<!-- <link rel="stylesheet" href="css/reset.css"> -->
<link rel="stylesheet" href="css/淘宝商品.css">
</head>
<body>
<div class="content">
<div class="goods">
<img src="img/冬季衣服.webp" alt="">
<p class="title">
<a href="#">棉衣外套男士,冬款加绒加厚保暖,欢迎购买...</a>
</p>
<p class="price">
<span>¥299.99</span>
<span>江苏 苏州</span>
</p>
<p >
xx旗舰店欢迎您
</p>
</div>
<div class="goods">
<img src="img/冬季衣服.webp" alt="">
<p class="title">
<a href="#">棉衣外套男士,冬款加绒加厚保暖,欢迎购买...</a>
</p>
<p class="price">
<span>¥299.99</span>
<span>江苏 苏州</span>
</p>
<p >
xx旗舰店欢迎您
</p>
</div>
<div class="goods">
<img src="img/冬季衣服.webp" alt="">
<p class="title">
<a href="#">棉衣外套男士,冬款加绒加厚保暖,欢迎购买...</a>
</p>
<p class="price">
<span>¥299.99</span>
<span>江苏 苏州</span>
</p>
<p >
xx旗舰店欢迎您
</p>
</div>
<div class="goods">
<img src="img/冬季衣服.webp" alt="">
<p class="title">
<a href="#">棉衣外套男士,冬款加绒加厚保暖,欢迎购买...</a>
</p>
<p class="price">
<span>¥299.99</span>
<span>江苏 苏州</span>
</p>
<p >
xx旗舰店欢迎您
</p>
</div>
</div>
</body>
</html>
css代码:
* {
margin: 0;
filter: greyscale(1);
}
.content {
width: 1300px;
height: 2000px;
border: 1px solid #aaa;
margin: auto;
}
.goods {
width: 270px;
height: 410px;
border: 1px solid #aaa;
border-radius: 10px;
cursor: pointer;
float: left;
margin: 10px 22px;
}
.goods:hover {
border: 1px solid orange;
}
.goods > img {
width: 270px;
}
p.title {
height: 50px;
margin-top: 5px;
}
p.title > a {
font-size: 18px;
color: #222;
text-decoration: none;
}
p.title > a::before {
content: "天猫";
display: inline-block;
width: 28px;
font-size: 13px;
color: white;
background-color: #FF0036;
}
.price {
margin: 10px 0px;
}
.price>span:first-child {
font-size: 20px;
color: orange;
}
.price>span:last-child {
font-size: 14px;
color: #aaa;
margin-left: 20px;
}
.goods>p:last-child {
margin-top: 15px
}
四、3D立方体旋转
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>旋转立方体相册</title>
<link rel="stylesheet" href="../css/旋转立方体相册.css">
</head>
<body>
<div class="container">
<img src="../豆瓣电影/movie1.jpg" alt="图1">
<img src="../豆瓣电影/movie2.jpg" alt="图2">
<img src="../豆瓣电影/movie3.jpg" alt="图3">
<img src="../豆瓣电影/movie4.jpg" alt="图4">
<img src="../豆瓣电影/movie5.jpg" alt="图5">
<img src="../豆瓣电影/movie6.jpg" alt="图6">
</div>
</body>
</html>
css代码:
* {
perspective: 5000px;
}
.container {
width: 200px;
height: 200px;
margin: 300px auto;
/*border: 1px solid red;*/
position: relative;
/* 以3D显示效果 */
transform-style: preserve-3d;
/* 开始执行动画 */
animation: myRotate 5s infinite linear;
}
/* 动画效果 */
@keyframes myRotate {
from {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
.container>img {
width: 200px;
height: 200px;
position: absolute;
}
.container:hover >img:first-child {
transform: translateZ(-300px);
}
.container:hover >img:last-child {
transform: translateZ(100px);
}
.container:hover img:nth-child(2) {
transform: rotateY(-90deg) translateZ(100px);
}
.container:hover img:nth-child(3) {
transform: rotateX(90deg) translateZ(100px);
}
.container:hover img:nth-child(4) {
transform: rotateY(90deg) translateZ(100px);
}
.container:hover img:nth-child(5) {
bottom: -200px;
transform-origin: top;
transform: rotateX(-90deg) translateZ(100px);
}
.container>img:first-child {
/*底部的一张图片*/
/* 需要缩进200px,作为底部 */
transform: translateZ(-200px);
}
.container>img:last-child {
/* 顶部的一张图片*/
/*display: none;*/
}
.container>img:nth-child(2) {
/* 左侧 */
left: -200px;
transform-origin: right;
transform: rotateY(-90deg);
}
.container>img:nth-child(3) {
/* 上侧 */
top: -200px;
transform-origin: bottom;
transform: rotateX(90deg);
}
.container>img:nth-child(4) {
/* 右侧 */
right: -200px;
transform-origin: left;
transform: rotateY(90deg);
}
.container>img:nth-child(5) {
/* 下侧 */
bottom: -200px;
transform-origin: top;
transform: rotateX(-90deg);
}
五、发光按钮组
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/发光按钮.css">
</head>
<body>
<div class="box1">
<div class="box d1"><button class="button b1">按钮1</button></div>
<div class="box d2"><button class="button b2">按钮2</button></div>
<div class="box d3"><button class="button b3">按钮3</button></div>
</div>
</body>
</html>
css代码:
body{
background: wheat;
}
.box1{
margin: 200px auto;
width: 500px;
height: 500px;
}
.box{
width: 120px;
height: 60px;
margin: 50px auto;
}
.d1{
position: relative;
}
.d2{
position: relative;
}
.d3{
position: relative;
}
.button{
border: 1px solid white;
border-left: none;
border-top: none;
width: 100px;
height: 50px;
border-radius: 30px;
font-size: 25px;
display: block;
margin: 5px auto;
-webkit-box-reflect: below 2px linear-gradient(transparent,transparent 20%,rgba(15, 14, 14, 0.8));
}
.b1{
background-color: yellowgreen;
color:white;
box-shadow: 5px 5px 5px yellowgreen;
}
.b2{
background-color: red;
color: white;
box-shadow: 5px 5px 5px red;
}
.b3{
background-color: blue;
color: white;
box-shadow: 5px 5px 5px blue;
}
button:hover{
width: 105px;
height: 52.5px;
border-radius: 30px;
}