<!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. Linux 用户管理_用户相关配置文件详解

    linux的用户管理 linux支持多个用户同时使用同一个用户登陆系统,windows在修改组策略的情况下,也可以多个人使用同一个用户登陆. 远程连接Linux的方式:ssh 远程连接windows的 ...

  2. 9.2-3 pstree & pgrep

    9.2 pstree:显示进程状态树     pstree命令以树形结构显示进程和进程之间的关系.     如果不指定进程的PID号,或者不指定用户名称,则会以init进程为根进程,显示系统的所有进程 ...

  3. 第六章 XaaS和IT服务标准

    从云计算(Cloud Computing)谈起 云计算是一种按使用量付费的模式,这种模式提供可用的.便捷的.按需的网络访问,进入可配置的计算资源共享池(资源包括网络,服务器,存储,应用软件,服务),这 ...

  4. STM8的AIR与STM32的Keil的指定地址存数据

    [经验分享]KE02在IAR和KEIL中以常量形式初始化EEPROM值一, 经验分享描述        写这篇经验分享的原因是,之前有一个客户,他希望在KE02的芯片中,不要出现使用EEPROM操作命 ...

  5. Docker系列——Grafana+Prometheus+Node-exporter服务器告警中心（二）

    在前一篇博文中介绍,服务器监控已经部署成功.如果每天都需要人去盯着服务情况,那也不太现实.既然监控平台已经部署好了,是不是可以自动触发报警呢? 在上一篇Prometheus架构中有讲到,核心组件之一: ...

  6. 痞子衡嵌入式：快速定位i.MXRT600板级设计ISP[2:0]启动模式引脚上电时序问题的方法

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是一种快速定位i.MXRT600板级设计ISP[2-0]启动模式引脚上电时序问题的方法. 我们知道恩智浦i.MXRT600是主打音频市场的 ...

  7. 『动善时』JMeter基础 — 29、JMeter响应断言详解

    目录 1.JMeter断言介绍 2.响应断言组件界面详解 3.响应断言组件的使用 (1)测试计划内包含的元件 (2)登陆接口请求界面内容 (3)响应断言界面内容 (4)查看运行结果 (5)断言结果组件 ...

  8. CVPR2019目标检测论文看点：并域上的广义交

    CVPR2019目标检测论文看点:并域上的广义交 Generalized Intersection over Union Generalized Intersection over Union: A ...

  9. SLAM相机定位

    SLAM相机定位 摘要 深度学习在相机定位方面取得了很好的结果,但是当前的单幅图像定位技术通常会缺乏鲁棒性,从而导致较大的离群值.在某种程度上,这已通过序列的(多图像)或几何约束方法解决,这些方法可以 ...

  10. Python OpenCV图片转视频 工具贴(三)

    Python OpenCV图片转视频 粘贴即用,注意使用时最好把自己的文件按照数字顺序命名.按照引导输入操作. # 一键傻瓜式引导图片串成视频 # 注意使用前最好把文件命名为数字顺序格式 import ...