<!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. 045.Python线程队列

    线程队列 1 基本语法和用法 put 往线程队列里防止,超过队列长度,直接阻塞 get 从队列中取值,如果获取不到,直接阻塞 put_nowait: 如果放入的值超过队列长度,直接报错(linux) ...

  2. Linux命令学习—— fdisk -l 查看硬盘及分区信息

    Linux命令学习(3)-- fdisk -l 查看硬盘及分区信息注意:在使用fdisk命令时要加上sudo命令,否则什么也不能输出linux fdisk 命令和df区别是什么? fdisk工具是分区 ...

  3. Linux C 进程

    进程 UNIX编程手册第6 7章完结 24 25 26 27 28 未完待续,可能等到期末考试结束吧 目录 进程 基础知识 内存分布 命令行参数 环境列表 获得环境 修改环境 非本地跳转 内存分配 在 ...

  4. idea开发web项目框架失效和无法启动问题

    不会配置idea的javaweb环境的小伙伴可以点击此链接 idea最新版,配置javaweb环境 很多小伙伴用idea开发web项目可能会出现所有代码都写对了但是无论如何都没法运行的情况,eclip ...

  5. 使用Jekyll + GitHub Pages免费搭建个人博客

    使用Jekyll + GitHub Pages免费搭建个人博客 My Blog:无名の辈 | VectorX (vectorxxxx.github.io) Download Ruby:Download ...

  6. Linux资源监控工具 glances

    使用资源监控工具 glances 前言 glances 可以为 Unix 和 Linux 性能专家提供监视和分析性能数据的功能,其中包括: CPU 使用率 内存使用情况 内核统计信息和运行队列信息 磁 ...

  7. Comparison of Laser SLAM and Visual SLAM

    Comparison of Laser SLAM and Visual SLAM 目前,SLAM技术广泛应用于机器人.无人机.无人机.AR.VR等领域,依靠传感器可以实现机器的自主定位.测绘.路径规划 ...

  8. redis分布式锁扣减库存弊端: 吞吐量低, 解决方法:使用 分段锁 分布式分段锁并发扣减库存--代码实现

    package tech.codestory.zookeeper.aalvcai.ConcurrentHashMapLock; import lombok.AllArgsConstructor; im ...

  9. 【NX二次开发】修改dlx对话框标题的方法

    修改dlx名称, 修改对话框标题的方法: theDialog->TopBlock()->FindBlock("Dialog")->GetProperties()- ...

  10. NetCore Dapper封装

    一.前期环境准备 1.创建一个core webapi的项目,基于core3.1版本创建一个项目. 2.Dapper安装,使用NuGet来安装Dapper程序包 Install-Package Dapp ...