CSS3动画 transition，transform以及六边形，六角形的应用demo
渡一领跑计划下的demo
HTML部分代码展示
简单动画练习
-
-
-
-
-
-
-
-
CSS样式部分代码展示
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
border: 1px solid #000;
width: 800px;
height: 500px;
margin: 100px auto;
padding: 30px;
box-sizing: border-box;
}
ul li{
float: left;
width: 150px;
height: 150px;
margin: 30px 15px;
position: relative;
}
ul li:hover img{
opacity: 0.95;
transition: 0.4s;
-webkit-transition: All 1s ease-in-out;
-moz-transition: All 1s ease-in-out;
-o-transition: All 1s ease-in-out;
transform: rotate3d(10,10,10,360deg);
-webkit-transform: rotate3d(10,10,10,360deg);
-moz-transform: rotate3d(10,10,10,360deg);
-o-transform: rotate3d(10,10,10,360deg);
-ms-transform: rotate3d(10,10,10,360deg);
}
ul li:hover .star{
-webkit-transition: All 0.5s ease-in-out;
-moz-transition: All 0.5s ease-in-out;
-o-transition: All 0.5s ease-in-out;
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
ul li .box1{
width:0;
border-left: 72px solid transparent;
border-right: 72px solid transparent;
border-bottom: 40px solid #000;
opacity: 0.5;
z-index: -1;
}
ul li .box2{
width: 144px;
height: 80px;
background-color: #000;
opacity: 0.5;
z-index: -1;
}
ul li .box3{
width:0;
border-left: 72px solid transparent;
border-right: 72px solid transparent;
border-top: 40px solid #000;
position: absolute;
z-index: -1;
opacity: 0.5;
}
ul li .star{
width: 0;
height: 0;
border-left: 72px solid transparent;
border-right: 72px solid transparent;
border-bottom: 120px solid #000;
position: absolute;
z-index: -2;
top: 0px;
opacity: 0.8;
}
ul li .star::after{
width: 0;
height: 0;
border-left: 72px solid transparent;
border-right: 72px solid transparent;
border-top: 120px solid #000;
position: absolute;
content: "";
top: 40px;
left: -72px;
}
ul li img{
display: block;
width: 90px;
height: 90px;
margin:25px auto;
border-radius: 50%;
position: absolute;
top: 10px;
left: 27px;
opacity: 0.8;
}
“六边形”的难点
六边形的难点 在于尺寸上的对接，由上下两个“三角形”和中间一个“四边形” 尺寸上的结合形成一个六边形。
由三个div，形成一个图形效果。
html中设置三个box.
css样式
.box1{
width:0;
border-left: 72px solid transparent;
border-right: 72px solid transparent;
border-bottom: 40px solid #000;
opacity: 0.5;
z-index: -1;
}
.box2{
width: 144px;
height: 80px;
background-color: #000;
opacity: 0.5;
z-index: -1;
}
.box3{
width:0;
border-left: 72px solid transparent;
border-right: 72px solid transparent;
border-top: 40px solid #000;
position: absolute;
z-index: -1;
}
六角星的制作原理上下两个三角形交叉叠加，形成六角星；
这边应用到':after'伪元素；
六角星html
css样式
li{
float: left;
width: 150px;
height: 150px;
margin: 30px 15px;
position: relative;
}
.star{
width: 0;
height: 0;
border-left: 72px solid transparent;
border-right: 72px solid transparent;
border-bottom: 120px solid #000;
position: absolute;
z-index: -2;
}
.star::after{
width: 0;
height: 0;
border-left: 72px solid transparent;
border-right: 72px solid transparent;
border-top: 120px solid #000;
position: absolute;
z-index: -2;
}
制作完两个形状后，在li下设置相对定位，两个形状设置绝对定位，再通过left，top等移动元素，移动到相应位置；
上面两个图形中加入的z-index为了呈现上下叠加的图形效果。
最后同理，将img通过absolute移动到中间位置，并设置鼠标悬停通过至
动画效果，代码如下：
li:hover img{
opacity: 0.95;
transition: 0.4s;
-webkit-transition: All 1s ease-in-out;
-moz-transition: All 1s ease-in-out;
-o-transition: All 1s ease-in-out;
transform: rotate3d(10,10,10,360deg);
-webkit-transform: rotate3d(10,10,10,360deg);
-moz-transform: rotate3d(10,10,10,360deg);
-o-transform: rotate3d(10,10,10,360deg);
-ms-transform: rotate3d(10,10,10,360deg);
}
通过以上代码，img图片属性就可以实现透明度和动画的效果，如gif图的效果。
感谢阅读哦，小生也是刚入门的新手，写这样的demo目的也是为了学习，哪里有讲错，或者有更好的写法希望大佬们指点，不喜勿喷哦！！
作者：A丶Show
