CSS列表标记

使用图片作为列表标记是与页面加载速度相关的不可接受的奢侈品,特别是对于年轻的网站。

因此,我将向您展示一些如何仅使用html和css创建标记的示例。

作为标记的容器,使用单个


标记,因为它通常在列表中,而不是块元素。

广场 代码


  • 名单

  • 名单

代码


  • 名单

  • 名单

三角形 代码


  • 名单

  • 名单

  • 名单

  • 名单

代码



  • 名单


  • 名单

心脏 代码



  • 名单


  • 名单

符号 代码. 您可以使用任何字符或特殊字符作为标记。

130

 

 

广场

CSS

.squar {
list-style: none;
font-size: 20px;
}
.square {
width: 10px;
height: 10px;
background: red;
float: left;
margin: 6px 5px 5px 5px;
}

HTML

<ul class="squar">
<hr class="square"><li>名单</li>
<hr class="square"><li>名单</li>
</ul>

CSS

.circle {
list-style: none;
font-size: 20px;
line-height: 1.3;
}
.disck {
width: 12px;
height: 12px;
float: left;
margin: 7px 5px 0 5px;
border-radius: 50%;
background: radial-gradient(circle, white, red 4px);
}

HTML

<ul class="circle">
<hr class="disck"><li>名单</li>
<hr class="disck"><li>名单</li>
</ul>

三角形

CSS

.triangle1 {
list-style: none;
font-size: 20px;
}
.corner1 {
border: 6px solid transparent;
border-right: 10px solid green;
float: left;
margin: 6px 5px 5px 5px;

}
.triangle2 {
list-style: none;
font-size: 20px;
}
.corner2 {
border: 6px solid transparent;
border-left: 10px solid green;
float: left;
margin: 6px 5px 5px 5px;
}
HTML

<ul class="triangle1">
<hr class="corner1"><li>名单</li>
<hr class="corner1"><li>名单</li>
</ul>

<ul class="triangle2">
<hr class="corner2"><li>名单</li>
<hr class="corner2"><li>名单</li>
</ul>

CSS

.daw {
list-style: none;
font-size: 20px;
}
.mark {
width: 2px;
height: 12px;
margin: 2px 5px 5px 0;
background: green;
float: left;
transform: rotate(-25deg);
z-index: 1;
}
.mark1 {
width: 2px;
height: 10px;
background: green;
margin: 4px 5px 5px -5px;
float: left;
transform: rotate(25deg);
}

HTML

<ul class="daw">
<hr class="mark"><hr class="mark1"><li>名单</li>
<hr class="mark"><hr class="mark1"><li>名单</li>
</ul">

心脏

CSS

.amur {
list-style: none;
font-size: 20px;
}
.love {
border-radius: 5px 10px 0 10px;
width: 10px;
height: 10px;
margin: 6px -6px 5px 0;
background: red;
float: left;
}
.love1{
border-radius: 10px 5px 10px 0;
width: 10px;
height: 10px;
margin: 6px 5px 5px 0;
background: red;
float: left;
}

HTML

<ul class="amur">
<hr class="love"><hr class="love1"><li>名单</li>
<hr class="love"><hr class="love1"><li">名单</li>
</ul>

符号

CSS

.symb {
list-style: none;
font-size: 18px;
line-height: 1.3;
}
.symbol {
margin: 0 5px 0 0;
color: red;
font-weight: bold;
float: left;

}

HTML

<ul class="symb">
<span class="symbol">®</span><li>名单</li>
<span class="symbol">®</span><li>名单</li>
</ul>

祝你创造性的成功。

发表在 免费网站脚本 | 留下评论

菜单图标在CSS中绘制

如何使菜单图标不是图片,而是用html + css写。

在我使网站设计响应之后,我有了这个问题,并在菜单的图标上放置了一个漂亮的菜单,我切入Yandex Pictures。

在一个清晰的早晨,创造的快乐已经像雾一样消失,经过另一次检查网站的下载速度。

之前改编的每张微小图片都加载了大约200毫秒。 带有html的实心脚布加载速度更快。

就在那时我决定尝试用代码编写图标,这就是发生的事情。

我制作的图标大小为40 x 40像素,以便更好地查看,但通过在代码中更改此数字,您可以为自己制作任何尺寸。

@

邮件 代码

 

代码

 

菜单 代码

 

代码

 

设置 代码

 

启动 代码

 

评论 代码

 

邮件

CSS

.letter {
width: 40px;
height: 30px;
border: 2px solid #555;
border-radius: 2px;
position: relative;
}
.dog{
position: absolute;
top: 2px;
left: 12px;
width: 18px;
height: 18 px;
border-radius: 5px;
font-size: 20px;
font-weight: bold;
background: #fff;
z-index: 1;
}
.letter:before {
content: "";
position: absolute;
top: 0;
left: 19px;
height: 30px;
border-left: 3px solid #333;
transform: skewX(54deg);
}
.letter:after {
content: "";
position: absolute;
top: 0;
right: 19px;
height: 30px;
border-left: 3px solid #333;
transform: skewX(-54deg);
}

HTML

<div class="letter">
<div class="dog">@</div>
</div>

CSS

.pencil {
width: 50px;
height: 50px;
font-size: 40px;
font-weight: bold;
transform: rotate(120deg);
}

HTML

<div class="pencil">✎</div>

菜单
CSS

.menus {
font-size: 40px;
font-weight: bold;
}

HTML

<div class="menus">≡</div>

CSS

.lodge {
position: relative;
width: 50px;
height: 50px;
}
.lodge:before,
.lodge:after
{
content: "";
position: absolute;
width: 30px;
height: 2px;
background: #333;
}
.lodge:before {
top: 19px;
left: 0;
transform: rotate(-45deg);
}
.lodge:after {
top: 19px;
left: 22px;
transform: rotate(45deg);
}
.wall {
position: absolute;
top: 25px;
left: 9px;
width: 30px;
height: 30px;
border: 2px solid #777;
}

.door {
position: absolute;
top: 39px;
left: 25px;
width: 10px;
height: 20px;
background: #777;
}

HTML

<div class="lodge">
<div class="wall"></div"≶
<div class="door"></div"≶
</div>

设置

CSS

