css实现木质桌面摆列照片悬浮动画效果代码-html代码-BFW代码库

css实现木质桌面摆列照片悬浮动画效果代码

代码语言：html

所属分类：悬停

代码描述：css实现木质桌面摆列照片悬浮动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <link href="https://fonts.googleapis.com/css?family=Homemade+Apple" rel="stylesheet">
<style>
    body{  font-family: 'Homemade Apple', cursive;  font-size:20px;  background:url('//repo.bfw.wiki/bfwrepo/image/5e4350528640e.png');  background-size:cover;  background-repeat:repeat;  color:#000;}ul{  position:absolute;  margin:0;  padding:0;}li{  text-align:center;  display:inline-block;  list-style:none;  position:relative;  border:solid 12px #fff;  background:#fff;  box-shadow:0 0 15px 0px #555;  transition:all 1s ease;  -o-transition:all 1s ease;  -moz-transition:all 1s ease;  -webkit-transition:all 1s ease;  top:50px;}li:hover{  top:0px;  opacity:0.5;}li:nth-child(1){    transform:rotate(10deg);}li:nth-child(2){    transform:rotate(0deg);}li:nth-child(3){    transform:rotate(-10deg);}li:nth-child(4){    transform:rotate(20deg);}p{  margin:-15px 0 0 0;}..........完整代码请登录后点击上方下载按钮下载查看