1.六边形战士
像这种多边形案例的实现,很多小朋友都会采用调整角度的方法慢慢调,但是着这种方法真的会很麻烦,甚至我们的角度计算还会用到勾股定理,勾股定理是啥,啊??不过放心,今天带给大家一个新的思路,拼接。
实现原理:将我们的多边形分成两半,采用定位的方式进行拼接,只需要折合两个非常简单的角度即可,废话不多说,直接上代码。
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
transform-style: preserve-3d;
width: 600px;
height: 600px;
margin: 400px;
position: relative;
transform: rotate3d(1, 1, 1, 0deg);
perspective: 1000px;
animation: rotate 5s linear 10s infinite;
}
.one {
transform-style: preserve-3d;
width: 200px;
height: 200px;
list-style: none;
font-size: 30px;
line-height: 200px;
text-align: center;
font-weight: bolder;
transform: rotate3d(1, 1, 1, 0deg);
background-size: contain;
}
.two {
position: absolute;
top: 0;
left: 0;
transform-style: preserve-3d;
width: 200px;
height: 200px;
list-style: none;
font-size: 30px;
line-height: 200px;
text-align: center;
font-weight: bolder;
transform: rotate3d(1, 1, 1, 0deg);
transition: top 3s linear 0s;
}
li {
width: 200px;
height: 200px;
background-color: antiquewhite;
position: absolute;
transition: transform 5s linear 3s;
background-size: contain;
}
.one li:nth-child(1) {
background-image: url(images-follow/flower4.jpg);
}
.one li:nth-child(2) {
background-image: url(images-follow/flower1.jpg);
}
.one li:nth-child(3) {
background-image: url(images-follow/flower2.jpg);
}
.two li:nth-child(1) {
background-image: url(images-follow/flower10.jpg);
}
.two li:nth-child(2) {
background-image: url(images-follow/flower11.jpg);
}
.two li:nth-child(3) {
background-image: url(images-follow/flower12.jpg);
}
div:hover .one li:nth-child(1) {
transform: rotateX(90deg);
}
div:hover .one li:nth-child(2) {
transform-origin: 0 100px;
transform: rotateX(90deg) translateX(200px) rotateY(60deg);
}
div:hover .one li:nth-child(3) {
transform-origin: 200px 100px;
transform: rotateX(90deg) translateX(-200px) rotateY(-60deg);
}
div:hover .two li:nth-child(1) {
transform: rotateX(90deg);
}
div:hover .two li:nth-child(2) {
transform-origin: 200px 100px;
transform: rotateX(90deg) translateX(-200px) rotateY(60deg);
}
div:hover .two li:nth-child(3) {
transform-origin: 0 100px;
transform: rotateX(90deg) translateX(200px) rotateY(-60deg);
}
div:hover .two {
top: 345px
}
@keyframes rotate {
from {
transform: rotate3d(1, 1, 1, 0deg);
}
to {
transform: rotate3d(1, 1, 1, 360deg);
}
}
</style>
</head>
<body>
<div>
<ul class="one">
<li></li>
<li></li>
<li></li>
</ul>
<ul class="two">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
注意事项,这个六边形有点叛逆,需要鼠标滑动上去才能展示它的魅力,整体实现思路也能通过动画展示出来,赶紧试试吧。
2.水波文字
实现原理:背景定位 + 我们的动画 + 背景裁切
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
margin: 0 auto;
text-align: center;
width: 600px;
height: 600px;
background-color: gainsboro;
}
h1{
font-size: 10em;
padding-top: 100px;
color: rgba(0, 0, 0,.1);
background-image: url(images/17.jpg) ;
background-repeat: repeat-x;
background-position: -100px -20px;
-webkit-background-clip: text;
animation: move 15s linear infinite;
}
@keyframes move{
0%{
background-position: 40px -20px;
}
20%{
background-position: 80px -50px;
}
40%{
background-position: 120px -20px;
}
80%{
background-position: 180px -50px;
}
100%{
background-position: 220px -20px;
}
}
</style>
</head>
<body>
<div>
<h1>WATER</h1>
</div>
</body>
</html>
注意事项:这里的图片使用的是自己的图片,背景图片可以找一个自己喜欢的水波纹效果,换一下即可。
3.美女
这种小案例是我们最常见的一种,看起来非常的炫酷,鼠标放上去会有放大效果,是不是可以等你女哦嗯有过生日的时候,发一个这个给她呢,也算是一个惊喜吧哈哈哈哈!!!
实现原理:3D 旋转 + 背景图片
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<style>
ul {
position: absolute;
top: 50%;
left: 50%;
margin-top: -260px;
margin-left: -260px;
transform-style: preserve-3d;
width: 520px;
height: 520px;
list-style: none;
animation: rotate 5s linear infinite;
cursor: pointer;
}
li {
position: absolute;
left: 50%;
top: 50%;
background-size: contain;
}
.one li {
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: -50px;
}
.two li {
width: 200px;
height: 200px;
margin-top: -100px;
margin-left: -100px;
opacity: 0.1;
transition: all .3s linear 0s;
}
.one li:nth-child(1) {
transform: translateZ(50px);
background-image: url(images/01.png);
}
.one li:nth-child(2) {
transform: rotateY(-90deg) translateZ(50px);
background-image: url(images/02.png);
}
.one li:nth-child(3) {
transform: rotateX(90deg) translateZ(50px);
background-image: url(images/03.png);
}
.one li:nth-child(4) {
transform: rotateX(-90deg) translateZ(50px);
background-image: url(images/04.png);
}
.one li:nth-child(5) {
transform: rotateY(90deg) translateZ(50px);
background-image: url(images/05.png);
}
.one li:nth-child(6) {
transform: rotateY(180deg) translateZ(50px);
background-image: url(images/06.png);
}
.two li:nth-child(1) {
transform: translateZ(100px) scale(1);
background-image: url(images/1.png);
}
.two li:nth-child(2) {
transform: rotateY(-90deg) translateZ(100px) scale(1);
background-image: url(images/2.png);
}
.two li:nth-child(3) {
transform: rotateX(90deg) translateZ(100px) scale(1);
background-image: url(images/3.png);
}
.two li:nth-child(4) {
transform: rotateX(-90deg) translateZ(100px) scale(1);
background-image: url(images/4.png);
}
.two li:nth-child(5) {
transform: rotateY(90deg) translateZ(100px) scale(1);
background-image: url(images/5.png);
}
.two li:nth-child(6) {
transform: rotateY(-180deg) translateZ(100px) scale(1);
background-image: url(images/6.png);
}
ul:hover li:nth-child(6) {
transform: rotateY(-180deg) translateZ(300px) scale(2);
background-image: url(images/6.png);
}
ul:hover li:nth-child(5) {
transform: rotateY(90deg) translateZ(300px) scale(2);
background-image: url(images/5.png);
}
ul:hover li:nth-child(4) {
transform: rotateX(-90deg) translateZ(300px) scale(2);
background-image: url(images/4.png);
}
ul:hover li:nth-child(3) {
transform: rotateX(90deg) translateZ(300px) scale(2);
background-image: url(images/3.png);
}
ul:hover li:nth-child(2) {
transform: rotateY(-90deg) translateZ(300px) scale(2);
background-image: url(images/2.png);
}
ul:hover li:nth-child(1) {
transform: translateZ(300px) scale(2);
background-image: url(images/1.png);
}
@keyframes rotate {
from {
transform: rotate3d(0, 1, 1, 0deg);
}
to {
transform: rotate3d(0, 1, 1, 360deg);
}
}
</style>
</head>
<body>
<ul class="one" id="box1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="two" id="box2">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
注意事项:图片由于是本地图片,会导致复制代码运行没有图片展示,大家可以将自己的图片进行一个替换就能够看到自己想要的效果了,快去拿你女朋友试试吧。