.gear; {
position;: relative;;
width: 40px;
height: 40px;
border-radius: 50%;
background: #777;
margin: 50px 0 0 10px;
}
.gear:before {
content: "";
position: absolute;
width: 20%;
height: 20%;
left: 40%;
top: 40%;
border-radius: inherit;
background: #fff;
}
.tooth1,
.tooth2,
.tooth3,
.tooth4,
.tooth5,
.tooth6
{
position: absolute;
top: -17px;
left: 0px;
width: 5px;
border: 20px solid transparent;
border-top: 25px solid #fff;
}
.tooth1 {
top: -21px;
left: -3px;
}
.tooth2 {
top: -12px;
left: 14px;
transform: rotate(60deg);
}
.tooth3 {
top: 6px;
left: 14px;
transform: rotate(120deg);
}
.tooth4 {
top: 15px;
left: -2px;
transform: rotate(180deg);
}
.tooth5{
top: 6px;
left: -18px;
transform: rotate(240deg);
}
.tooth6 {
top: -11px;
left: -19px;
transform: rotate(300deg);
}

HTML

<div class="gear">
<div class="tooth1"></div>
<div class="tooth2"></div>
<div class="tooth3"></div>
<div class="tooth4"></div>
<div class="tooth5"></div>
<div class="tooth6"></div>
</div>

启动

CSS

.pusk {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
background: #777;
margin: 50px 0 0 0;
}
.pusk:before {
content: "";
position: absolute;
left: 22%;
top: 22%;
width: 55%;
height: 55%;
border-radius: inherit;
box-shadow: 0 0 0 3px #fff;
background: #777;
}
.pusk:after {
content: "";
position: absolute;
left: 12px;
top: 12px;
width: 40%;
height: 3px;
border-radius: 1px;
box-shadow: 0 0 0 3px #777;
background: #fff;
transform: rotate(90deg);
z-index: 1;
}

HTML

<div class="pusk"></div>

评论

CSS

.narrator {
width: 40px;
height: 30px;
position: relative;
border-radius: 5px;
background: #777;
margin-top: 50px;
}
.narrator:before {
content: "";
position: absolute;
top: 25px;
left: 5px;
border: 10px solid transparent;
border-top: 15px solid #777;
}

HTML

<div class="narrator""></div>

现在。 有时间我会尝试画出更多。

祝你创造性的成功。

发表在 免费网站脚本 | 留下评论

Javascript滑块

最简单的javascript滑块,代码非常简单,适用于我测试过的所有模板。

您可以根据需要添加任意数量的图片。 所有这些都将以指定的间隔出现。

HTML


<div id="carousels">
<div class="carousel demonstration"><img src="images/1.jpg"></div>
<div class="carousel"><img src="images/2.jpg"></div>
<div class="carousel"><img src="images/3.jpg"></div>
</div>

Javascript


<script>
var carousels = document.querySelectorAll('#carousels .carousel');
var currentCarousel = 0;
var carouselInterval = setInterval(nextCarousel,5000); /* Интервал между картинками */

function nextCarousel(){
carousels[currentCarousel].className = 'carousel';
currentCarousel = (currentCarousel+1)%carousels.length;
carousels[currentCarousel].className = 'carousel demonstration';
}
</script>

CSS


#carousels{
position: relative;
}

.carousel{
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: opacity 3s; /* 图片的时间 */
}

.demonstration{
opacity: 1;
}

祝你创造性的成功。

发表在 免费网站脚本 | 留下评论

CSS滑块

173
166
153
129
135
116
122
172

这是最简单的CSS滑块。

这种滑块的优点包括易用性和安全性,以及即使是新手网站管理员也可以在您的网站上完成和安装。

缺点是不可能单独在CSS上重复循环。

但是如果你认为八张图片的滚动时间超过30秒,那么这个时间足以让访问者查看该页面。

如果滑块安装在网站的标题中,那么没人会考虑半分钟。

图片外观的效果可以根据自己的喜好进行更改,并符合CSS3的功能。 让我们看看它在哪里以及如何完成。

