向下箭头———— 各种炫酷样式

http://www.zaole.net/demo/20151015946.html

***********************************************************************

<!doctype html>
<html>
<head>
<title>上下晃动的箭头</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no, width=device-width">
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" /><!--禁止Android中自动识别页面中的邮件地址-->

<style class="cp-pen-styles">
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
section {
position: relative;
width: 100%;
height: 100%;
}
section::after {
position: absolute;
bottom: 0;
left: 0;
content: ‘‘;
width: 100%;
height: 80%;
background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.8) 80%,rgba(0,0,0,.8) 100%);
background: linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.8) 80%,rgba(0,0,0,.8) 100%);
}
section h1 {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
font : normal 300 64px/1 ‘Josefin Sans‘, sans-serif;
text-align: center;
white-space: nowrap;
}

#section01 { background: url(http://zaole.net/1.jpg) center center / cover no-repeat;}
#section02 { background: url(http://zaole.net/2.jpg) center center / cover no-repeat;}
#section03 { background: url(http://zaole.net/3.jpg) center center / cover no-repeat;}
#section04 { background: url(http://zaole.net/4.jpg) center center / cover no-repeat;}
#section05 { background: url(http://zaole.net/5.jpg) center center / cover no-repeat;}
#section06 { background: url(http://zaole.net/6.jpg) center center / cover no-repeat;}
#section07 { background: url(http://zaole.net/7.jpg) center center / cover no-repeat;}
#section08 { background: url(http://zaole.net/8.jpg) center center / cover no-repeat;}
#section09 { background: url(http://zaole.net/1.jpg) center center / cover no-repeat;}
#section10 { background: url(http://zaole.net/2.jpg) center center / cover no-repeat;}

#thanks {
background-color: #fff;
}
#thanks::after {
content: none;
}
#thanks div {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
#thanks h1 {
position: static;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
margin-bottom: 60px;
color: #333;
}
#thanks p {
color: #333;
font : normal 400 20px/1 ‘Josefin Sans‘, sans-serif;
}
#thanks p a {
color: #333;
text-decoration: none;
transition: color .3s;
}
#thanks p a:hover {
color: #888;
}
.demo a {
position: absolute;
bottom: 20px;
left: 50%;
z-index: 2;
display: inline-block;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
color: #fff;
font : normal 400 20px/1 ‘Josefin Sans‘, sans-serif;
letter-spacing: .1em;
text-decoration: none;
transition: opacity .3s;
}
.demo a:hover {
opacity: .5;
}

#section01 a {
padding-top: 60px;
}
#section01 a span {
position: absolute;
top: 0;
left: 50%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
box-sizing: border-box;
}

#section02 a {
padding-top: 60px;
}
#section02 a span {
position: absolute;
top: 0;
left: 50%;
width: 46px;
height: 46px;
margin-left: -23px;
border: 1px solid #fff;
border-radius: 100%;
box-sizing: border-box;
}
#section02 a span::after {
position: absolute;
top: 50%;
left: 50%;
content: ‘‘;
width: 16px;
height: 16px;
margin: -12px 0 0 -8px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
box-sizing: border-box;
}

