<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
background: skyblue;
color: #FFFFFF;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
padding: 10px;
}

.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-size: 20px 20px;
background-repeat: no-repeat;
z-index: 16;
}

@keyframes wave {
0% {
transform: rotate(1deg);
}

100% {
transform: rotate(-1deg);
}
}
</style>
</head>
<body>
<div style="margin-top: 20px;">

<figure class="wave">
<img src="img/jiao.png" alt="rajni"></img>
<figcaption>相框</figcaption>
</figure>

</div>
</body>
</html>

css实现相框效果的更多相关文章

  1. css三级菜单效果

    一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  2. 利用target的特性，可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  3. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  4. CSS 边框 阴影 效果

    CSS 边框 阴影 效果 以下将css实现阴影效果,以便须要朋友们,直接上代码 #shadow1{ width: 200px; height: 100px; color: white; backgro ...

  5. Css实现透明效果，兼容IE8

    Css实现透明效果,兼容IE8 >>>>>>>>>>>>>>>>>>>>> ...

  6. HTML与CSS简单页面效果实例

    本篇博客实现一个HTML与CSS简单页面效果实例 index.html <!DOCTYPE html> <html> <head> <meta charset ...

  7. css 实现评分效果

    css实现评分效果,其实是css sprites (css精灵)的延伸应用,效果的实现主要是由  background-position 属性移动图片位置.之前看到有前辈写过关于这方面的内容,在理解上 ...

  8. 纯 CSS 实现波浪效果！

    一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...

  9. React 系列教程 1：实现 Animate.css 官网效果

    前言 这是 React 系列教程的第一篇,我们将用 React 实现 Animate.css 官网的效果.对于 Animate.css 官网效果是一个非常简单的例子,原代码使用 jQuery 编写,就 ...

随机推荐

  1. iPhone手机怎么和电脑互传文件,一条数据线搞定

    官方的方法是,通过iTunes进行文件的传输.传个文件还要特意安装个iTunes,实在是麻烦. 其实我们只需要在苹果应用商店app store下载Documents这个文件就可以. 另外,Docume ...

  2. mysql基础之数据库备份和恢复的基础知识

    备份数据的最终目的是为了在出现一些意外情况时,能够通过备份将数据还原,所以单单的备份数据往往是无法满足还原时的需求的,所以在备份数据库时,除了要备份数据本身,还要备份相关的数据库环境,如配置文件,定时 ...

  3. linux中级之netfilter防火墙（firewalld）

    一.firewalld主要概念 dynamic firewall daemon.支持ipv4和ipv6.Centos7中默认将防火墙从iptables升级为了firewalld.firewalld相对 ...

  4. Step By Step(Lua数据结构)

    Step By Step(Lua数据结构) Lua中的table不是一种简单的数据结构,它可以作为其它数据结构的基础.如数组.记录.线性表.队列和集合等,在Lua中都可以通过table来表示.     ...

  5. Halide视觉神经网络优化

    Halide视觉神经网络优化 概述 Halide是用C++作为宿主语言的一个图像处理相关的DSL(Domain Specified Language)语言,全称领域专用语言.主要的作用为在软硬层面上( ...

  6. CVPR 2020目标跟踪多篇开源论文（上）

    CVPR 2020目标跟踪多篇开源论文(上) 1. SiamBAN:面向目标跟踪的Siamese Box自适应网络 作者团队:华侨大学&中科院&哈工大&鹏城实验室&厦门 ...

  7. CUDA C编程接口技术分析

    CUDA C编程接口技术分析 编程接口 CUDA C为熟悉C编程语言的用户提供了一个简单的路径,可以方便地编写程序供设备执行. 它由C语言的最小扩展集和运行库组成. 核心语言扩展已经引入:cuda c ...

  8. JAVA并发(6)-并发队列ArrayBlockingQueue

    本文讲ArrayBlockingQueue 1. 介绍 一个基于数组的有界阻塞队列,FIFO顺序.支持等待消费者和生产者线程的可选公平策略(默认是非公平的).公平的话通常会降低吞吐量,但是可以减少可变 ...

  9. 操作系统-gcc编译器驱动程序

    gcc编译器驱动程序,读取x.c文件,翻译成可执行目标文件x 1.预处理阶段 预处理器(cpp)将x.c(源程序,文本文件)中的#等直接插入程序文本中,成为另一个c程序x.i(文本文件) 2.编译阶段 ...

  10. 编译原理-非确定有穷自动机(nondeterministic finite automata,NFA)

    是一个五元组,M=(S,∑,f,S0,F) S:有穷状态集 ∑:输入字母表(有穷) f:f(S,α)=S' 表示从一个状态S出发,识别了一个字α后,可以到达S'这个状态集合之间的某一个状态(可能的后继 ...