<!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. SpringBoot使用protobuf格式的接口

    SpringBoot使用protobuf格式的接口 建立SpringBoot项目,pom.xml内容如下: <?xml version="1.0" encoding=&quo ...

  2. 如何像如何像 NASA 顶级程序员一样编程 — 10 条重要原则

    https://www.oschina.net/news/90499/nasa-programmer-rule?from=20171112#0-qzone-1-7898-d020d2d2a4e8d1a ...

  3. 创建一个本地Yum 仓库，提升速度，减少带宽

    1 mkdir /YUM 2 mount -t iso9660 -o loop /home/dan/Centos-7-x86_x64-DVD.iso /mnt/iso/ 3 rpm -ivh delt ...

  4. Qt 设置窗体透明

    一.前言 在音频开发中,窗体多半为半透明.圆角窗体,如下为Qt 5.5 VS2013实现半透明方法总结. 二.半透明方法设置 1.窗体及子控件都设置为半透明 1)setWindowOpacity(0. ...

  5. Django（38）mac安装redis

    安装redis 1.使用Homebrew安装Redis brew install redis 执行上述命令后出现以下内容,则成功安装 Download failed: https://mirrors. ...

  6. Django基本文件配置

    1.setting.py (1) ALLOWED_HOSTS = ['*'] (2) INSTALLED_APPS = ['app_name'] (3) TEMPLATES 中的   'DIRS': ...

  7. NOIP 模拟4 T2

    本题属于二和一问题 子问题相互对称 考虑对于问题一:知a求b 那么根据b数组定义式 显然能发现问题在于如何求dis(最短路) 有很多算法可供选择 dijsktra,floyed,bfs/dfs,spf ...

  8. GO学习-(14) Go语言基础之接口

    Go语言基础之接口 接口(interface)定义了一个对象的行为规范,只定义规范不实现,由具体的对象来实现规范的细节. 接口 接口类型 在Go语言中接口(interface)是一种类型,一种抽象的类 ...

  9. L3级自动驾驶

    L3级自动驾驶 2020年开年 3月9日,工信部在其官网公示了<汽车驾驶自动化分级>推荐性国家标准报批稿,并拟于2021年1月1日开始实施. 按照中国自身标准制定的自动驾驶分级标准,在千呼 ...

  10. GPU加速计算

    GPU加速计算 NVIDIA A100 Tensor Core GPU 可针对 AI.数据分析和高性能计算 (HPC),在各种规模上实现出色的加速,应对极其严峻的计算挑战.作为 NVIDIA 数据中心 ...