小编Rah*_*yap的帖子

为什么旋转器不旋转/旋转?

我创建了一个锚点链接按钮,当我点击状态按钮时,我想显示Spinner动画:focus.我正在使用Font Awesome来显示动画但是当我点击按钮时,微调器动画无效.

在此输入图像描述

注意:我不想在这里使用JavaScript只想用Pure CSS

这是CodePen链接https://codepen.io/rhulkashyap/pen/vLPNdQ

@import url(https://fonts.googleapis.com/css?family=Titillium+Web);
 body {
  font-family: 'Titillium Web', sans-serif;
  text-align: center;
}
#button {
  padding: 15px;
  background-color: green;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  width: 300px;
  display: inline-block;
  text-align: center;
  font-size: 25px;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
#button:before {
  content: "\f090";
  font-family: FontAwesome;
  margin-right: 5px;
}
#button:focus {
  background-color: #02b402;
}
#button:focus:before {
  content: "\f1ce";
  -webkit-animation: spin .8s ease infinite;
  animation: spin .8s ease …
Run Code Online (Sandbox Code Playgroud)

html css css3 css-transforms css-animations

6
推荐指数
1
解决办法
2148
查看次数

悬停效果不起作用:将鼠标悬停在<a>锚标记上时不会更改Div颜色

我试图通过悬停在锚标签上来改变div颜色但是当我没有发生任何事情时,这里是我的代码,jsfiddel链接https://jsfiddle.net/rhulkashyap/udvzanqz/.

HTMLCSS

.hover-me{
  margin-bottom:50px;
  display:block;
}
.change{
  width:200px;
  height:200px;
  background:#00ACC1;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  font-size:20px;
  color:#fff;
}

.hover-me:hover .change{
  background:#00796B;
}
Run Code Online (Sandbox Code Playgroud)
<a href="#" class="hover-me">Change Div color by hovering me</a>

<div class="change">Hello Universe</div>
Run Code Online (Sandbox Code Playgroud)

html css html5 css3

2
推荐指数
1
解决办法
64
查看次数

如何在HTML电子邮件模板中居中对齐OUTLOOK的背景图像文本?

我正在创建电子邮件模板.当我想和背景图像进行<td>.我使用VML代码使其适用于Outlook及其旧版本.我测试了我的电子邮件模板,它在浏览器GMAIL中工作正常但在OUTLOOK中没有工作

我想实现下面截图中的结果.我在浏览器GMAIL中获得但在OUTLOOK中没有

在此输入图像描述

Outlook文本中,您的Quertly更新正在左上角呈现.我试过使用 position: absolute; top: 50%; left:0 right: 0; 但是也没用

在此输入图像描述

这是我正在使用的代码.

码:

<table cellpadding="0" cellspacing="0" border="0" width="600" height="100" align="center">
  <tr>


 <td background="https://picsum.photos/600/100" bgcolor="#ffffff" width="530" height="95" valign="middle" style="background-image: url('https://picsum.photos/600/100');background-repeat:no-repeat; text-align:center; vertical-align:middle;">
 
   <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:530px;height:95px;color:#ffffff">
    <v:fill type="tile" src="https://picsum.photos/600/100" color="#ffffff" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
 
   <p style="font-family:Arial, …
Run Code Online (Sandbox Code Playgroud)

html outlook vml background-image html-email

0
推荐指数
1
解决办法
1204
查看次数