代码:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>CSS滑块</title>
<style>
/* 滑块 */
#slaid {
/* 设置相对定位 */
position: relative;
/*Размер и рамка блока*/
width: 400px;
height: 200px;
border: 2px solid #333;
border-radius: 5px;
}
/* 7张图片的组选择器 */
.image1,
.image2,
.image3,
.image4,
.image5,
.image6,
.image7
{
/* 我们绝对相对于块位置。 */
position: absolute;
/* 使它们完全透明。 */
opacity: 0;
width: 400px;
height: 200px;
}
/* 我们将动画连接到第一张图片 */
.image1{
animation: one-image 8s 1s ease alternate;
}
/* 以下图片是动画的,在滚动所需的前一图像的开始处有延迟。й */
.image2 {
animation: two-image 8s 5s ease alternate;
}
.image3 {
animation: three-image 8s 10s ease alternate;
}
.image4 {
animation: four-image 8s 14s ease alternate;
}
.image5 {
animation: five-image 8s 18s ease alternate;
}
.image6 {
animation: six-image 8s 22s ease alternate;
}
.image7 {
animation: seven-image 8s 26s ease alternate;
}
/* 滚动后,最后一个图像不透明仍然可见 */
.image8 {
position: absolute;
width: 400px;
height: 200px;
animation: eight-image 34s ease alternate;
}
/* 第一张照片的动画 */
@keyframes one-image{

/* 设置透明度的变化。 在这里,您可以添加旋转,从块外部移动或从中心外观(缩放) */
0% {
opacity: 1;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/* 动画为接下来的6张照片 */
@keyframes two-image{
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}

@keyframes three-image{
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}

@keyframes four-image{
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}

@keyframes five-image{
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}

@keyframes six-image{
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}

@keyframes seven-image{
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/* 第八个剪贴画的动画 */
@keyframes eight-image{
/* 保持透明,直到前一个滚动 */
0% {
opacity: 0;
}
87% {
opacity: 0;
}
/*在滑块的末尾变得可见 */
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<div id="slaid">
<img class="image1" src="images/172.jpg">
<img class="image2" src="images/166.jpg">
<img class="image3" src="images/153.jpg">
<img class="image4" src="images/129.jpg">
<img class="image5" src="images/135.jpg">
<img class="image6" src="images/116.jpg">
<img class="image7" src="images/122.jpg">
<img class="image8" src="images/173.jpg">
</div>
</body>
</html>

以防万一 – 为了有机会再次滚动滑块,您可以添加以下代码:

<script>
var CLN; onload = function () {CLN = document.getElementById ('slaid').cloneNode (3)}
</script>

<input type="button" value="再看一遍" onclick="var obj = document.getElementById ('slaid'); obj.parentNode.replaceChild (CLN, obj)">

同时,滑块下方会出现一个按钮,您可以根据需要进行命名并在CSS中绘制。

附: 如果您尝试在@keyframes中调整图片的显示间隔,则可以使轮播连续。

祝你创造性的成功。

发表在 免费网站脚本 | 留下评论

动画网站标题示例

以下是创建网站标题的一些想法。

您可以按原样使用它,也可以只采取一些操作并将其应用于开发自己的标题或广告横幅设计。

弹出标题和网站描述。

网站名称

网站描述 网站描述
网站描述 网站描述
网站描述 网站描述

代码 1: 要再次查看此动画的工作 – 刷新页面。.

 

网站名称

代码 2:

 

流星

网站名称

代码 3:

白天和黑夜

Safari
Africa
Egypt

代码 4:

代码 1

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>文件</title>
<style>
/* 网站上限 */
.main-header {
/* 设置相对定位 */
position: relative;
/* 网站标题大小 */
width: 100%;
height: 250px;
overflow: hidden;
/* 背景网站上限 */
background: steelblue;
/* 我们连接动画 */
animation: main-hed 15s linear;
}
/* 网站名称 */
.main-title{
/* 我们相对于主标题块绝对定位 */
position: absolute;
left: -2em;
right: -2em;
top: 30%;
/* 我们制作出一种字体 */
color: #fff;
font-family: Monotype Corsiva;
letter-spacing: 0.3em;
text-align: center;
text-transform: uppercase;
/* 我们连接动画 */
animation: main-titl 15s linear;
}
.main-description{
/* 我们绝对相对于块位置。 main-header */
position: absolute;
right: -2em;
left: -2em;
top: 50%;
/* 我们制作出一种字体 */
color: #fff;
font-family: Georgia;
font-size: 16px;
letter-spacing: 0.2em;
text-align: center;
font-style: italic;
/* 我们连接动画 */
animation: main-descript 15s linear;
}

/* 动画背景网站帽 */
@keyframes main-hed {
0% {
/* 初始颜色 */
background: #28014D;
}
/* 结束颜色 */
100% {
background: steelblue;
}
}

/* 网站名称动画 */
@keyframes main-titl{
0% {
/* 完全透明 */
opacity: 0;
/* 从头开始纵向和横向缩放 */
transform: scale(0);
}
100% {
/* 完全不透明 */
opacity: 1;
/* 最终规模 1 х 1 */
transform: scale(1);
}
}

/* 网站描述动画 */
@keyframes main-descript {
0% {
/* 在网站底部开始动画 */
transform: translateY(6em);
/* 完全透明 */
opacity: 0;
}
/* 增加不透明度 */
50% {
opacity: 0.1;
}
75% {
opacity: 0.3;
}
100% {
/* 在定位点结束动画 */
transform: translateY(0);
/* 完全不透明 */
opacity: 1;
}
}
</style>
</head>
<body>
<div class="main-header">
<h1 class="main-title">网站名称</h1>
<p class="main-description">网站描述 网站描述
网站描述 网站描述
网站描述 网站描述</p>
</div>
</body>
</html>

在此示例中,请注意站点描述的动画在块之外开始。 main-header.

按照同样的原则,你可以弹出任何块 – 图片,菜单等。

代码 2

CSS

.man-header {
margin: 0;
overflow: hidden;
/* 格式化背景颜色 hsl, 径向梯度 */
background: radial-gradient(white 80px, hsl(30, 100%, 60%) 50em);
position: relative;
height: 200px;
width: 600px;
}
/* 将效果定位在中心 */
.astra {
position: absolute;
left: 50%;
top: 50%;
/* 删除列表标记 */
list-style: none;
/* 打开旋转动画 */
animation: 30s rotate infinite linear;
}
/* 与伪元素的阴影边界 */
.luh,
.luh:before,
.luh:after {
position: absolute;
border: 0 solid transparent;
border-width: 2em 20em;
width: 0px;
height: 0px;
box-shadow: 0 0 2em .5em white;
}
/* 启动射线 */
.luh {
left: -20em;
top: 50%;
margin-top: -2em;
transform: rotate(.3deg);
}
/* 光线的长度取决于位置 */
.luh:before,
.luh:after {
left: -20em;
top: -2em;
display: block;
content: "";
}

.luh:before {
transform: rotate(60deg);
}
.luh:after {
transform: rotate(-60deg);
}
/* 使用伪类为每个波束组添加偏移量 */
.luh:nth-child(2){
transform: rotate(15deg);
}
.luh:nth-child(3){
transform: rotate(30deg);
}
.luh:nth-child(4){
transform: rotate(45deg);
}

@keyframes rotate {
100% {
transform: rotate(90deg);
}
}

.name {
z-index: 1;
position: absolute;
left: 27%;
top: 20%;
z-index: 1;
font: bold 40px 'Monotype Corsiva';
color: hsl(70, 100%, 70%);
text-align: center;
/* 用阴影着色文本 */
text-shadow: -1px -1px #EE8A08,
-2px -2px #EE8A08,
-1px 1px #EE8A08,
-2px 2px #EE8A08,
1px 1px #EE8A08,
2px 2px #EE8A08,
1px -1px #EE8A08,
2px -2px #EE8A08,
}

HTML

<div class="man-header">
<p class="name">网站名称</p>
<ul class="astra">
<li class="luh"></li>
<li class="luh"></li>
<li class="luh"></li>
<li class="luh"></li>
</ul>
</div>

代码 3

代码非常简单,所以我没有用注释重载它。
CSS

.space {
width: 600px;
height: 200px;
/* 背景 - 成倍增加的图像 */
background-image: url(images/129a.jpg);
position: relative;
}
/* 闪烁和坠落的星星 */
.stars1,
.stars2,
.stars3,
.stars4,
.stars5,
.stars6,
.stars7,
.stars8,
.stars9,
.stars10
{
position: absolute;
border-radius: 50%/50%;
background-image: -webkit-radial-gradient(white, black);
width: 3px;
height: 3px;
}
/* 将星星放在块顶部 */
.stars1 {
top: 8%;
left: 3%;
/* 我们将动画与不同的响应时间联系起来 */
animation: stars1 4s 3s linear infinite;
}
.stars2 {
top: 3%;
left: 10%;
animation: stars2 2s linear infinite;
}
.stars3 {
top: 15%;
left: 25%;
animation: stars3 5s 1s linear infinite;
}
.stars4 {
top: 12%;
left: 35%;
animation: stars4 6s 2s linear infinite;
}
.stars5 {
top: 23%;
left: 47%;
animation: stars5 2.5s 1s linear infinite;
}
.stars6 {
top: 11%;
left: 60%;
animation: stars6 7s linear infinite;
}
.stars7 {
top: 20%;
left: 70%;
animation: stars7 2s 1s linear infinite;
}
.stars8 {
top: 12%;
left: 80%;
animation: stars8 4s linear infinite;
}
.stars9 {
top: 30%;
left: 90%;
animation: stars9 3s 2s linear infinite;
}
.stars10 {
top: 7%;
left: 98%;
animation: stars10 6s linear infinite;
}

.name {
position: absolute;
left: 27%;
top: 20%;
z-index: 1;
font: 30px Impact;
color: hsl(240, 20%, 15%);
letter-spacing: 4px;
text-transform: uppercase;
text-align: center;
/* 用阴影着色文本 */
text-shadow: -1px -1px hsl(50, 50%, 50%),
-2px -2px hsl(50, 50%, 50%),
-1px 1px hsl(50, 50%, 50%),
-2px 2px hsl(50, 50%, 50%),
1px 1px hsl(50, 50%, 50%),
2px 2px hsl(50, 50%, 50%),
1px -1px hsl(50, 50%, 50%),
2px -2px hsl(50, 50%, 50%);
}

/* 闪烁 */

@keyframes stars2 {
0% {
opacity: 1;
}
100%{
opacity: 0;
}
}
@keyframes stars5 {
0% {
opacity: 1;
}
100%{
opacity: 0;
}
}
@keyframes stars7 {
0% {
opacity: 1;
}
100%{
opacity: 0;
}
}
@keyframes stars9 {
0% {
opacity: 1;
}
100%{
opacity: 0;
}
}

/* 落下 */

@keyframes stars1 {
0% {
width: 1px;
}
7% {
width: 6px;
opacity: 1;
transform: translate(150px, 150px);
}
8% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes stars3 {
0% {
width: 3px;
}
12% {
width: 10px;
opacity: 1;
transform: translate(-200px, 200px);
}
13% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes stars4 {
0% {
width: 3px;
}
10% {
width: 10px;
opacity: 1;
transform: translate(200px, 300px);
}
11% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes stars6 {
0% {
width: 3px;
}
10% {
width: 10px;
opacity: 1;
transform: translate(-400px, 300px);
}
11% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes stars8 {
0% {
width: 3px;
}
10% {
width: 10px;
opacity: 1;
transform: translate(-300px, 300px);
}
11% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes stars10 {
0% {
width: 3px;
}
10% {
width: 10px;
opacity: 1;
transform: translate(-600px, 200px);
}
11% {
opacity: 0;
}
100% {
opacity: 0;
}
}

HTML

<div class="space">
<p class="name">网站名称</p>
<div class="stars1"></div>
<div class="stars2"></div>
<div class="stars3"></div>
<div class="stars4"></div>
<div class="stars5"></div>
<div class="stars6"></div>
<div class="stars7"></div>
<div class="stars8"></div>
<div class="stars9"></div>
<div class="stars10"></div>
</div>

代码 4

CSS

.panorama{
width: 900px;
height: 300px;
left: 0;
top: 0;
overflow: hidden;
background: #4FC3F7;
position: relative;
animation: main-layout 40s linear infinite;
}
.ground { /* 地带 */
display: block;
position: absolute;
width: 100vw;
height: 40px;
left: 0;
bottom: 0;
background: #F4511E;
z-index: 10;
}
.sun { /* 太阳 */
position: absolute;
width: 150px;
height: 150px;
top: 250px;
left: 750px;
background: #FFF;
border-radius: 50%;
z-index: 1;
animation: main-sun 40s linear infinite;
}
.selen{ /* 月亮 */
position: absolute;
top: 0;
left: 800px;
width: 80px;
height: 80px;
border-radius: 50%;
background: #fff;
animation: main-selen 40s linear infinite;
}
.selen::before { /* 李子停电 */
content: "";
position: absolute;
left: -5px;
top: -5px;
width: 80px;
height: 80px;
border-radius: 50%;
background: #030104;
}
.safari,
.africa,
.egipet
{ /* 金字塔上的字 */
font-family: Impact;
position: absolute;
color: #fff;
transform: rotate(40deg);
z-index: 5;
text-shadow: 1px 1px #050505,
2px 2px #050505,
3px 3px #050505,
4px 4px #050505;

}
.safari{
top: 150px;
left: 310px;
font-size: 35px;
letter-spacing: 0.4em;
z-index: 5;
}
.africa {
top: 190px;
left: 630px;
font-size: 30px;
letter-spacing: 0.3em;
z-index: 5;
}
.egipet {
top: 205px;
left: 105px;
font-size: 22px;
letter-spacing: 0.3em;
z-index: 5;
}
.shadow { /* 金字塔的阴影 */
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 8%;
left: -50%;
background: #333;
transform: rotate(30deg);
}
.pyramid { /* 金字塔块 */
display: block;
position: absolute;
width: 950px;
height: 300px;
left: 50%;
bottom: 10px;
transform: translate(-50%, 0px);
z-index: 2;
}
.pr1,
.pr2,
.pr3
{ /* 金字塔的方面 */
display: block;
position: absolute;
background: #F4511E;
overflow: hidden;
transform: rotate(45deg) translate(50%, 50%);
}
.pr1 {
width: 500px;
height: 500px;
bottom: 30px;
left: 20%;
z-index: 2;
}
.pr2 {
width: 400px;
height: 400px;
bottom: 0px;
right: 20px;
z-index: 3;
}
.pr3 {
width: 300px;
height: 300px;
bottom: 0;
left: 30px;
z-index: 4;
}
/* 动画 */
@keyframes main-sun{
0% {
transform: translateY(-10px);
background: #FF5F00;
}
25%{
transform: translateY(-260px);
background: #fff;
width:80px;
height:80px;
}
35%{
transform: translateY(-260px);
}
40% {
background: #fff;
}
60%{
transform: translateY(10px);
width:150px;
height:150px;
background: #FF5F00;
}
}
@keyframes main-layout{
0% {
background: #333333;
}
10%{
background: #4FC3F7;
}
40%{
background: #4FC3F7;
}
50% {
background: #333333;
}
55% {
background-image: url(images/129a.jpg);
}
100% {
background-image: url(images/129a.jpg);
}
}
@keyframes main-selen {
0% {
opacity: 0;
}
55% {
opacity: 0;
}
60% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}

HTML

<div class="panorama">
<div class="safari">Safari</div>
<div class="africa">Africa</div>
<div class="egipet">Egypt</div>
<div class="night"></div>
<div class="sun"></div>
<div class="selen"></div>
<div class="pyramid">
<div class="pr1"><div class="shadow"></div></div>
<div class="pr2"><div class="shadow"></div></div>
<div class="pr3"><div class="shadow"></div></div>
</div>
<div class="ground"></div>
</div>

祝你创造性的成功。

发表在 免费网站脚本 | 留下评论

有关图像,示例和现成代码的文字

悬停光标时,文本在图像上出现的五个原始效果。

选项1

文本显示在图像的底部。

代码

选项 2

文本从图像的深处出现,旋转。

代码

Вариант 3

文本从图像的边缘绘制。

代码

Вариант 4.

此变体与之前的变体的不同之处在于弹出文本不是输入到链接中,而是输入到包含链接的块中。

在自定义属性中放置文本 data.

在该实施例中,除了描述之外,还显示图片的标题。

代码

Вариант 5

3D 效果

银色湖在Zvenigovsky区,Mari El,俄罗斯。 它位于Suslongersky林业的领土上。 湖泊位于Yushut河流域。

代码

代码 1:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>文件</title>
<style>
.lake {
text-align: center;
display: inline-block;
overflow: hidden;
position: relative;
text-decoration: none;
}

.lake:before {
display: block;
background-color: rgb(0, 0, 0);
content: "";
height: 100%;
opacity: 0;
position: absolute;
width: 100%;
z-index: 2;
}

.lake:after {
font-family: 'Lucida Console';
color: white;
content: attr(alt);
display: block;
font-size: 16px;
opacity: 0;
padding: 0 3%;
position: absolute;
text-transform: none;
top: 50%;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: scale(0) translateY(-50%);
transform: scale(0) translateY(-50%);
width: 94%;
z-index: 3;
}

.lake img {
border: none;
display: block;
z-index: 1;
}

.lake:after {
-webkit-transition: all 350ms ease-in-out;
transition: all 350ms ease-in-out;
}

.lake:hover:before {
opacity: 0.6;
}

.lake:hover:after {
opacity: 1;
-webkit-transform: scale(1) translateY(-50%);
transform: scale(1) translateY(-50%);
}

</style>
</head>
<body>
<a class="lake" href="#" title="" alt="银色湖在Zvenigovsky区,Mari El,俄罗斯。 它位于Suslongersky林业的领土上。 湖泊位于Yushut河流域。"><img src="images/45.jpg" alt=""></a>
</body>
</html>

代码 2:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>文件</title>
<style>
.lake {
text-align: center;
display: inline-block;
overflow: hidden;
position: relative;
text-decoration: none;
}

.lake:before {
display: block;
background-color: rgb(0, 0, 0);
content: "";
height: 100%;
opacity: 0;
position: absolute;
width: 100%;
z-index: 2;
}

.lake:after {
font-family: 'Lucida Console';
color: white;
content: attr(alt);
display: block;
font-size: 16px;
opacity: 0;
padding: 0 3%;
position: absolute;
text-transform: none;
top: 50%;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: scale(0) translateY(-50%);
transform: scale(0) translateY(-50%);
width: 94%;
z-index: 3;
}

.lake img {
border: none;
display: block;
z-index: 1;
}

.lake:after {
-webkit-transition: all 350ms ease-in-out;
transition: all 350ms ease-in-out;
}

.lake:hover:before {
opacity: 0.6;
}

.lake:hover:after {
opacity: 1;
-webkit-transform: scale(1) translateY(-50%);
transform: scale(1) translateY(-50%);
}

.lake:after {
-webkit-transform: scale(0) rotate(-360deg) translateY(-50%);
transform: scale(0) rotate(-360deg) translateY(-50%);
}

.lake:hover:after {
-webkit-transform: scale(1) rotate(0deg) translateY(-50%);
transform: scale(1) rotate(0deg) translateY(-50%);
}
</style>
</head>
<body>
<a class="lake" href="#" title="" alt="银色湖在Zvenigovsky区,Mari El,俄罗斯。 它位于Suslongersky林业的领土上。 湖泊位于Yushut河流域。"><img src="images/45.jpg" alt=""></a>
</body>
</html>

代码 3:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>文件</title>
<style>
@-webkit-keyframes appearing {
0%{
-webkit-transform: scaleX(4) scaleY(0) translateY(-50%);
}
50%{
-webkit-transform: scaleX(4) scaleY(1) translateY(-50%);
color: rgba(255, 255, 255, 0);
}
100% {
transform: scaleX(1) scaleY(1) translateY(-50%);
color: rgba(255, 255, 255, 1);
}
}

@keyframes appearing {
0%{
transform: scaleX(4) scaleY(0) translateY(-50%);
}
50%{
transform: scaleX(4) scaleY(1) translateY(-50%)
;
color: rgba(255, 255, 255, 0);
}
100% {
transform: scaleX(1) scaleY(1) translateY(-50%);
color: rgba(255, 255, 255, 1);
}
}

@-webkit-keyframes disappearing {
0%{
-webkit-transform: scaleX(1) scaleY(1) translateY(-50%);
color: rgba(255, 255, 255, 1);
}
50%{
-webkit-transform: scaleX(4) scaleY(1) translateY(-50%);
color: rgba(255, 255, 255, 0);
}
100% {
-webkit-transform: scaleX(4) scaleY(0) translateY(-50%);
}
}

@keyframes disappearing {
0%{
transform: scaleX(1) scaleY(1) translateY(-50%);
color: rgba(255, 255, 255, 1);
}
50%{
transform: scaleX(4) scaleY(1) translateY(-50%);
color: rgba(255, 255, 255, 0);
}
100% {
transform: scaleX(4) scaleY(0) translateY(-50%);
}
}

@-webkit-keyframes positioning {
0%{
z-index: 10;
}
99%{
z-index: 10;
}
100% {
z-index: 1;
}
}

@keyframes positioning {
0%{
z-index: 10;
}
99%{
z-index: 10;
}
100% {
z-index: 1;
}
}

.lake {
display: inline-block;
overflow: hidden;
position: relative;
text-align: center;
text-decoration: none;
}

.lake:before {
-webkit-animation: disappearing 500ms ease-in-out forwards;
animation: disappearing 500ms ease-in-out forwards;
background-color: rgba(0, 0, 0, 0.6);
color: rgba(255, 255, 255, 0);
content: attr(alt);
display: block;
font-family: 'Lucida Console';
font-size: 16px;
padding: 5% 2%;
position: absolute;
text-transform: none;
top: 50%;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
width: 96%;
z-index: 5;
}

.lake img {
-webkit-animation: positioning 510ms ease-in-out forwards;
animation: positioning 510ms ease-in-out forwards;
border: none;
display: block;
position: relative;
z-index: 10;
}

.lake:after {
opacity: 0;
background-color: white;
content: "";
display: block;
height: 100%;
position: absolute;
top: 0;
width: 100%;
z-index: 15;
}

.lake:hover:before {
-webkit-animation: appearing 500ms ease-in-out forwards;
animation: appearing 500ms ease-in-out forwards;
}

</style>
</head>
<body>
<a class="lake" href="#" title="" alt="银色湖在Zvenigovsky区,Mari El,俄罗斯。 它位于Suslongersky林业的领土上。 湖泊位于Yushut河流域。"><img src="images/45.jpg" alt=""></a>
</body>
</html>

代码 4:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>文件</title>
<style>
.lake {
display: inline-block;
position: relative;
margin: 0 auto;
overflow: hidden;
background: #000;
}
.lac {
display: block;
max-width: 100%;
transition: opacity .2s ease-in-out;
}
.lake:after,
.lake:before
{
box-sizing: border-box;
position: absolute;
width: 100%;
padding: 20px;
color: #fff;
transition: transform .4s ease-out;
}
.lake:after {
content: attr(data-title);
top: 0;
height: 20%;
background: rgba(0,0,0,.4);
font-size: 2rem;
font-weight: 300;
text-align: center;
transform: translateY(-100%) scale(.8);
}
.lake:before {
content: attr(data-description) "…";
top: 20%;
height: 80%;
background: rgba(107,38,68,.6);
font-size: 1.1rem;
transform: translateY(100%) scale(.8);
}
.lake:hover:after,
.lake:hover:before
{
transform: translateY(0%) scale(1);
}
</style>
</head>
<body>
<div class="lake"
data-title="银湖"
data-description="银色湖在Zvenigovsky区,Mari El,俄罗斯。 它位于Suslongersky林业的领土上。 湖泊位于Yushut河流域。">
<img class="lac" src="images/131.jpg" alt="" width="400" height="300">
</div>
</body>
</html>

代码 5:


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>文件</title>
<style>
.lake {
width: 640px;
height: 420px;
margin: 70px auto;
perspective: 1000px;
}
.lake .efekt {
display: block;
width: 100%;
height: 100%;
background:
linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url(images/0.jpg); /* Картинка */
background-size: 0, cover;
transform-style: preserve-3d;
transition: all 0.5s;
}
.lake:hover .efekt {
transform: rotateX(80deg);
transform-origin: bottom;
}
.lake .efekt:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 65px; /* Размер поля с текстом */
background: inherit;
background-size: cover, cover;
background-position: bottom;
transform: rotateX(90deg);
transform-origin: bottom;
}
.lake .efekt .descriptions {
color: white;
position: absolute;
top: 100%;
left: 0;
width: 100%;
text-align: center;
font-size: 18px; /* Размер текста */
transform: rotateX(-89.99deg);
transform-origin: top;
z-index: 1;
</style>
</head>
<body>
<div class="lake">
<div class="efekt">
<span class="descriptions">银色湖在Zvenigovsky区,Mari El,俄罗斯。 它位于Suslongersky林业的领土上。 湖泊位于Yushut河流域。

</div>
</div>
</body>
</html>

祝你创造性的成功。

发表在 免费网站脚本 | 留下评论

CSS活着的心

这是另一种创造运动的原始CSS效果,而运动就是已知的生命。

如果您使用数字,就这些元素的含义而言,您将看到非常有趣的效果,在这些效果下,您不仅可以替换心形块,还可以替换更多。

一切都取决于你的想象力。

工作心脏由两个块组成,并且从下面向第二个块添加三角形。

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>文件</title>
<style>
@keyframes bounce {
from, to {
-webkit-transform: translateY(10vh) scaleY(.98);
transform: translateY(10vh) scaleY(.98);
}
80% {
-webkit-transform: translateY(10vh) scaleY(1.02);
transform: translateY(10vh) scaleY(1.02);
}
}
.serdse {
border-radius: 9vw 11vw 1vw 20vw;
width: 120px;
height: 165px;
background-image: radial-gradient(ellipse farthest-corner at 0 0, #FF414A,#f00);
margin: 0 auto;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation: bounce 1.3s cubic-bezier(0.30, 2.40, 0.85, 0.50) infinite;
animation: bounce 1.3s cubic-bezier(0.30, 2.40, 0.85, 0.50) infinite;
float: left;
}

@keyframes bounce {
from, to {
-webkit-transform: translateY(10vh) scaleY(.98);
transform: translateY(10vh) scaleY(.98);
}
80% {
-webkit-transform: translateY(10vh) scaleY(1.02);
transform: translateY(10vh) scaleY(1.02);
}
}
.serdse1 {
border-radius: 15vw 11vw 25vw 1vw;
width: 120px;
height: 165px;
background-image: radial-gradient(ellipse farthest-corner at 100% 0%, #FF414A,#f00);
margin: 0 0 0 105px;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation: bounce 1.3s cubic-bezier(0.30, 2.40, 0.85, 0.50) infinite;
animation: bounce 1.3s cubic-bezier(0.30, 2.40, 0.85, 0.50) infinite;
}

.serdse1::after {
content: '';
position: absolute;
left: -33px;
bottom: -50px;
border: 40px solid transparent;
border-top: 20px solid #f00;
}

</style>
</head>
<body>
<div class="serdse"></div>
<div class="serdse1"></div>
</body>
</html>

祝你创造性的成功。

发表在 免费网站脚本 | 留下评论

星雨

非常轻量级的代码,只有html和css,所以你可以将它粘贴到任何地方,甚至在用PHP编写的CMS中,甚至在简单的html页面中。

可以根据需要增加恒星的数量和大小。

HTML


<div class="space">
<div class="stars1"></div>
<div class="stars2"></div>
<div class="stars3"></div>
<div class="stars4"></div>
<div class="stars5"></div>
<div class="stars6"></div>
<div class="stars7"></div>
<div class="stars8"></div>
<div class="stars9"></div>
<div class="stars10"></div>
</div>

SCC


.space {
width: 600px;
height: 300px;
/* 背景 - 满天星斗的天空的片段的图片
默认情况下,它乘以整个块 */
background-image: url(images/120.jpg);
position: relative;
}
/*制作10颗星,其中一些将是
眨眼,部分摔倒*/
.stars1,
.stars2,
.stars3,
.stars4,
.stars5,
.stars6,
.stars7,
.stars8,
.stars9,
.stars10 {
position: absolute;
border-radius: 50%/50%;
background-image: -webkit-radial-gradient(white, black);
width: 3px; /*размер звёздочек, можно увеличить*/
height: 3px;
}
/*将所有星星定位在不同的距离
从块的边缘,并向他们询问一个改变其位置的动画
或透明度*/
.stars1 {
top: 8%;
left: 3%;
animation: stars1 4s 3s linear infinite;
}
.stars2 {
top: 3%;
left: 10%;
animation: stars2 2s linear infinite;
}
.stars3 {
top: 15%;
left: 25%;
animation: stars3 5s 1s linear infinite;
}
.stars4 {
top: 12%;
left: 35%;
animation: stars4 6s 2s linear infinite;
}
.stars5 {
top: 23%;
left: 47%;
animation: stars5 2.5s 1s linear infinite;
}
.stars6 {
top: 11%;
left: 60%;
animation: stars6 7s linear infinite;
}
.stars7 {
top: 20%;
left: 70%;
animation: stars7 2s 1s linear infinite;
}
.stars8 {
top: 12%;
left: 80%;
animation: stars8 4s linear infinite;
}
.stars9 {
top: 30%;
left: 90%;
animation: stars9 3s 2s linear infinite;
}
.stars10 {
top: 7%;
left: 98%;
animation: stars10 6s linear infinite;
}
/*这四颗星让他们眨眼让他们眨眼
从完全透明到完全不透明*/

@keyframes stars2 {
0% {
opacity: 1;
}
100%{
opacity: 0;
}
}
@keyframes stars5 {
0% {
opacity: 1;
}
100%{
opacity: 0;
}
}
@keyframes stars7 {
0% {
opacity: 1;
}
100%{
opacity: 0;
}
}
@keyframes stars9 {
0% {
opacity: 1;
}
100%{
opacity: 0;
}
}

/*其余的是通过放弃它们来完成的
并调整大小*/

@keyframes stars1 {
0% {
width: 1px; /*Размер звёздочки в начале падения*/
}
7% {
width: 6px; /*Размер в процессе падения*/
opacity: 1;
transform: translate(150px, 150px);
}
8% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes stars3 {
0% {
width: 3px;
}
12% {
width: 10px;
opacity: 1;
transform: translate(-200px, 200px);
}
13% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes stars4 {
0% {
width: 3px;
}
10% {
width: 10px;
opacity: 1;
transform: translate(200px, 300px);
}
11% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes stars6 {
0% {
width: 3px;
}
10% {
width: 10px;
opacity: 1;
transform: translate(-400px, 300px);
}
11% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes stars8 {
0% {
width: 3px;
}
10% {
width: 10px;
opacity: 1;
transform: translate(-300px, 300px);
}
11% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes stars10 {
0% {
width: 3px;
}
10% {
width: 10px;
opacity: 1;
transform: translate(-600px, 200px);
}
11% {
opacity: 0;
}
100% {
opacity: 0;
}
}

祝你创造性的成功。

发表在 免费网站脚本 | 留下评论

旋转CSS立方体

PHP

HTML

CSS

MONEY

想在您的网站上使用多维数据集 没有什么比这更容易,因为它是用html和css编写的,没有脚本和库。

这是这个多维数据集的代码。

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>文件</title>
<style>
.wrap {
-webkit-perspective: 500px;
-ms-perspective: 500px;
perspective: 500px;
-webkit-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
float: left;
margin-right: 100px;
}
.cube {
position: relative;
margin: 20px;
width: 70px;
height: 70px;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.face {
display: block;
position: absolute;
top: 0;
left: 0;
width: 70px;
height: 70px;
padding: 5px 3px;
color: #1F0405;
font-size: 16px;
text-align: center;
line-height: 70px;
border-radius: 4px;
box-shadow: inset 0 0 0 2px #705E5F;
}
.front {
-webkit-transform: translateZ(38px);
-ms-transform: translateZ(38px);
transform: translateZ(38px);
background: #fff;
}
.back {
-webkit-transform: translateZ(-38px) rotateY(-180deg);
-ms-transform: translateZ(-38px) rotateY(-180deg);
transform: translateZ(-38px) rotateY(-180deg);
background: #fff;
}
.left {
-webkit-transform: translateX(-38px) rotateY(-90deg);
-ms-transform: translateX(-38px) rotateY(-90deg);
transform: translateX(-38px) rotateY(-90deg);
background: #fff;
}
.rght {
-webkit-transform: translateX(38px) rotateY(90deg);
-ms-transform: translateX(38px) rotateY(90deg);
transform: translateX(38px) rotateY(90deg);
background: #fff;
}
.rotate-y {
-webkit-animation: spinY 10s infinite linear;
-ms-animation: spinY 10s infinite linear;
animation: spinY 10s infinite linear;
}
@-webkit-keyframes spinY {
from {
-webkit-transform: rotateY(0);
-ms-transform: rotateY(0);
transform: rotateY(0);
}
to {
-webkit-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
@keyframes spinY {
from {
-webkit-transform: rotateY(0);
-ms-transform: rotateY(0);
transform: rotateY(0);
}
to {
-webkit-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<div id="wrap" class="wrap">
<div class="cube">
<div id="cube" class="cube rotate-y">
<p class="face back">PHP</p>
<p class="face front">HTML</p>
<p class="face left">CSS</p>
<p class="face rght">MOUNY</p>
</div>
    </div>
</div>
</body>
</html>

祝你创造性的成功。

发表在 免费网站脚本 | 留下评论

CSS浮动块

移动光标

您好亲爱的新手网站管理员。

每个人在悬停时都会遇到动画菜单项和其他项目。

此效果由CSS属性transform创建,并由属性创建3D效果 box-shadow.

移动的大小和方向由属性 transform 设置,通过更改此属性中的值,您不仅可以设置任何方向的线性移动,还可以设置给定角度的倾斜。

本文开头的元素示例。

代码:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>文件</title>
<style>
.element {
color: rgba(0, 0, 0, 0.8);
padding: 30px 5px 0 5px;
position: relative;
display: inline-block;
width: 100px;
height: 80px;
background-color: #fff;
border-radius: 5px;
border: 2px solid rgba(0, 0, 0, 0.5);
-webkit-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.element:after {
content: "";
border-radius: 5px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
opacity: 0;
-webkit-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1));
transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.element:hover {
-webkit-transform: translate(10px);
transform: translate(10px);
}

.element:hover:after {
opacity: 1;
}
</style>
</head>
<body>
<div class="element">Наведи курсор</div>
</body>
</html>

伪元素 :after 之后指定的阴影从一开始就存在,但是完全透明。

当您将光标悬停时,将移除透明度并显示3D效果,这将排除其他变换位置的绘制。

祝你创造性的成功。

发表在 免费网站脚本 | 留下评论

CSS翻转块

Сергей Кутузов

最初的效果,吸引了访客的注意力,并没有破坏页面的外观 – 一个块移位器。

当您将鼠标光标悬停在它上面时将其转为。 试一试,将鼠标悬停在我的照片上。 继续阅读

发表在 免费网站脚本 | 留下评论

下拉框提示或其他信息

通常需要在页面上放置任何单词,短语或段落的提示或附加信息。

以明文形式执行此操作并不总是方便,因为文章的主要线程可能会丢失,因此在这种情况下,最好使用通过鼠标单击打开的隐藏文本。

点击的对象可以是文本的选定部分或“帮助”部分。 位于便利的位置。

附加信息将在单独段落中的文本的选定部分下打开,而所有其他内容将移动到底部,释放选项卡的空间。

П再次单击所选文本或按钮时,带有工具提示的选项卡将关闭。

例子:

1. 突出显示的文字.

文字-文字-文字-文字-文字 文字-文字-文字-文字-文字

文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字

 
代码:

Html

<div class="spravca">文字-文字-文字-文字-文字-文字 <input type="checkbox" id="hd-1" class="reference"/>
<label for="hd-1" >Справка</label> 文字-文字-文字-文字-文字-文字
<span class="story">
文字-文字-文字-文字-文字-文字
文字-文字-文字-文字-文字-文字
</span>
<div>

Css

.reference {
display: none;
}
.reference ~ .story {
display: none;
}
.reference + label {
font-size: 16px;
padding: 0;
color: green;
cursor: pointer;
display: inline-block;
}
.reference:checked ~ .story {
display: block;
background: Snow;
padding: 10px;
}

2. Кнопка, которую можно разместить в любой части контента.

文字-文字-文字-文字-文字-文字 文字-文字-文字-文字-文字-文字

文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字

 
代码:

Html 与第一个例子中的相同.

Css

.reference {
display: none;
}
.reference ~ .story{
display: none;
}
.reference + label {
position: absolute;
top: 0;
left: 200px;
border: 1px solid #333;
border-radius: 4px;
background: #F0FFF0;
padding: 3px;
color: green;
font-size: 16px;
cursor: pointer;
display: inline-block;
}
.reference:checked ~ .story {
display: block;
background: Snow;
padding: 10px;
}
.spravca {
position: relative;
}

您还可以在您的网站风格下在css中安排下拉块。

在HTML5中,默认情况下提供了类似的选项。

它由标签实现

1. <details></details> – 可以展开和折叠的容器.

2. <summary></summary> – 可点击的标题以展开容器。 重新单击折叠容器。

此选项看起来像这样:

текст текст текст текст

 

代码:


<details>
<summary>Заголовок</summary>
текст текст текст текст
</details>

Теги details и summary 默认情况下阻止元素,因此如果需要将容器插入字符串,则需要设置属性 display: inline-block;

您还可以设置其他样式设计。

祝你创造性的成功。

发表在 免费网站脚本 | 留下评论

如何在CSS中创建一个带有弯角的页面 :after和 :before

这是在伪元素的帮助下实现的另一个原始效果。

在本文中,我们将学习如何创建一个带有弯角的页面,没有photoshop,以及伪元素 :after和 :before

带有弯角的页面
继续阅读

发表在 Без рубрики | 留下评论

按钮CSS效果悬停并单击

这与设计无关。 这是一个现成的各种效果代码和详细的评论。

将来,这些效果可以应用于任何设计理念,并创建一个互联网上没有其他人拥有的原始按钮。

以下所示的所有按钮均有效。 选择您喜欢的选项。

继续阅读

发表在 免费网站脚本 | 留下评论

火红的标题

尊敬的网站管理员您好!

在纯JavaScript上为您的网站另一个伟大的装饰.

Пылающий заголовок

我在评论中指出的可用脚本设置。

HTML


<div class="flame" id="fire">Пылающий заголовок</div>

CSS


.flame {
font-size: 30px;
padding: 20px 0 10px 20px;
width: 350px;
font-weight: bold;
background: scroll 0% 0% rgb(0, 0, 0);
color: rgb(50, 50, 50);
text-shadow: -1px 2px rgb(255, 255, 0),
2px -3px 3px rgb(255, 204, 0),
2px -5px 6px rgb(255, 153, 0),
-3px -7px 8px rgb(255, 102, 0),
1px -15px 30px rgb(255, 51, 0),
3px -30px 55px rgb(255, 0, 0)
;

Javascript


<script>
var lever = false; // 拨动开关
var textBrightness = 80; // 文字亮度
var fireCount = 9; // 火焰大小
var fireDelta = new Array();
var step = 10; // 火焰大小
var angle = 0; // 振动角度
var radius = 10;

function animate()
{
fireDelta[fireCount - step] = Math.random() * 2 - 1;
var e = document.getElementById("fire");
var s = "";
for (var i = 0; i < fireCount; i++) { if (s) s += ", ";
s += Math.round(fireDelta[(i + fireCount - step) % fireCount] * i) + "px " + (-2 * i -1) + "px " + (2 + i) + "px ";
s += "rgb(255, " + (255 - i * Math.floor(255 / (fireCount - 1))) + ", 0)";
}
e.style.textShadow = s;
e.style.color = "rgb(" +
(textBrightness + step % 2) + ", " +
textBrightness + ", " +
textBrightness + ")";
step = (step + 1) % fireCount;
angle -= 0.8;

if (angle <= 0) angle = Math.PI * 2; var e = document.getElementById("rgb");
var s = Math.round(Math.cos(angle + Math.PI * 2 / 3) * radius) + "px 4px #0F0";
e.style.textShadow = s;
e.style.color = "rgb(" + (255 - step % 2) + ", 255, 255)";
}

function toggleAnimation()
{
for (var i = 0; i < fireCount; i++) fireDelta[i] = Math.random() * 2 - 1; if (lever)
{
window.clearInterval(lever);
lever = false;
}
else
lever = window.setInterval(function() { animate(); }, 100);
return false;
}
toggleAnimation();
</script>

如果是一个页面,WordPress脚本和html直接安装在页面上。

如果是整个站点,那么在文件header.php或foonter.php /

CSS分别在style.css中。

祝你创造性的成功。

发表在 免费网站脚本 | 留下评论