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立体按钮,比如 ...
随机推荐
- 关于RDD
1. transform操作返回的是rdd, action操作返回其它数据类型,可以以此来区分操作类型: 2. Spark懒加载,懒到直到Action操作的时候才会加载数据计算,RDD的create和 ...
- 敏捷开发（八）- Scrum Sprint计划会议1
本文主要是为了检测你对SCRUM Sprint 计划会议的了解和使用程度, 通过本文你可以检测一下 1.你们的SCRUM Sprint 计划会议的过程和步骤 2.会议的输出结果 S ...
- FZU 2240 Daxia & Suneast's problem
博弈,$SG$函数,规律,线段树. 这个问题套路很明显,先找求出$SG$函数值是多少,然后异或起来,如果是$0$就后手赢,否则先手赢.修改操作和区间查询的话可以用线段树维护一下区间异或和. 数据那么大 ...
- GraphLab介绍[转]
GraphLab介绍 原文链接:http://blog.jasonding.top/2015/06/08/Machine%20Learning/%E5%BC%80%E6%BA%90%E5%9B%BE% ...
- php笔记(六)PHP类与对象之对象接口
接口的实现 <?php //interface 关键字用于定义一个接口 interface ICanEat{ //接口里面的方法不需要实现 public function eat($food); ...
- CSS绑定
css绑定会对元素的CSS类进行操作.在某些情况下这将非常有用,例如:当数值是负的时将其高亮显示. (注:如果如果不想直接更改CSS类,而是只要改其中一个样式,则需要使用style绑定) 示例:使用静 ...
- Linux 服务器系统监控脚本 Shell【转】
转自: Linux 服务器系统监控脚本 Shell - 今日头条(www.toutiao.com)http://www.toutiao.com/i6373134402163048961/ 本程序在Ce ...
- nodejs问题整理--fs.exists无法正确判断文件的问题
fs.exists方法 方法说明: 测试某个路径下的文件是否存在.回调函数包含一个参数exists,true则文件存在,否则是false. 语法: fs.exists(path, callback) ...
- md5证书在window2012不能访问
之前在window 2008使用makecert的产生的证书,部署到window 2012后,发现只有IE能访问,但是Firefox和chrome都不行.Firefox可以使用about:config ...
- [Mark] KVM 虚拟化基本原理
X86 操作系统是设计在直接运行在裸硬件设备上的,因此它们自动认为它们完全占有计算机硬件.x86 架构提供四个特权级别给操作系统和应用程序来访问硬件. Ring 是指 CPU 的运行级别,Ring 0 ...