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立体按钮,比如 ...
随机推荐
- Winform ComBox模糊查询
一.添加数据源并绑定 List<string> list = new List<string>(); list.Add("张三"); list.Add(&q ...
- Unity3DGUI：人物能量条
- POJ 3139 Balancing the Scale
枚举. 看了这个方法:$http://www.cppblog.com/shiming413/archive/2008/12/21/29671.html$ 将数字归类的地方不能用$vector$,会超时 ...
- Vrui 增加自定义事件
#include <Vrui/Application.h> #include <GL/GLObject.h> #include <Vrui/Vrui.h> #inc ...
- JQ怎么跳出 each循环
return false;——跳出所有循环:相当于 javascript 中的 break 效果. return true;——跳出当前循环,进入下一个循环:相当于 javascript 中的 con ...
- PHP字符串转义
与PHP字符串转义相关的配置和函数如下: 1.magic_quotes_runtime 2.magic_quotes_gpc 3.addslashes()和stripslashes() 4.mysql ...
- UNIX基础--进程和守护进程
进程和守护进程 Processes and Daemons 进程(Processes) FreeBSD 是一个多任务操作系统. 这就意味着好像一次可以运行一个以上的程序. 每个占用一定时间运行的程序就 ...
- surface pro系统按键+重装系统
一. 如果无法进入系统: surface pro1代,可以插入U盘启动盘,然后按音量键上键,然后按电源键,然后释放电源键,然后等屏幕上"Surface"出来后,释放音量键. 2代以 ...
- Java List&Map简单初始化方法
Java中List与Map初始化的一些写法 // InitCollections.java - sample of init collect package com.util; import java ...
- 整理了一份React-Native学习指南
原文: http://www.w3ctech.com/topic/909 自己在学习React-Native过程中整理的一份学习指南,包含 教程.开源app和资源网站等,还在不断更新中.欢迎pull ...