#section03 a {
padding-top: 60px;
}
#section03 a span {
position: absolute;
top: 0;
left: 50%;
width: 46px;
height: 46px;
margin-left: -23px;
border: 1px solid #fff;
border-radius: 100%;
box-sizing: border-box;
}
#section03 a span::after {
position: absolute;
top: 50%;
left: 50%;
content: ‘‘;
width: 16px;
height: 16px;
margin: -12px 0 0 -8px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
box-sizing: border-box;
}
#section03 a span::before {
position: absolute;
top: 0;
left: 0;
z-index: -1;
content: ‘‘;
width: 44px;
height: 44px;
box-shadow: 0 0 0 0 rgba(255,255,255,.1);
border-radius: 100%;
opacity: 0;
-webkit-animation: sdb03 3s infinite;
animation: sdb03 3s infinite;
box-sizing: border-box;
}
@-webkit-keyframes sdb03 {
0% {
opacity: 0;
}
30% {
opacity: 1;
}
60% {
box-shadow: 0 0 0 60px rgba(255,255,255,.1);
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes sdb03 {
0% {
opacity: 0;
}
30% {
opacity: 1;
}
60% {
box-shadow: 0 0 0 60px rgba(255,255,255,.1);
opacity: 0;
}
100% {
opacity: 0;
}
}

#section04 a {
padding-top: 60px;
}
#section04 a span {
position: absolute;
top: 0;
left: 50%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: sdb04 2s infinite;
animation: sdb04 2s infinite;
box-sizing: border-box;
}
@-webkit-keyframes sdb04 {
0% {
-webkit-transform: rotate(-45deg) translate(0, 0);
}
20% {
-webkit-transform: rotate(-45deg) translate(-10px, 10px);
}
40% {
-webkit-transform: rotate(-45deg) translate(0, 0);
}
}
@keyframes sdb04 {
0% {
transform: rotate(-45deg) translate(0, 0);
}
20% {
transform: rotate(-45deg) translate(-10px, 10px);
}
40% {
transform: rotate(-45deg) translate(0, 0);
}
}

#section05 a {
padding-top: 70px;
}
#section05 a span {
position: absolute;
top: 0;
left: 50%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: sdb05 1.5s infinite;
animation: sdb05 1.5s infinite;
box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
0% {
-webkit-transform: rotate(-45deg) translate(0, 0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
-webkit-transform: rotate(-45deg) translate(-20px, 20px);
opacity: 0;
}
}
@keyframes sdb05 {
0% {
transform: rotate(-45deg) translate(0, 0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: rotate(-45deg) translate(-20px, 20px);
opacity: 0;
}
}

#section06 a {
padding-top: 70px;
}
#section06 a span {
position: absolute;
top: 0;
left: 50%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
-webkit-animation: sdb06 1.5s infinite;
animation: sdb06 1.5s infinite;
box-sizing: border-box;
}
@-webkit-keyframes sdb06 {
0% {
-webkit-transform: rotateY(0) rotateZ(-45deg) translate(0, 0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
-webkit-transform: rotateY(720deg) rotateZ(-45deg) translate(-20px, 20px);
opacity: 0;
}
}
@keyframes sdb06 {
0% {
transform: rotateY(0) rotateZ(-45deg) translate(0, 0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: rotateY(720deg) rotateZ(-45deg) translate(-20px, 20px);
opacity: 0;
}
}

#section07 a {
padding-top: 80px;
}
#section07 a span {
position: absolute;
top: 0;
left: 50%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: sdb07 2s infinite;
animation: sdb07 2s infinite;
opacity: 0;
box-sizing: border-box;
}
#section07 a span:nth-of-type(1) {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
#section07 a span:nth-of-type(2) {
top: 16px;
-webkit-animation-delay: .15s;
animation-delay: .15s;
}
#section07 a span:nth-of-type(3) {
top: 32px;
-webkit-animation-delay: .3s;
animation-delay: .3s;
}
@-webkit-keyframes sdb07 {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes sdb07 {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}

#section08 a {
padding-top: 60px;
}
#section08 a span {
position: absolute;
top: 0;
left: 50%;
width: 30px;
height: 50px;
margin-left: -15px;
border: 2px solid #fff;
border-radius: 50px;
box-sizing: border-box;
}
#section08 a span::before {
position: absolute;
top: 10px;
left: 50%;
content: ‘‘;
width: 6px;
height: 6px;
margin-left: -3px;
background-color: #fff;
border-radius: 100%;
box-sizing: border-box;
}

#section09 a {
padding-top: 80px;
}
#section09 a span {
position: absolute;
top: 0;
left: 50%;
width: 30px;
height: 50px;
margin-left: -15px;
border: 2px solid #fff;
border-radius: 50px;
box-sizing: border-box;
}
#section09 a span::before {
position: absolute;
top: 10px;
left: 50%;
content: ‘‘;
width: 6px;
height: 6px;
margin-left: -3px;
background-color: #fff;
border-radius: 100%;
box-sizing: border-box;
}
#section09 a span::after {
position: absolute;
bottom: -18px;
left: 50%;
width: 18px;
height: 18px;
content: ‘‘;
margin-left: -9px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
box-sizing: border-box;
}

