使用纯Css实现网站换肤和焦点图切换动画

你将收获

网站换肤设计方案介绍target伪类介绍和用法以及如何使用css实现网站换肤transition动画以及如何用纯css实现焦点图动画

效果展示

1.网站换肤

2.焦点图动画

实现思路

1.网站换肤

通常我们实现网站换肤都基于如下方式实现:

方案一: 使用OOCSS模式,使用实现通过js动态切换公共类名来达到换肤效果方案二: 点击不同的按钮切换不同的样式表,如下:•theme-green.css•theme-red.css•theme-black.css方案三: localStorage存储主题,js动态获取本地存储换肤方案四: element和antd的动态换肤,需要实时编译style样式表

以上几个方案都可以实现一定程度上的换肤效果,但是如果是一些基础性的换肤,比如网站的背景样式,某个按钮的样式,某块内容区域的样式等等这种局部的换肤,我们能不能直接用css来实现呢?答案是可以的,接下来我们就来看纯看css如何实现网站换肤。

在实现换肤之前,网站我们需要了解一个知识点,那就是a标签的源码库:target伪类。

:target伪类

为了辅助标识那些指向文档特定部分链接的换肤和焦目标, CSS3 选择器 引入了 :target 伪类. :target 伪类用来指定那些包含片段标识符的 URI 的目标元素样式。

例如,点图动画 http://xuxi#home , 这个 URI 包含了 #home 片段标识符。在HTML中,切换 标识符是元素的id或者name属性,。由于这两者位于相同的使用实现命名空间，因此，网站这个示例 URI 指向的换肤和焦是文档顶层的云服务器提供商 "home" 。

假设你想修改 URI 指向的点图动画任何 div 元素，但是切换又不想把样式应用到任何其它同类型的元素，那么我们可以这么写：

.swiper {

position: relative;

margin: 0 auto;

display: flex;

width:80vw;

height: 250px;

padding: 18px;

border-radius: 8px;

background: #fff;

box-shadow: 0 0 20px rgba(0,使用实现0,0, .2);

}

.swiper .img {

height: 250px;

width: 0;

overflow: hidden;

display: flex;

align-items: center;

justify-content: center;

transition: width .6s;

background-color: #06c;

color: #fff;

}

.swiper .img:first-child {

width: 100%;

}

.swiperControl {

position: absolute;

left: 50%;

transform: translateX(-50%);

bottom: 30px;

padding: 3px 10px;

border-radius: 20px;

font-size: 0;

background-color: rgba(0,0,0, .3);

}

.swiperControl .dot {

display: inline-block;

margin: 0 6px;

width: 8px;

height: 8px;

border-radius: 6px;

background-color: rgba(255,255,255, .6);

}

.swiperControl .dot:hover {

background-color: rgba(255,255,255, 1);

}

.swiper .img:target {

width: 100%;

}

.swiper .img:not(:target) {

width: 0;

}

我 爱 你 </div>

总结

通过上面介绍的纯css实现网站换肤以及焦点图切换动画,是不是对css有更多的新奇的想法了呢?后面我会继续介绍更多纯css3实现的不可思议的动画,比如3D掷色子,VR图等,敬请期待吧~

很赞哦!（6）