css动画-相框

下载代码

html

css

分享到微信朋友圈

html

css

body {
  background: #000000;
  color: #FFFFFF;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding:10px;
  font-family: 'Roboto Mono', monospace;
}

.wave {
  float: left;
  margin: 20px;
  animation: wave  ease-in-out 0.5s infinite alternate;
  transform-origin: center -20px;
}

.wave:hover {
  animation-play-state: paused;
}

.wave img {
  border: 5px solid #f8f8f8;
  display: block;
  width: 200px;
  height: 250px;
}

.wave figcaption {
  text-align: center;
}

.wave:after{
  content: '';
  position: absolute;
  width: 20px; 
  height: 20px;
  border: 1.5px solid #ffffff;
  top: -10px; 
  left: 50%;
  z-index: 0;
  border-bottom: none;
  border-right: none;
  transform: rotate(45deg);
}
       
.wave:before{
  content: '';
  position: absolute;
  top: -23px;
  left: 50%;
  display: block;
  height: 44px;
  width: 47px;
  background-image: url(https://www.jq22.com/newjs/FW6g79WBY.png);
  background-size: 20px 20px;
  background-repeat: no-repeat;
  z-index: 16;
}
        
@keyframes wave {
  0% { transform: rotate(3deg); }
  100% { transform: rotate(-3deg); }
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg