• 热点推荐:
 首页 / CSS
  • CSS纯静态登陆页面制作案例(无接口)
    CSS纯静态登陆页面制作案例(无接口),写一个简单的登陆界面,只需要一张大自然大图片做背景,再写几个input表单就可以了,看看这最终的效果吧~!基本命名:login box title:  登陆框标题loginWrap:登陆区register:注册CSS案例<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">   &...
    Time:2021年08月08日 23:10:06  Read:303℃
  • 【CSS案例】利用动画实现恐怖阴影的404错误页
    p { font-size: 15px; color: #333; }把背景颜色设置为黑色,字体大小80,白色;再用span往里面写上文字,利用动画keyframes 设置向右走10像素,向上走3像素,把动画时间改成0.08s,看看效果是不是有那种阴森恐怖的感觉了呢,哈哈~!CSS案例<!DOCTYPE html> <html lang="en"> <head>     <meta charset="...
    Time:2021年08月08日 19:00:51  Read:266℃
  • 【CSS案例】实现好看的充电动画特效
    p { font-size: 15px; color: #333; }为了能够把效果做出来,把背景色改为黑色,准备一个充电的主体盒子box,然后用before伪元素做出充电的基本模型;最后用after伪元素在大盒子box里面再创建一个子元素就可以了。让after子元素通过keyframes动画,让它满满填充整个box盒子即可。html+css实例一:<!DOCTYPE html> <html lang="en"> <head>  ...
    Time:2021年08月08日 01:18:24  Read:243℃
  • css利用3D转换旋转制作两面翻转效果案例
    结构采用div>div+div;通过父级div盒子的沿X轴180度旋转,带动两个子元素盒子相互旋转;更重要的是在父元素中给子元素添加透视效果 transform-style:preserve-3d;如果不添加就只能看到一个子元素盒子。代码如下html+css<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">   &nbs...
    Time:2021年07月31日 01:27:31  Read:215℃
  • css通过2D动画转换制作图片旋转案例
    当鼠标经过li时,里面的带有图片的盒子会进行旋转;采用ul>li>div>img的结构;div里面包括img图片,只需要将div旋转就可以完成本章案例;div旋转的中心点可以设置到左下角  transform-origin:left bottom;html+css<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8"> &n...
    Time:2021年07月31日 01:21:25  Read:582℃
  • css如何制作一个简单的网页3D导航栏案例
    制作一个可以翻转的3D导航栏效果,用ul>li里面嵌套DIV来实现。通过翻转li来带动li里面的div进行翻转。里面存放两个div盒子,其中一个盒子需要先沿X轴旋转,再沿Y轴位移,再把另一个盒子往Z轴移动;让两个div盒子正好处于直角位置。html+css<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">    ...
    Time:2021年07月30日 23:14:55  Read:710℃
  • html+css初级案例-腾讯官网简约导航模块制作
    案例小知识,今天做一个腾讯官网首页的导航,还包括了元素的显示与隐藏功能,都可以通过纯css制作出来,先看一下效果,然后再看看代码是如何实现的吧~!记得收藏本页哦~!最终效果对比:css案例<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="...
    Time:2021年07月22日 23:59:18  Read:394℃
  • 用html+css写一个简单的百叶窗效果
    用css也能做出一个简单的百叶窗效果,只需要计算好宽度就可以了,采用div包括ul>li的形式,给li设置宽度,但是li的总宽度刚好是div的宽度。 然后设置当鼠标经过div时,li的宽度会变小;当鼠标经过li时,li的宽度会变大;这个过程需要给每一个li的变化给出明确的宽度,不能超过或者小于div的宽度,但是小bug还是有的。css案例<!DOCTYPE html> <html lang="en"> <head>     <meta charse...
    Time:2021年07月22日 14:48:28  Read:473℃
  • 纯css制作旋转木马图片展示小案例
    只用html+css也能实现木马旋转效果,看起来也是非常棒的特效,最主要的还是运用css3动画和3D转换等相关知识,现在就让小编分享一下这其中的代码,看看是如何制作出这样的旋转木马效果。记得关注,记得收藏哦~!css案例   <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">    &n...
    Time:2021年07月20日 18:41:01  Read:633℃
  • html+纯css制作简约版轮播图案例
    纯CSS制作轮播图,主要通过ul位置来调整运动的方向并且第一张图片和最后一张图片相同,当鼠标经过轮播图片时,轮播图就会停止运动。这是一个纯CSS小案例,多加练习,可以提高CSS熟练度,小编就写出来分享给大家,记得收藏哦。css案例 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <...
    Time:2021年07月20日 17:45:28  Read:612℃
  • CSS实现让小熊在网页中奔跑的动画案例?
    CSS实现让小熊在网页中奔跑的动画?需要一张帧系列图片,结合动画@keyframes,和绝对定位就能实现这个简单的小案例。图片也已经放在CSS样式里面了,复制打开就能看到。css案例<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-...
    Time:2021年07月19日 22:28:50  Read:288℃
排行榜
四种主题风格
广告位 Ad1
关于我们
传授PC资源学习网(www.pc2356.com)个人博客,记录学习前端笔记和日记生活,分享网页源码、软件下载、学习资源等多方面资源网站。
联系我们
意见反馈
举报中心
扫码关注
Copyright@2020-2021 | Powered by©ZBLOG | 传授PC资源分享网 | RSS 订阅 | 站点地图