利用css制作活动通知界面
时间: 2023-05-19 22:01:31 浏览: 90
可以使用CSS的伪元素和动画属性来制作活动通知界面。以下是一个简单的示例代码:
HTML代码:
```
<div class="notification">
<p>活动通知:周末特惠,所有商品8折!</p>
</div>
```
CSS代码:
```
.notification {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #f8d7da;
color: #721c24;
padding: 10px;
text-align: center;
animation: slideDown 1s ease-out;
}
.notification p {
margin: 0;
}
@keyframes slideDown {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0);
}
}
```
这段代码会在页面顶部显示一个红色背景、白色文字的通知栏,通知栏会从上方滑动进入页面,持续1秒钟后消失。
相关问题
利用css制作星空
以下是一种使用CSS制作星空的方法:
HTML代码:
```html
<div class="stars"></div>
```
CSS代码:
```css
.stars {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(#000080, #00001a);
}
.stars:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 1px;
height: 1px;
background: #fff;
box-shadow: 0 0 2px #fff,
0 0 4px #fff,
0 0 6px #fff,
0 0 8px #fff,
0 0 12px #fff,
0 0 16px #fff,
0 0 24px #fff;
animation: twinkle 5s linear infinite;
}
@keyframes twinkle {
0% {
opacity: 0;
transform: translate(-50%, -50%) scale(0.2);
}
50% {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
100% {
opacity: 0;
transform: translate(-50%, -50%) scale(0.2);
}
}
```
在这个例子中,我们使用了CSS的渐变背景来制作夜空的颜色。然后,我们使用伪元素和CSS的box-shadow属性来创建闪烁的星星。我们使用动画来使星星闪烁。您可以通过调整CSS属性来调整星星的数量、大小和闪烁速度。
利用css制作星星图案
好的,以下是一种简单的CSS制作星星图案的方法:
HTML代码:
```html
<div class="star"></div>
```
CSS代码:
```css
.star {
width: 0;
height: 0;
border-right: 50px solid transparent;
border-bottom: 35px solid #f8ce0b;
border-left: 50px solid transparent;
transform: rotate(35deg);
margin: 50px auto;
position: relative;
}
.star:before {
content: "";
width: 0;
height: 0;
border-right: 50px solid transparent;
border-bottom: 35px solid #f8ce0b;
border-left: 50px solid transparent;
position: absolute;
top: -25px;
left: -55px;
transform: rotate(-70deg);
}
.star:after {
content: "";
width: 0;
height: 0;
border-right: 50px solid transparent;
border-bottom: 35px solid #f8ce0b;
border-left: 50px solid transparent;
position: absolute;
top: -25px;
left: 55px;
transform: rotate(70deg);
}
```
通过设置伪元素:before和:after,可以让星星变得更加真实。您可以通过调整上述代码中的属性值来调整星星的大小和位置。