分享各种网络资源
是我乃至整个互联网的精髓所在
 您目前所在位置: 站点首页 » WordPress » 代码 » WordPress通过CSS3添加图片效果
+

WordPress通过CSS3添加图片效果

WordPress通过CSS3添加图片效果-BanYuner

现在每天就在不断的折腾这个主题,这个主题说实话,从我开始安装就没有停止过折腾了,每天折腾一点,每天折腾一点,时间长了,感觉主题都变动了,不过没事,生命在于折腾。

好吧,不废话了,直接将代码附上吧,一共九段代码,大家自己觉得什么代码有效果的话就使用起来吧。

内边框 Inset Border

body > div
{                    
width:483px;
height:298px;
margin:50px auto;
background:#676470;
color:#fff;            
font-family:Lato;
font-weight:900;
font-size:3.4em;            
text-align:center;
line-height:298px;           
transition:all 0.3s ease;            
}
.border:hover
{
box-shadow: inset 0 0 0 25px #53a7ea;
}

颜色渐变 color

body > div {
margin: 50px auto;
width: 483px;
height: 298px;
background: #676470;
color: #fff;
font-family: Lato;
font-weight: 900;
font-size: 3.4em;
text-align: center;
line-height: 298px;
transition: all 0.3s ease;
}
.color:hover {
background: #53a7ea;
cursor: pointer;
}

淡入 fade in

body > div {
margin: 50px auto;
width: 483px;
height: 298px;
background: #676470;
color: #fff;
font-family: Lato;
font-weight: 900;
font-size: 3.4em;
text-align: center;
line-height: 298px;
transition: all 0.3s;
}
.fade {
opacity: 0.5;
}
.fade:hover {
opacity: 1;
}

放大 Grow

body > div {
margin: 50px auto;
width: 483px;
height: 298px;
background: #676470;
color: #fff;
font-family: Lato;
font-weight: 900;
font-size: 3.4em;
text-align: center;
line-height: 298px;
transition: all 0.3s ease;
}
.grow:hover {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}

旋转 rotate

body > div {
margin: 80px auto;
width: 283px;
height: 198px;
background: #676470;
color: #fff;
font-family: Lato;
font-weight: 900;
font-size: 1.4em;
text-align: center;
line-height: 198px;
transition: all 0.3s ease;
}
.rotate:hover {
-webkit-transform: rotateZ(-30deg);
-ms-transform: rotateZ(-30deg);
transform: rotateZ(-30deg);
}

3D阴影 3D shadow

body > div {
margin: 50px auto;
width: 483px;
height: 298px;
background: #676470;
color: #fff;
font-family: Lato;
font-weight: 900;
font-size: 3.4em;
text-align: center;
line-height: 298px;
transition: all 0.3s ease;
}
.threed:hover {
box-shadow: 1px 1px #53a7ea,  2px 2px #53a7ea,  3px 3px #53a7ea;
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}

收缩 Shrink

body > div {
margin: 50px auto;
width: 483px;
height: 298px;
background: #676470;
color: #fff;
font-family: Lato;
font-weight: 900;
font-size: 3.4em;
text-align: center;
line-height: 298px;
transition: all 0.3s ease;
}
.shrink:hover {
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}

摇摆 swing

body > div {
margin: 50px auto;
width: 483px;
height: 298px;
background: #676470;
color: #fff;
font-family: Lato;
font-weight: 900;
font-size: 3.4em;
text-align: center;
line-height: 298px;
transition: all 0.3s ease;
}
@-webkit-keyframes 
swing {
15% {
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
30% {
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
50% {
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
65% {
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
80% {
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes 
swing {
15% {
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
30% {
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
50% {
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
65% {
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
80% {
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.swing:hover {
-webkit-animation: swing 1s ease;
animation: swing 1s ease;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}

方形变圆形 Square to Circle

body > div {
margin: 50px auto;
width: 483px;
height: 298px;
background: #676470;
color: #fff;
font-family: Lato;
font-weight: 900;
font-size: 3.4em;
text-align: center;
line-height: 298px;
transition: all 0.3s ease;
}
.circle:hover {
border-radius: 50%;
}

上面的代码大家可以适当作为调整,要是有不懂的可以直接百度吧。

关注我们 打赏 分享此文
微信扫码,关注我们
扫码,支持我
WordPress通过CSS3添加图片效果
支付宝(点击图片切换)
扫码,支持我
WordPress通过CSS3添加图片效果
微信(点击图片切换)
扫码,手机看
WordPress通过CSS3添加图片效果
匿名

个人评价:┃草根博主┃站点无技术含量┃文章内容不够吸引人┃转载内容随处可见┃资源均来自网络┃分享是我的宗旨,也是这个站点存在意义,分享的东西你现在可能不需要,但是我相信只要在某个时间你需要的时候能在这里找到,那么我就是成功的

相关推荐

  • WordPress修改默认的头像图标

    WordPress修改默认的头像图标

    随着越来越多人使用WordPress,但是很多用户不会修改自己站点的默认WordPress图标,就会跟我的站点一样,看上去非常不美观, ...

    点击查看
  • WordPress简易集成Markdown教程

    WordPress简易集成Markdown教程

    今天首先在群里面看到一个用户询问是否有方法将Markdown集成到主题里面去,后来我一想,这个所谓的Markdown确实是很多人提到 ...

    点击查看
  • WordPress制作简易年度总结页面

    WordPress制作简易年度总结页面

    今天早些时候已经制作一个类似112博客导航的页面,具体可以详见:

    点击查看
  • WordPress通过短代码显示指定文章内容

    WordPress通过短代码显示指定文章内容

    今天在一个WordPress交流群里面看到一个群友问一个问题,我个人方面也是很感兴趣,这个问题就是如何通过“新建文章栏输入链接 ...

    点击查看
  • 禁用WordPress 4.7版本的PDF预览功能

    禁用WordPress 4.7版本的PDF预览功能

    之前的文章我们也介绍了,关于WordPress 4.7版本中,新增了一个预览PDF的功能,详见:

    点击查看
  • WordPress获取文章的第一张图片并且显示

    WordPress获取文章的第一张图片并且显示

    关于这类的文章我们已经介绍过两种方法了,两种方法都不一样,但是适合自己的才是最好的,虽然今天我要介绍的方法可能不适合 ...

    点击查看
  • 帅气小琦琦
  • 一曲长歌辞烟雨
  • 楚书业
WordPress通过CSS3添加图片效果
4 + 8 =
  • 昵称 (必填)  
  • 邮箱 (必填)
  • 网址 (选填)
  1. 2楼
    一曲长歌辞烟雨
    为什么都没有预览或者演示呢?这样仅仅看代码看不出结果,也就感觉不到文章的价值了 :roll:
    一曲长歌辞烟雨 来自天朝的朋友 火狐浏览器 Windows 10 内蒙古呼和浩特市 中国电信云计算中心 5个月前 (09-06)回复
    • 帅气小琦琦
      @一曲长歌辞烟雨 这个文章是网络上面收集过来的,所以没有展示图,确实是有点看不下去。将就一下吧,毕竟自己折腾比什么都好玩
      帅气小琦琦   来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 电信 5个月前 (09-06)回复
  2. 1楼
    楚书业
    这个可以收藏!
    楚书业 来自天朝的朋友 QQ浏览器 Windows 10 福建省 移动 10个月前 (03-18)回复
    • 帅气小琦琦
      @楚书业 嗯嗯 我个人觉得还是比较有效果的 但是我使用了一下就觉得有点多余了
      帅气小琦琦   来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 电信 10个月前 (03-18)回复