#section10 a {
padding-top: 60px;
}
#section10 a span {
position: absolute;
top: 0;
left: 50%;
width: 30px;
height: 50px;
margin-left: -15px;
border: 2px solid #fff;
border-radius: 50px;
box-sizing: border-box;
}
#section10 a span::before {
position: absolute;
top: 10px;
left: 50%;
content: ‘‘;
width: 6px;
height: 6px;
margin-left: -3px;
background-color: #fff;
border-radius: 100%;
-webkit-animation: sdb10 2s infinite;
animation: sdb10 2s infinite;
box-sizing: border-box;
}
@-webkit-keyframes sdb10 {
0% {
-webkit-transform: translate(0, 0);
opacity: 0;
}
40% {
opacity: 1;
}
80% {
-webkit-transform: translate(0, 20px);
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes sdb10 {
0% {
transform: translate(0, 0);
opacity: 0;
}
40% {
opacity: 1;
}
80% {
transform: translate(0, 20px);
opacity: 0;
}
100% {
opacity: 0;
}
}

</style>
</head>
<body>
<section id="section01" class="demo">
<h1>Scroll Down Button #1</h1>
<a href="#section02"><span></span>Scroll</a>
</section>
<section id="section02" class="demo">
<h1>Scroll Down Button #2</h1>
<a href="#section03"><span></span>Scroll</a>
</section>
<section id="section03" class="demo">
<h1>Scroll Down Button #3</h1>
<a href="#section04"><span></span>Scroll</a>
</section>
<section id="section04" class="demo">
<h1>Scroll Down Button #4</h1>
<a href="#section05"><span></span>Scroll</a>
</section>
<section id="section05" class="demo">
<h1>Scroll Down Button #5</h1>
<a href="#section06"><span></span>Scroll</a>
</section>
<section id="section06" class="demo">
<h1>Scroll Down Button #6</h1>
<a href="#section07"><span></span>Scroll</a>
</section>
<section id="section07" class="demo">
<h1>Scroll Down Button #7</h1>
<a href="#section08"><span></span><span></span><span></span>Scroll</a>
</section>
<section id="section08" class="demo">
<h1>Scroll Down Button #8</h1>
<a href="#section09"><span></span>Scroll</a>
</section>
<section id="section09" class="demo">
<h1>Scroll Down Button #9</h1>
<a href="#section10"><span></span>Scroll</a>
</section>
<section id="section10" class="demo">
<h1>Scroll Down Button #10</h1>
<a href="#thanks"><span></span>Scroll</a>
</section>

</body></html>

时间： 2024-11-06 09:38:48

向下箭头———— 各种炫酷样式的相关文章

【全网最全的博客美化系列教程】06.推荐和反对炫酷样式的实现

全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添加一只萌萌哒的小仓鼠 [全网最全的博客美化系列教程]04.访客量统计的实现 [全网最全的博客美化系列教程]05.公告栏个性时间显示的实现 [全网最全的博客美化系列教程]06.推荐和反对炫酷样式的实现 [全网最全的博客美化系列教程]07.添加一个分享的按钮吧 [全网最全的博客美化系列教程]08.自定义

CSS+DIV：实现炫酷网页样式与布局

虽然之前也接触过HTML和CSS,也做过一段时间的项目,使用过CSS和DIV,但是终究没有体会到这两者融会贯通后,所能达到的效果,远远超乎我的想象. 其实很多写过前端页面的人都知道DIV和CSS其实特别简单,但是要想实现需求中的或者自己心中想象的效果,也决非易事.这里面有很多的技巧,如果你不熟悉和精通,那么你做出的页面将会达不到预期的效果,有时候会特别的难看. 首先我们来看一下DIV是啥玩意? DIV是标记语言HTML中众多标签的一个,但是却是文档页面布局使用最频繁的一个标签.它可定义文档中的分

炫酷的CSS3抖动样式:CSS Shake

CSS Shake是一个使用CSS3实现的动画样式,使用SASS编写,利用它我们可以实现多种不同样式的抖动效果(如下面的GIF图像): 炫酷的CSS3抖动样式:CSS Shake 这是一个很微小的动画,但使用得当也是挺不错的,比如用在广告.图像.按钮上,这样可以用来吸引用户眼球从而促使去点击它. 这个Csshake有9个抖动样式,三个状态,如鼠标经过拉动.无限抖动.鼠标悬停拉动. CSS Shake 使用方法: 首先引入css shake的样式表文件.css3按钮:?http://www.hui

select默认下拉箭头改变、option样式清除

谷歌.火狐.ie下 select 的默认下拉箭头图标差别还是比较大,一般我们都会清除默认样式,重新设计箭头图标: /* --ie清除--*/ select::-ms-expand{ display: none; } /* --火狐.谷歌清除--*/ select{ appearance:none; -moz-appearance:none; -webkit-appearance:none; background: url("arrow.png") no-repeat scroll ri

视频编辑SDK---我们只提供API,任你自由设计炫酷的功能

做视频APP, 在于差异化,个性的APP; 你做一个别人一样功能的APP, 很难占领市场. 基于此.我们的SDK完全以API的形式,至于界面和操作炫酷的功能,任你自由发挥, 视频编辑:即类似秒拍,美拍,快手,小影等APP中对音视频做剪切/裁剪/分离/合并/标记/贴纸/叠加/滤镜等操作. 我们有Android版本基本视频编辑SDK: https://github.com/LanSoSdk/LanSoEditor_common 主要功能有: 1,使用在音视频的: 裁剪,剪切,分离,合并,转换,拼接,

js和CSS3炫酷3D相册展示

<!doctype html> <html> <head> <meta charset="UTF"> <title>js和CSS3炫酷3D相册展示</title> <style> *{margin:0;padding:0;} body{background:url(img/bg.jpg);width:100%;height:100%;overflow:hidden;}; h1{width:277;hei

[智能硬件] 3、三分钟看懂智能硬件原理——简易智能手环制作教程（包括炫酷手机客户端开发）

首先恭喜大家挺过了测试二!为什么说“挺”呢?因为测试二的难度和测试一相比有一个比较大的跳跃:首先测试一仅仅利用现有硬件模块稍加改造而DIY一个蓝牙防丢器,而测试二则要求大家具有从脑袋里的一个想法到一个全新的小设备的实现的全部能力,显然该过程不是连几根线那么简单:其次测试一对蓝牙的使用仅限于信号搜索层面,而测试二一下子深入到可靠通信的层面了,其难度可想而知:最后在测试二中客户端的设计中复杂的状态转换过程,以及嵌入式编程时需要对所使用的硬件作细致的分析,都构成了对前期基础没打牢的同学一种挑战.不过好

为你的WordPress博客添加CSS3炫酷读者墙

为你的WordPress博客添加CSS3炫酷读者墙,也就是把你文章的评论最活跃的读者显示在单独的一个页面,先看看效果吧: 1.复制主题的page.php,另存为readerwall.php,然后在其顶部添加代码 1 2 3 4 5 < ?php /* Template Name: Reader wall */ ?> 2.接着改文件下面找到 1 < ?php the_content('');?> 在它的前面添加下面的代码 1 2 3 4 5 6 7 8 9 10 11 12 13 1

炫酷实用的jQuery插件 涵盖菜单、按钮、图片

新的一周开始了,今天我们要为大家分享一些全新的jQuery插件和HTML5/CSS3应用,这些jQuery插件不仅非常炫酷,而且还挺实用,这次的分享包含jQuery菜单.CSS3按钮已经多种图片特效,一起来看看吧. 1.CSS3书本翻页动画 书本翻页效果逼真 今天我们要分享一款炫酷而且实用的CSS3动画效果,它是模拟书本翻页的动画特效.当鼠标滑过书本右上角时,书本即可向前翻一页,而且翻页动画非常逼真.由于CSS3的运用,我们并不需要使用复杂的图片来制造逼真的书本效果,书本翻页可以很简单地完成.之