![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
stack君
这个作者很懒,什么都没留下…
展开
-
解决轮播图容器排铺缩放问题
用以下HTML代码实现轮播图的结构层:<div id="slider" class="slider"> <div class="slider-item-container"> <div class="slider-item"> <a href="###" class="slider-link"> <img src="img/1.jpg" al原创 2021-03-31 21:31:14 · 222 阅读 · 0 评论 -
用css写提示滚屏箭头动画效果
在许多滚屏的网页中都有提示滚屏箭头动画效果,这种效果往往在网页底部显示,提示我们下滑屏幕,现在我们就用css代码来实现这种效果。1、首先创建一个div,并且输入“>”(代码:>),再用css控制其大小、字体,并翻转90°让其向下(transform属性),控制位置为网页底部居中。效果:2、创建向下移动动画关键帧,取名arrow,用定位使箭头每次向下移动2px。3、最后设置动画为无限循环,并且开始动画前延迟0.5s。在这里我使用的是animation复合属性。语法如下:本例用原创 2021-01-09 10:39:18 · 2315 阅读 · 1 评论 -
用css3写太极旋转图
用css写出旋转的太极图效果,主要有两个要点:画出静态效果图和创建动画使它动起来。一、静态效果图用一个div配合伪元素即可完成。1、创建一个div,用css控制其大小、边框、位置等,做成一个静态的圆形,一半为红色一半为白色。效果:2、用div的伪元素绘制两个圆环,并通过绝对定位放置适合位置,使其成为一个太极图案。效果:二、创建动画动画主要用到的是animation相关属性。1、创建动画定义动画名称为“rotate”,周期为5秒,循环播放。2、绑定选择器关键帧,设置逆时针旋转3原创 2021-01-09 10:12:17 · 307 阅读 · 0 评论