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

最新推荐文章于 2021-06-03 20:13:27 发布
最新推荐文章于 2021-06-03 20:13:27 发布
阅读量720 收藏 1
点赞数
原文链接：http://www.cnblogs.com/heiheii-blog/p/5737477.html
版权

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>

转载于:https://www.cnblogs.com/heiheii-blog/p/5737477.html

weixin_30426879
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
指挥舱电视墙 时钟 向上箭头——科技感大气商务ppt模板.rar
09-10
指挥舱电视墙，商务时钟，向上箭头，商务全球化ppt模板，经典蓝商务ppt模板下载。
利用css的content来改变select的样式，下箭头
肖肖肖丽珠的博客
02-13 3393
一般的我们看到的没有加任何样式的select是这样de   &lt;div class="select"&gt;     &lt;select name="select"&gt;         &lt;option&gt;select&lt;/option&gt;         &lt;option&gt;option&lt;/option&gt;        
html向下三角箭头,CSS制作三角箭头（兼容IE6）
weixin_42432918的博客
06-03 1275
之前介绍过《纯CSS实现无图片带箭头的DIV方框》这次介绍下CSS制作三角箭头通常，我们做上图那个三角形，一般都是做张图，而且需要两张，因为一般都是下拉菜单的效果，需要有个hover的样式，箭头是反的。那是不是有更好的办法呢，毕竟要用两张图片来解决这么一个小问题太浪费资源了，于是，下面我要用纯CSS的方法来解决这一问题，用到的只需css的一个属性，就是border-width我们先来看个样式，如果...
小技巧之向下箭头
初阶农民工的博客
05-16 4322
思路：使用◇符号（可在输入法的软键盘找到该符号），使用定位选择位置，并隐藏溢出的上半部分细点：1.使用i标签的楷体属性把◇变大2.给i只有◇符号一半的高度，并隐藏溢出，正常显示一个向上箭头3.对s使用绝对定位，使用top属性并为负值使i容器显示向下箭头&lt;!DOCTYPE&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; ...
html css样式绘制向下或者向上箭头
danfengw的博客
01-06 1万+
.ico_up{ width: 0; height: 0; border: 4px solid transparent ; border-bottom-color:#B0B0B0 ; } .ico_down{ float: top; width: 0; height: 0; border: 4px solid transparent ;
html中的向上、向下箭头
热门推荐
zhuyu19911016520
05-09 5万+
↓  ↑
向上走势箭头——适合销售工作汇报的多图表ppt模板.rar
09-10
向上走势箭头，简约线条，内含多套精美ppt图表，适合销售工作汇报的商务风ppt模板。
齿轮 向上箭头——积极向上传播正能量科技感工作总结ppt模板.rar
09-11
立体齿轮，彩色向上箭头，网状细线线条，蓝色科技感背景，积极向上传播正能量科技感工作总结ppt模板。
Vue实现点击箭头上下移动效果
10-15
主要介绍了Vue实现点击箭头上下移动效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
商务人物指向箭头方向——项目实施计划书ppt模板.rar
09-09
商务人物指向箭头方向，向上走势箭头，蓝天白云商务大楼背景，适合项目实施计划、项目计划书的通用ppt模板。
网页常用箭头图标大全
03-15
网页制作时经常用到的箭头图标基本上都在这里了，我个人在制作过程中，在这里边找自己想要的很方便，所以分享给大家
用纯CSS3实现网页中常见的小箭头
09-24
主要介绍了用纯CSS3实现网页中常见的小箭头的相关资料,需要的朋友可以参考下
css3实现小图标向下引导小箭头动态效果
社会人
07-26 1万+
css3实现小图标向下引导小箭头动态效果 网上转的 ，记录下来，方便下次用到 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style ty
html+下拉箭头样式,HTML选择下拉箭头样式
weixin_30162121的博客
06-03 1270
4 个答案:答案 0 :(得分：0)这个怎么样......只需将该图像设置为选择背景。＆＃13;＆＃13;.select-style {width: 268px;line-height: 1;border: 0;overflow: hidden;height: 34px;position:relative;background:#fff;}.select-style>select{-webk...
动态向下箭头，实现整屏翻页
js_Allen的专栏
03-01 2万+
一、实现效果 可通过单击图标或向下滚动鼠标进行整屏滚动二、图标的实现过程 1.最开始我使用的方法是使用图片，但想要找到刚好适合的图片比较难 2.之后我使用的是bootstrap里的图标，不过效果也不尽人意<span style="color: rgb(192, 192, 192);font-size: 80px;" class="glyphicon glyphicon-chevron-do
大学物理册答案上下都有
04-26
大学物理册答案上下都有
UWB超宽带信道研究及源码.zip
04-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
Suno AI语音技术的资源描述
04-26
Suno AI 是一家领先的人工智能（AI）公司，专注于开发创新的语音技术和解决方案。以下是关于 Suno AI 的资源描述： 语音识别技术：Suno AI 拥有先进的语音识别技术，能够准确地将语音转换为文本。他们的语音识别系统经过了大量的训练和优化，具有高度的准确性和鲁棒性，可应用于多种场景，如语音助手、语音搜索、智能客服等。 语音合成技术：除了语音识别，Suno AI 还致力于开发自然、流畅的语音合成技术。他们的语音合成系统能够生成高质量、逼真的语音输出，可以用于语音助手、自动化客服、有声书等领域。 智能语音应用开发：Suno AI 提供了一系列工具和平台，帮助开发者快速构建和部署智能语音应用。他们的开发工具包括 API 接口、SDK、开发文档等，支持多种编程语言和平台，让开发者可以轻松地集成语音功能到自己的应用中。 行业解决方案：Suno AI 为各行各业提供定制化的语音解决方案，满足客户特定的需求和业务场景。他们与零售、金融、医疗等领域的企业合作，提供智能语音客服、语音导航、语音支付等解决方案，帮助客户提升服务质量和效率。
基于matlab的射线信道模型内含数据集.zip
最新发布
04-26
基于matlab的射线信道模型内含数据集.zip
git log 向下箭头
07-28
在执行git log命令后，你可以使用向下箭头来查看之前的提交记录。按下向下箭头键可以向下滚动查看更早的提交记录。如果你想退出git log命令的查看，可以按下键盘上的"q"键。\[1\] #### 引用[.reference_title] - *1* *2* *3* [git基础流程各项指令的意义](https://blog.csdn.net/baidu_41604826/article/details/124017971)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值