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立体按钮,比如 ...
随机推荐
- iOS导航标题不居中问题(转载)
前言 一直以来都让我很头痛的一个问题:系统自带的导航条,在标题文字很长时,进入到下一个界面,而下一个界面的标题也很长时,就会出现标题不居中显示. 曾经,我尝试过很多种办法,但是都没有从根上解决问题.下 ...
- 记录下 js各种证件的正则验证
身份证 /(^\d{15}$)|(^\d{17}([0-9]|X)$)/ 护照 /^[a-zA-Z0-9]{3,21}$/ /^(P\d{7})|(G\d{8})$/ 军官证或士兵证 ...
- Tomcat7性能优化
目的 通过优化tomcat提高网站的并发能力. 服务器资源 服务器所能提供CPU.内存.硬盘的性能对处理能力有决定性影响. 优化配置 配置tomcat管理员账户 在conf/ tomcat-users ...
- 某网站看到的某神的Symfony_使用心得
1.symfony2这种量级的框架怎么可能有捷径可走?其定位是松藕合和易扩展,并不是很容易的事.sf2是靠configuration系统(它可以把各种语义化yml配置转为数组)和服务容器概念来实现的b ...
- 转:AFNetworking 与 UIKit+AFNetworking 详解
资料来源 : http://github.ibireme.com/github/list/ios GitHub : 链接地址 简介 : A delightful iOS and OS X networ ...
- Thrift学习记录
Thrift学习记录 Thrift是一个软件框架,用来进行可扩展且跨语言的服务的开发.它结合了功能强大的软件堆栈和代码生成引擎,以构建在C++,Java,Python,PHP,Ruby,Erlang, ...
- linux操作数据库
1.显示数据库 show databases; 2.选择数据库 use 数据库名; 3.显示数据库中的表 show tables; 4.显示数据表的结构 describe 表名; 5.显示表中记录 S ...
- nodejs问题整理--fs.exists无法正确判断文件的问题
fs.exists方法 方法说明: 测试某个路径下的文件是否存在.回调函数包含一个参数exists,true则文件存在,否则是false. 语法: fs.exists(path, callback) ...
- PHP奇怪现象
<?php $a = 0.29; $b = (int)($a*100); echo $b; //输出28,PHP版本5.6.24 echo 0.1 + 0.2 - 0.3; //输出5.5511 ...
- Hibernate 异常 集锦
异常1.Error parsing JNDI name [foo] 异常信息摘要: org.hibernate.engine.jndi.JndiException: Error parsing JND ...