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立体按钮,比如 ...
随机推荐
- php 中数据类型
总体划分 8 中 1基本类型(标量) 整型 int 整型的三种写法 <?php $n1 = 123; //10进制 $n2 = 0123; //8进制 $n3 = 0x123;//16进制 // ...
- php常量作用
PHP常量的特点是: 1.不能通过外部来传递,也就是不能通过get与post还有cookie等方式来传递赋值,所以可以确定是程序执行过程中定义的,非外界变量.2.定义后不能更改,可以防止被篡改. 基于 ...
- svn自动备份并上传到ftp
.建立bat文件 simpleBackup.bat,文件内容如下 @echo 正在备份版本库%1......@%SVN_HOME%bin\svnadmin hotcopy %1 %BACKUP_DIR ...
- 相机标定 matlab opencv ROS三种方法标定步骤（3）
三 , ROS 环境下 如何进行相机标定 刚开始做到的时候遇到一些问题没有记录下来,现在回头写的时候都是没有错误的结果了,首先使用ROS标定相机, 要知道如何查看节点之间的流程图 rosrun r ...
- php遍历目录下文件，并读取内容
<?php echo "<h2>遍历目录下文件,并读取内容</h2><br>\n"; function listDir($dir) { i ...
- git 克隆到本地linux目录的2种方式
登录到gitlab查看2种不同的地址 ssh 类型 地址 git@inc.xxxx:shiwf/xxxAdmin.git http类型 地址 http://inc.xxxx:8000/shiwf/xx ...
- php 便利数组方法
数组在PHP中是一个非常强大的武器,用起来方便.容易,由于使用起来异常灵活,用它就可以实现数据结构中的链表.栈.队列.堆以及所谓的字典.集合等,也可以转换成XML格式. 1.使用for for语句遍历 ...
- invalid receiver type
Because in a case like this: type I int type P *I func (i I) Get() int { return int(i) } func (p P) ...
- for i in xrange(0,5)使用过程中遇到的问题
文件中共有4行内容. fd = open("C:\Users\william\Desktop\dup_file - Copy (2).txt")for i in xrange(0, ...
- drupal 连表查询+分页
$query = db_select('Table','t'); $query->join('Table_A','a','on条件); $query->join('Table_B','b' ...