css3的特效拓展...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test页面</title>
<style type="text/css">
/*关于css3 的两个伪类 ::before ::after*/
.box{
margin: 0 auto;
width: 360px;
height: 500px;
}
/*头部*/
.box_head{
margin: 0px auto;
width: 260px;
height: 140px;
background-color: greenyellow;
border-radius: 130px 130px 0 0;
}
.box_head::before{
content:'';
display: block;
width: 26px;
height: 26px;
border-radius: 13px;
background-color: white;
transform: translate(170px,58px);
}
.box_head::after{
content:'';
display: block;
width: 26px;
height: 26px;
border-radius: 13px;
background-color: white;
transform:translate(65px,33px);
}
/*中间*/
.box_conten{
margin: 0px auto;
margin-top:10px;
width: 260px;
height: 240px;
background-color: greenyellow;
border-radius: 0 0 30px 30px;
}
.box_conten::before{
content:'';
display: block;
width: 50px;
height: 180px;
border-radius: 12px;
background-color: greenyellow;
transform: translate(-70px,20px);
}
.box_conten::after{
content:'';
display: block;
width: 50px;
height: 180px;
border-radius: 12px;
background-color:greenyellow;
transform:translate(280px,-162px);
}
/*底部*/
.footer{
margin: 0px auto;
width:50px;
height: 20px;
}
.footer::before{
content:'';
display: block;
width: 50px;
height: 135px;
border-radius: 0 0 15px 15px;
background-color: greenyellow;
transform: translate(-51px,-8px);
}
.footer::after{
content:'';
display: block;
width: 50px;
height: 135px;
border-radius: 0 0 15px 15px;
background-color: greenyellow;
transform: translate(51px,-143px);
}
</style>
</head>
<body>
<div class="box">
<div class="box_head"></div>
<div class="box_conten"></div>
<div class="footer"></div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test页面</title>
<style type="text/css">
div{
margin: 10px auto;
width: 500px;
height: 200px;
background-color: darkgray;
text-align: center;
line-height: 180px;;
}
a {
position: relative;
display: inline-block;
outline: none;
text-decoration: none;
color:#fff;
font-size: 30px;
margin-right: 50px;
}
/* 大框 */
a:hover::before{
content: "\5B";
left: -15px;
color: red;
font-weight: 800;
display: block;
position: absolute;
}
a:hover::after {
content: "\5D";
color: red;
font-weight: 800;
padding: 0px 5px;
}
</style>
</head>
<body>
<div>
<a href="#">ONE A</a><a href="#">TWO B</a>
</div>
</body>
</html>
css3的特效拓展...的更多相关文章
- css3动画特效：上下晃动的div
css3动画特效:上下晃动的div <div id="square" class="container animated">上下晃动</div ...
- ShineTime - 带有 CSS3 闪亮特效的缩略图相册
ShineTime 是一个效果非常精致的缩略图相册,鼠标悬停到缩略图的时候有很炫的闪光效果,基于 CSS3 实现,另外缩略图也会有立体移动的效果.特别适用于个人摄影作品,公司产品展示等用途,快来来围观 ...
- CSS3+HTML5特效8 - 顶部和右侧固定，左侧随窗口变化的布局
原文:CSS3+HTML5特效8 - 顶部和右侧固定,左侧随窗口变化的布局 效果演示 实现原理 使用3个div(一个是顶部栏,一个是左侧栏,一个是右侧栏): 使用checkbox作为判断是否显示和隐藏 ...
- CSS3+HTML5特效9 - 简单的时钟
原文:CSS3+HTML5特效9 - 简单的时钟 效果演示(加快了100倍) 实现原理 利用CSS3的transform-origin 及 transform 完成以上效果. 代码及说 ...
- Magic CSS3 一款独特的CSS3动画特效包
插件描述: Magic CSS3 Animations 动画是一款独特的CSS3动画特效包,你可以自由地使用在您的网页中.只需简单的在页面上引入 CSS 文件: magic.css 或者压缩版本 ...
- 9款赏心悦目的HTML5/CSS3应用特效
经过几天的收集,在html5tricks网站上又增加了不少HTML5的教程和应用,今天我把几款赏心悦目的HTML5/CSS3应用特效总结了一下,一共9款HTML5特效,分享给大家. 1.HTML5 W ...
- CSS3悬停特效合集Hover.css
CSS3悬停特效合集Hover.css是一款特效丰富,支持2D变化特效.边框特效.阴影特效等: 使用简单,可直接复制相关特效代码,快速应用到元素上. 源码地址:http://www.huiyi8.co ...
- IT兄弟连 HTML5教程 CSS3属性特效 文字描边
用CSS3实现的文字描边效果,一个CSS3文字特效实例,字体可以自己随意改,字体颜色也可以自己改.IE9以下浏览器无效果,所以提醒大家测试时候要使用Google Chrome.-webkit-text ...
- 7款外观迷人的HTML5/CSS3 3D特效按钮特效
下面我整理了7款外观都十分迷人的HTML5/CSS3 3D按钮特效,有几个还挺实用的,分享给大家. 1.CSS3超酷3D弹性按钮 按钮实现非常简单 之前我们分享过几款不错的CSS3 3D立体按钮,比如 ...
随机推荐
- 利用DataSet更改数据，将更改保存到数据库中
RowState 是 DataRow 很重要的一个属性, 表示 DataRow 当前的状态. RowState 有 Added, Modified, Unchanged, Deleted, Detac ...
- 使用 Python Mock 类进行单元测试
数据类型.模型或节点——这些都只是mock对象可承担的角色.但mock在单元测试中扮演一个什么角色呢? 有时,你需要为单元测试的初始设置准备一些“其他”的代码资源.但这些资源兴许会不可用,不稳定,或者 ...
- aforge通过角点匹配图片相似度
我不知道什么原因,人品不好还是啥的 ExhaustiveTemplateMatching这个类无法高精确度的匹配图片 ........... 换一种方式,就好得多 /// <summary> ...
- python 学习 ［day6］
递归阶乘: 函数自己调用自己循环操作的模式称之为递归 def func(num): if num == 1: return 1 return num * func(num - 1) print(fun ...
- 用sql实现汉字转拼音
有时我们会需要将汉字转为拼音,例如需要将省市转为拼音后当做编码存储(尽管国家有统一的标识码,但有时候我们还是会用到),网络上也有工具提供汉字转拼音的功能,但各有优劣,一般转拼音后还会存在带声调的字母, ...
- 前端学习 html
Html 前端学习 <!DOCTYPE html> < lang="en"> <head> <meta charset="UTF ...
- C#多线程：深入了解线程同步lock,Monitor,Mutex,同步事件和等待句柄（中）
本篇继续介绍WaitHandler类及其子类 Mutex,ManualResetEvent,AutoResetEvent的用法..NET中线程同步的方式多的让人看了眼花缭乱,究竟该怎么去理解呢?其实, ...
- C#调用托管C++类（DLL）
毕设是做一个网络摄像头的相关应用.界面用WPF,图像处理部分是OpenCV.没用EmguCV的原因是国内EmguCV的资料相对比较少,EmguCV虽然提供了Winform的控件,在做UI上有一定优势, ...
- Java中获取当前日期
java.util.Date date = new Date();java.Text.SimpleDateFormat df = new SimpleDateFormat("yyyyMMdd ...
- 将可执行exe文件注册成windows服务
要把应用程序添加为服务,你需要两个小软件:Instsrv.exe和Srvany.exe.Instsrv.exe可以给系统安装和删除服务,Srvany.exe可以让程序以服务的方式运行.这两个软件都包含 ...