三角形

<!-- log -->
<div class="tri"></div> <style>
.tri {
width: 0;
height: 0;
border-style: solid;
border-width: 100px;
border-color: transparent;
border-right-color: red;
}
</style>

大盒套小盒

两个

<!-- log -->
<div class="wrapper">
<div class="content"></div>
</div> <style>
.wrapper {
padding: 100px;
width: 100px;
height: 100px;
background-color: green;
}
.content {
width: 100px;
height: 100px;
background-color: red;
}
</style>

四个

<!-- log -->
<div class="div4">
<div class="div3">
<div class="div2">
<div class="div1"></div>
</div>
</div>
</div> <style>
.div1 {
width: 10px;
height: 10px;
background-color: white;
} .div2 {
width: 10px;
height: 10px;
padding: 10px;
background-color: green;
} .div3 {
width: 30px;
height: 30px;
padding: 10px;
background-color: white;
} .div4 {
width: 50px;
height: 50px;
padding: 10px;
background-color: green;
}
</style>

广告牌居中

<!-- log -->
<button id="banner-btn">点我显示居中</button>
<div class="banner"></div> <style>
.banner {
display: none;
position: fixed;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
background-color: red;
width: 100px;
height: 100px;
z-index: 9999;
}
</style>
<script>
$('#banner-btn').click(function () {
$('.banner').toggle()
})
</script>

CSS特效(一)的更多相关文章

  1. CSS特效集锦:视觉魔法的碰撞与融合(二)

    引言 长久以来,我认识到.CSS,是存在极限的.正如曾经替你扛下一切的那个男人,也总有他眼含热泪地拼上一切,却也无法帮你做到的事情,他只能困窘地让你看到他的无能为力,怅然若失. 然后和曾经他成长的时代 ...

  2. 一个神奇却很简单的css特效

    在网上看到一个前端大牛的主页,觉得他有一个特效特别酷,一开始还以为是要用什么javascript代码来实现,但仔细看一下,发觉只是用几行css代码就搞定了,我觉得挺好的. 他这个效果就是鼠标放在左半部 ...

  3. css特效

    1.页面淡入淡出 <html style="background:#0086b5"> <!--简易loading--> <div id="l ...

  4. CSS 特效 (教程还是英文的好)

    Border-radius: create rounded corners with CSS! http://www.css3.info/preview/rounded-border/

  5. css特效 - 环形文字

    记一次群友问题和回答: 下面这种效果,文字是动态的,不能使用图片的情况下,前端怎么实现? 一.插件实现: arctext.js 教程地址:实现文字平滑弯曲弧形效果的插件-arctext.js 二.原生 ...

  6. CSS特效汇集

    http://www.lanrenzhijia.com/js/css3/ http://js.mobanwang.com/special/allcss/ 其他效果:http://www.cnblogs ...

  7. 一个 图片 滚动 飞入的css特效

    @keyframes bounceInLeft { from, 60%, 75%, 90%, to {animation-timing-function: cubic-bezier(0.215, 0. ...

  8. 之前在不网站看到过关于css的一些例子 今天自己也写了一个css特效

    下面是代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...

  9. 【前端知识体系-CSS相关】CSS特效实现之Transition和Transform对比

    CSS效果 1.使用div绘制图形(三角形)? <!DOCTYPE html> <html lang="en"> <head> <meta ...

  10. css特效之旋转音乐播放器

    本次需要用到的知识点有: transform setInerval 怎么添加背景音乐我会在下一篇介绍 https://www.cnblogs.com/zouwangblog/p/11138734.ht ...

随机推荐

  1. 聊聊Java内省Introspector

    前提 这篇文章主要分析一下Introspector(内省,应该读xing第三声,没有找到很好的翻译,下文暂且这样称呼)的用法.Introspector是一个专门处理JavaBean的工具类,用来获取J ...

  2. 基于.NetCore3.1系列 —— 日志记录之自定义日志组件

    一.前言 回顾:日志记录之日志核心要素揭秘 在上一篇中,我们通过学习了解在.net core 中内置的日志记录中的几大核心要素,在日志工厂记录器(ILoggerFactory)中实现将日志记录提供器( ...

  3. hdfs学习(一)

    一.hdfs概述 介绍: 在现代的企业环境中,单机容量往往无法存储大量数据,需要跨机器存储.统一管理分布在集群上的文件系统称为分布式文件系统 .HDFS(Hadoop Distributed File ...

  4. myBatis源码解析-类型转换篇(5)

    前言 开始分析Type包前,说明下使用场景.数据构建语句使用PreparedStatement,需要输入的是jdbc类型,但我们一般写的是java类型.同理,数据库结果集返回的是jdbc类型,而我们需 ...

  5. 聊聊MySQL主从复制的几种复制方式

    目录 异步复制 多线程复制 增强半同步复制 异步复制 MySQL的复制默认是异步的,主从复制至少需要两个MYSQL服务,这些MySQL服务可以分布在不同的服务器上,也可以在同一台服务器上. MySQL ...

  6. 【POJ2728】Desert King - 01分数规划

    Description David the Great has just become the king of a desert country. To win the respect of his ...

  7. gcc手动安装

    Linux下: 手动安装gcc需要5个基础包 百度网盘链接:链接:包链接 密码:izxj 按照以上顺序安装:rpm -ivh 包名   为什么要手动安装呢,因为遇到这个情况:linux服务器没有权限连 ...

  8. PAT 2-13. 两个有序序列的中位数(25)

    题目链接:http://www.patest.cn/contests/ds/2-13 解题思路及代码如下: /* 解题思路: 分别求出序列A 和B 的中位数,设为a 和b,求序列A 和B 的中位数过程 ...

  9. 操作系统-I/O(3)SPOOLing技术

    为了缓和CPU的高速性与I/O设备低速性间的矛盾而引入了脱机输入.输出技术.该技术是利用专门的外围控制机,将低速I/O设备上的数据传送到高速磁盘上:或者相反. 事实上,当系统中引入了多道程序技术后,完 ...

  10. 强化学习中的经验回放(The Experience Replay in Reinforcement Learning)

    一.Play it again: reactivation of waking experience and memory(Trends in Neurosciences 2010) SWR发放模式不 ...